cmautobuy/docs/task/142-蝦皮主图和店铺.md

142 Admin：商品目录支持蝦皮图片和店铺信息并在列表展示

• 类型：需求
• 父级大工单：#14
• 所属 MVP / 版本：#15 / 商品目录数据接入后续
• 状态：已完成
• 日期：2026-08-11
• Gitea 工单：http://ilaer.eicp.net:8418/chengma/cmautobuy/issues/142

背景与目标

目录来源包含蝦皮主图和店铺名，但系统无法保存和展示，采购员难以快速核对蝦皮与 PDD 商品。本任务在不混用顺运宝观测图片、不覆盖人工或跨来源数据的前提下接入这两个字段。

最终方案

• MySQL schema v9 为蝦皮商品增加主图、店铺名，以及各自的来源、观测时间和人工保护字段；导入记录增加字段级统计。
• 商品目录请求增加 image_url、shop_name，两个字段分别复用 #141 的三种策略；空值不能清除已有值。
• 图片 URL 只接受最长 2048 字节、不含用户信息和明显凭据参数的 HTTP/HTTPS 地址；Admin 服务端不下载或代理图片。
• 列表增加 32×32 懒加载缩略图、失败/无图占位、原图弹窗和蝦皮店铺列；图片请求使用 no-referrer。
• 详情显示完整店铺、主图、各自来源和观测时间。顺运宝图片继续仅在观测规格区域展示。
• 标题列保持 18%，店铺列限制 150px，超出时横向滚动。

改了哪些

• admin/repository/mysql_db.go：追加 schema v9、人工标志约束和形状自检。
• admin/service/catalog_import.go、admin/repository/catalog_import.go：图片 URL 校验、字段级策略、来源审计和统计。
• admin/model/、admin/repository/shopee.go、admin/service/shopee_list.go：扩展商品读模型。
• admin/templates/shopee/、admin/static/：列表、详情、原图预览、失败占位和列宽。
• admin/templates/catalog/、integration handler：展示并返回商品字段导入统计。
• 对应 service/repository/handler/页面/MySQL 集成测试和 Admin 文档。

验收结果

验收标准	结果
合法主图 URL 和店铺名可提交并写入	通过
补空、同来源新观测、空值/旧时间/跨来源保护	通过
人工图片和店铺不被第三方覆盖	通过
顺运宝观测图片不覆盖主图	通过
列表显示懒加载缩略图、店铺和失败占位	通过
图片可预览和新窗口打开，无图无空弹窗	通过
详情显示完整字段来源和时间	通过
标题保持 18%，店铺截断并可横向滚动	通过（静态规则）；未做 1366×768 人工浏览器验收
危险协议、用户信息和明显凭据参数被拒绝	通过
PDD、采购和 Client 四接口不变	通过
Go 1.23 build/test/vet	通过

测试

• 执行的命令：$env:GOTOOLCHAIN='go1.23.0'; go build ./...; go test ./... -count=1; go vet ./...；node --check static/js/app.js。
• 结果：Admin 全部包和 JavaScript 语法检查通过；自动化测试覆盖三种策略、跨来源、旧时间、人工保护、危险 URL、统计和模板字段。
• 没验证到的部分：未启用独立 MySQL 8.4 _test 环境，真实 v8→v9 迁移用例本次跳过；未在 1366×768 浏览器人工查看外部真实图片的加载和横向滚动。

相关提交

• 38d6a0a 展示蝦皮主图和店铺