feat(web): show color images in PDD product list (#168)

web/src/views/goauto/pdd-products/index.vue

@@ -16,7 +16,7 @@
           <el-table-column label="goods_id" prop="goodsId" min-width="150" />
           <el-table-column label="商品 / 店铺" min-width="240"><template #default="{ row }"><div class="primary">{{ row.title || '资料待完善' }}</div><div class="muted">{{ row.shopName || '尚未填写店铺' }}</div></template></el-table-column>
           <el-table-column label="状态 / 采集任务" min-width="190"><template #default="{ row }"><el-tag :type="statusMeta(row.status).type">{{ statusMeta(row.status).label }}</el-tag><div :class="row.collectionSelectable ? 'collection-ready' : 'muted'">{{ collectionStateText(row) }}</div></template></el-table-column>
-          <el-table-column label="销量 / 评价" width="140"><template #default="{ row }"><div>销量 {{ countText(row.salesCount) }}</div><div class="muted">评价 {{ countText(row.reviewCount) }}</div></template></el-table-column>
+          <el-table-column label="颜色图" width="100" align="center"><template #default="{ row }"><el-image v-if="row.colorImages?.[0]?.imagePath" class="list-color-thumb" :src="row.colorImages[0].imagePath" :alt="`${row.colorImages[0].color || ''}颜色图`" fit="cover" lazy><template #error><span class="list-color-placeholder">暂无图片</span></template></el-image><span v-else class="list-color-placeholder">暂无图片</span></template></el-table-column>
           <el-table-column label="规格" min-width="180"><template #default="{ row }">{{ specsSummary(row.specs) }}</template></el-table-column>
           <el-table-column label="颜色价格" min-width="130"><template #default="{ row }">{{ priceSummary(row.specs) }}</template></el-table-column>
           <el-table-column label="更新时间" width="170"><template #default="{ row }">{{ parseTime(row.updatedAt) }}</template></el-table-column>
@@ -279,4 +279,5 @@ export default {
 
 <style lang="scss" scoped>
 .page-card { min-height: calc(100vh - 124px); }.page-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;h1{margin:0 0 6px;font-size:24px;color:#1f2937}p{margin:0;color:#606266;line-height:1.5}}.search-form{padding:16px 16px 0;margin-bottom:16px;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc}.location-notice{margin-bottom:12px}.batch-toolbar{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;margin-bottom:12px;border:1px solid #dbeafe;border-radius:8px;background:#f8fafc}.batch-toolbar strong{font-variant-numeric:tabular-nums;color:#1e40af}.primary{font-weight:600;color:#1f2937}.muted{font-size:12px;color:#909399}.collection-ready{margin-top:4px;font-size:12px;color:#1677ff}.notice{margin-bottom:20px}.batch-summary{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#606266}.batch-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.drawer-body{padding:0 4px 24px}.drawer-actions,.section-heading,.dimension-header{display:flex;align-items:center;gap:12px}.drawer-actions,.section-heading{justify-content:space-between}.drawer-actions>div{display:flex;gap:8px}.section-title{margin:28px 0 14px}.spec-block{margin-bottom:20px}.spec-title{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600}.color-thumb,.color-image-placeholder{display:inline-flex;width:64px;height:64px;border-radius:6px}.color-thumb{cursor:zoom-in}.color-image-placeholder{align-items:center;justify-content:center;box-sizing:border-box;border:1px dashed #dcdfe6;background:#f5f7fa;color:#909399;font-size:12px}.color-image-note{margin:8px 0 0;color:#909399;font-size:12px;line-height:1.5}.link{color:#1677ff;overflow-wrap:anywhere}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.stock-help{margin:0 0 14px;color:#606266;font-size:13px;line-height:1.6}.stock-boundary{margin-bottom:0}.section-heading{margin:12px 0;h3{margin:0}}.dimension-card{margin-bottom:16px}.dimension-header{margin-bottom:14px}.dimension-header .el-input{flex:1}.add-value{margin-top:12px}@media(max-width:768px){.page-heading,.dimension-header{align-items:stretch;flex-direction:column}.batch-toolbar,.batch-summary{align-items:flex-start;flex-direction:column}.batch-form,.form-grid{grid-template-columns:1fr}}
+.list-color-thumb{display:block;width:56px;height:56px;margin:auto;border-radius:4px}.list-color-placeholder{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:auto;border-radius:4px;background:#f1f5f9;color:#909399;font-size:11px}
 </style>