feat(t241): improve freight admin views

backend-api/internal/transport/webui/templates/freight.gohtml

@@ -16,16 +16,16 @@
       <a class="button primary" href="/freight/import">导入货运单</a>
     </div>
     {{if .Notice}}<div class="notice" role="status">{{.Notice}}</div>{{end}}
-    <section class="table-region" aria-labelledby="freight-table-title">
+    <section class="table-region freight-region" aria-labelledby="freight-table-title">
       <h2 id="freight-table-title" class="visually-hidden">货运单列表</h2>
       {{if .Orders}}
-      <table>
+      <table class="freight-table freight-list-table">
         <thead>
           <tr>
-            <th scope="col">来源单号</th>
+            <th scope="col">货运单</th>
+            <th scope="col">商品摘要</th>
             <th scope="col">店铺</th>
             <th scope="col">状态</th>
-            <th scope="col">商品</th>
             <th scope="col">更新时间</th>
             <th scope="col"><span class="visually-hidden">操作</span></th>
           </tr>
@@ -33,16 +33,33 @@
         <tbody>
           {{range .Orders}}
           <tr>
-            <td data-label="来源单号">
-              <strong>{{if .SourceCode}}{{.SourceCode}}{{else}}{{.ExternalStockID}}{{end}}</strong>
-              <span class="secondary">ERP ID：{{.ExternalStockID}}</span>
+            <td data-label="货运单">
+              <div class="freight-media">
+                {{if .PreviewImageURL}}
+                <img class="freight-thumb freight-thumb-list" src="{{.PreviewImageURL}}"
+                  width="56" height="56" loading="lazy" decoding="async"
+                  alt="{{if .PreviewTitle}}{{.PreviewTitle}}{{else}}货运商品{{end}}图片">
+                {{else}}
+                <span class="freight-thumb freight-thumb-list freight-thumb-placeholder"
+                  aria-label="{{imageStatusLabel .PreviewImageStatus}}">
+                  {{imageStatusLabel .PreviewImageStatus}}
+                </span>
+                {{end}}
+                <span class="freight-media-copy">
+                  <strong>{{if .SourceCode}}{{.SourceCode}}{{else}}{{.ExternalStockID}}{{end}}</strong>
+                  <span class="secondary">ERP ID：{{.ExternalStockID}}</span>
+                </span>
+              </div>
+            </td>
+            <td data-label="商品摘要">
+              <strong class="freight-product-title">{{if .PreviewTitle}}{{.PreviewTitle}}{{else}}未提供商品标题{{end}}</strong>
+              <span class="secondary">共 {{.ItemCount}} 项</span>
             </td>
             <td data-label="店铺">{{if .ShopName}}{{.ShopName}}{{else}}未提供{{end}}</td>
             <td data-label="状态">
               <span class="secondary">订单：{{if .OrderStatus}}{{.OrderStatus}}{{else}}未提供{{end}}</span>
               <span class="secondary">采购：{{if .PurchaseStatus}}{{.PurchaseStatus}}{{else}}未提供{{end}}</span>
             </td>
-            <td data-label="商品">{{.ItemCount}} 项</td>
             <td data-label="更新时间"><time datetime="{{machineTime .UpdatedAt}}">{{displayTime .UpdatedAt}}</time></td>
             <td data-label="操作"><a class="detail-link" href="/freight/{{pathPart .ID}}">查看详情</a></td>
           </tr>