update sku tags

src/pages/fulfillment/OrderFulfillmentDetail.vue

@@ -30,10 +30,19 @@
 					class="item"
 					v-for="item in fulfillment.itemList || []"
 					:key="item.id"
-					:title="getItemTitle(item)"
-					:description="`${item.quantity} ${item.unitSnapshot}`"
+					:title="item.productNameSnapshot || '未命名产品'"
 					:note="`待履约 ${item.reservedBefore || 0} → ${item.reservedAfter || 0}`"
 				>
+					<template #description>
+						<div class="item-description">
+							<product-sku-snapshot-tags
+								:snapshot="item.skuSpecSnapshot"
+								:fallback="item.skuNameSnapshot || item.specSummarySnapshot || '默认 SKU'"
+								:unit="item.unitSnapshot"
+							/>
+							<span v-text="`履约数量 ${item.quantity || 0}`" />
+						</div>
+					</template>
 					<template #leftIcon>
 						<t-image
 							v-if="getProductPhotoURL(item)"
@@ -121,6 +130,7 @@ import { useUserStore } from "timi-web-api";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { OrderFulfillment } from "@/types/Fulfillment";
 import type { GaoSalesOrderItemType, SalesOrder } from "@/types/SalesOrder";
@@ -175,10 +185,6 @@ const sourceItemType = computed<GaoSalesOrderItemType | undefined>(() => {
 	return order.value?.itemList?.find(item => item.id === sourceOrderItemId)?.itemType;
 });
 
-function getItemTitle(item: NonNullable<OrderFulfillment["itemList"]>[number]): string {
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
-}
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) return;
@@ -318,6 +324,13 @@ onUnmounted(() => navBarStore.clearRight());
 		.item {
 			padding: 10px;
 
+			.item-description {
+				gap: .375rem;
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+			}
+
 			.avatar {
 				width: 3.5rem;
 				height: 3.5rem;