style: 优化蝦皮列表关键信息展示 (#214)

admin/main_test.go

@@ -378,7 +378,7 @@ func TestShopeePage_展示主图店铺且保留标题宽度(t *testing.T) {
 		t.Fatal(err)
 	}
 	content := string(page) + string(detail) + string(css) + string(js)
-	for _, want := range []string{"蝦皮店铺", "data-image-preview-url", "loading=\"lazy\"", "data-image-thumb-fallback", "ImageSourceText", "max-width: 18%", ".col-shop", "setupImageThumbnails"} {
+	for _, want := range []string{"蝦皮店铺", "data-image-preview-url", "loading=\"lazy\"", "data-image-thumb-fallback", "ImageSourceText", "max-width: 120px", ".col-shop", "setupImageThumbnails"} {
 		if !strings.Contains(content, want) {
 			t.Errorf("蝦皮图片店铺界面缺少 %q", want)
 		}

admin/service/shopee_list.go

@@ -37,8 +37,10 @@ type ShopeeProductView struct {
 	PendingCount int
 	SourceText   string
 
-	// PddURL 为空且 PddMissing 为 true 时，模板显示"未填写"并标红——
-	// 这是最需要操作员注意的状态，见 §4.2。
+	// 列表正文只显示稳定、短小的 PDD 商品 ID，完整 URL 留在 title 中。
+	// PddMissing 为 true 时模板显示"未填写"并标红——这是最需要操作员
+	// 注意的状态，见 §4.2。
+	PddGoodsID string
 	PddURL     string
 	PddMissing bool
 
@@ -123,9 +125,9 @@ func ListShopeeProducts(db *sql.DB, filter repository.ShopeeFilter, page int) (*
 
 		if r.PddGoodsID == "" {
 			v.PddMissing = true
-			v.PddURL = "未填写"
 			v.StatusText = "未填链接"
 		} else {
+			v.PddGoodsID = r.PddGoodsID
 			v.PddURL = r.PddGoodsURL
 			if r.CollectStatus.Valid {
 				v.StatusText = collectStatusText(model.CollectStatus(r.CollectStatus.String))

admin/service/shopee_list_test.go

@@ -193,8 +193,8 @@ func TestListShopeeProducts_PDD链接未填写(t *testing.T) {
 		t.Fatalf("查询失败: %v", err)
 	}
 	row := result.Rows[0]
-	if !row.PddMissing || row.PddURL != "未填写" {
-		t.Errorf("PddMissing/PddURL = %v/%q，想要 true/\"未填写\"", row.PddMissing, row.PddURL)
+	if !row.PddMissing || row.PddGoodsID != "" || row.PddURL != "" {
+		t.Errorf("未关联 PDD 视图错误：%+v", row)
 	}
 	if row.StatusText != "未填链接" {
 		t.Errorf("StatusText = %q，想要 \"未填链接\"", row.StatusText)
@@ -221,6 +221,9 @@ func TestListShopeeProducts_采集状态联查(t *testing.T) {
 	if row.PddMissing {
 		t.Error("已填链接，PddMissing 应为 false")
 	}
+	if row.PddGoodsID != "9001" || row.PddURL != "https://mobile.yangkeduo.com/goods.html?goods_id=9001" {
+		t.Errorf("PDD 商品 ID/完整链接错误：%q/%q", row.PddGoodsID, row.PddURL)
+	}
 	if row.StatusText != "已采集" {
 		t.Errorf("StatusText = %q，想要 \"已采集\"", row.StatusText)
 	}

admin/static/css/app.css

@@ -240,17 +240,17 @@ tr.empty small { color: #aaa; }
   text-overflow: ellipsis;
 }
 
-/* 蝦皮数据页商品名称列收窄，配合 .truncate 一起用（见工单 #41）。
+/* 蝦皮数据页商品名称列收窄，配合 .truncate 一起用（见工单 #214）。
    用独立类设 max-width，不用 flex——.search-narrow 那套是给工具条用的，
    表格单元格不是 flex 布局，flex 在这里不生效。放在 .truncate 之后，
    同优先级下按 CSS 层叠顺序覆盖 .truncate 的 280px。
 
-   18% = 初版 30% 的六成。蝦皮标题普遍很长（实测最长 60+ 字，
-   全是关键词堆砌），不收窄的话这一列会把后面的颜色/尺码/SKU/待补
-   几个关键数字挤出屏幕——而那几个数字才是这个页面要看的东西。
+   固定 120px 约等于原 18% 宽度的 45%，同时避免百分比列宽随浏览器
+   表格算法和窗口宽度大幅波动。蝦皮标题普遍很长（实测最长 60+ 字），
    完整标题靠悬停的 title 属性看。 */
 .col-title {
-  max-width: 18%;
+  width: 120px;
+  max-width: 120px;
 }
 .col-shop { max-width: 150px; }
 .thumb-placeholder, .thumb-fallback { color: #6b7280; font-size: 12px; white-space: nowrap; }

admin/templates/shopee/list.html

@@ -77,7 +77,7 @@
            不加这一列坏数据就会被悄悄吃掉，见 #41。 */}}
       <th>待补</th>
       <th>来源</th>
-      <th>PDD 链接</th>
+      <th>PDD 商品 ID</th>
       <th>采集状态</th>
       <th>更新时间</th>
     </tr>
@@ -98,7 +98,7 @@
       <td>{{.SKUCount}}</td>
       <td>{{.PendingCount}}</td>
       <td>{{.SourceText}}</td>
-      <td{{if .PddMissing}} class="missing"{{end}}>{{.PddURL}}</td>
+      <td{{if .PddMissing}} class="missing"{{end}}>{{if .PddMissing}}未填写{{else}}<span title="{{.PddURL}}">{{.PddGoodsID}}</span>{{end}}</td>
       <td>{{.StatusText}}</td>
       <td>{{.UpdatedAt}}</td>
     </tr>