update sku tags

src/pages/fulfillment/components/OrderFulfillmentListCell.vue

@@ -29,13 +29,21 @@
 		<t-divider />
 		<div class="product">
 			<div class="items">
-				<t-tag
+				<div
 					v-for="(item, index) in itemList"
 					:key="item.id || `${item.skuId}-${item.skuUnitId}-${index}`"
-					:content="getProductText(item)"
-					theme="primary"
-					variant="light"
-				/>
+					class="item"
+				>
+					<div class="item-title">
+						<strong v-text="item.productNameSnapshot || '未命名产品'" />
+						<span v-text="`× ${getPackageQuantityText(item.quantity)}`" />
+					</div>
+					<product-sku-snapshot-tags
+						:snapshot="item.skuSpecSnapshot"
+						:fallback="item.skuNameSnapshot || item.specSummarySnapshot || '默认 SKU'"
+						:unit="item.unitSnapshot"
+					/>
+				</div>
 				<t-tag v-if="!itemList.length" content="暂无产品" />
 			</div>
 		</div>
@@ -64,7 +72,8 @@
 
 <script setup lang="ts">
 import { PassTimeLabel } from "timi-web";
-import type { OrderFulfillment, OrderFulfillmentItem } from "@/types/Fulfillment";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
+import type { OrderFulfillment } from "@/types/Fulfillment";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { getPackageQuantityText } from "@/utils/package";
 import { getFulfillmentStatusText, getStatusTheme } from "@/utils/salesOrder";
@@ -99,14 +108,6 @@ const totalProductQuantity = computed(() => {
 });
 const productSummaryText = computed(() => `共 ${itemList.value.length} 项 · 总数量 ${totalProductQuantity.value}`);
 
-function getProductText(item: OrderFulfillmentItem): string {
-	const productName = item.productNameSnapshot || "未命名产品";
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
-	const quantity = getPackageQuantityText(item.quantity);
-	const unit = item.unitSnapshot ? ` ${item.unitSnapshot}` : "";
-	return `${productName}${skuText ? ` · ${skuText}` : ""} × ${quantity}${unit}`;
-}
-
 function getUserName(user: OrderFulfillment["operator"], userId: string | undefined, fallback: string): string {
 	return user?.nick || user?.name || userId || fallback;
 }
@@ -178,6 +179,34 @@ function getUserName(user: OrderFulfillment["operator"], userId: string | undefi
 			scrollbar-width: none;
 			-webkit-overflow-scrolling: touch;
 
+			.item {
+				gap: .375rem;
+				display: flex;
+				min-width: 9rem;
+				flex: 0 0 auto;
+				flex-direction: column;
+				white-space: normal;
+
+				.item-title {
+					gap: .375rem;
+					display: flex;
+					align-items: baseline;
+
+					strong {
+						max-width: 9rem;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+
+					span {
+						color: var(--td-text-color-secondary);
+						font-size: .75rem;
+						white-space: nowrap;
+					}
+				}
+			}
+
 			:deep(.t-tag) {
 				flex: 0 0 auto;
 			}