update sku tags

src/pages/salesOrder/SalesOrderDetail.vue

@@ -96,7 +96,7 @@
 							</div>
 							<div class="main">
 								<div class="title">
-									<span class="name text-bold" v-text="getItemTitle(item)" />
+									<span class="name text-bold" v-text="item.productNameSnapshot || '未命名产品'" />
 									<t-tag
 										:content="getItemFulfillmentStatus(item).text"
 										:theme="getItemFulfillmentStatus(item).theme"
@@ -111,13 +111,17 @@
 									/>
 									<t-tag v-else size="small" content="套餐权益" />
 									<t-tag
-										v-if="item.skuCodeSnapshot || item.skuNameSnapshot || item.specSummarySnapshot"
+										v-if="item.skuCodeSnapshot"
 										size="small"
 										theme="primary"
 										variant="light"
-										:content="item.skuCodeSnapshot || item.skuNameSnapshot || item.specSummarySnapshot"
+										:content="item.skuCodeSnapshot"
+									/>
+									<product-sku-snapshot-tags
+										:snapshot="item.skuSpecSnapshot"
+										:fallback="item.skuNameSnapshot || item.specSummarySnapshot"
+										:unit="item.unitSnapshot"
 									/>
-									<t-tag size="small" theme="primary" variant="light" :content="item.unitSnapshot" />
 								</div>
 							</div>
 						</div>
@@ -216,6 +220,7 @@ import FulfillmentAPI from "@/api/FulfillmentAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoSalesOrderItem, GaoSalesPaymentStatus, SalesOrder } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
@@ -257,11 +262,6 @@ const canCancel = computed(() => !!order.value && order.value.status === "ACTIVE
 const canFulfillByPayment = computed(() => order.value?.paymentStatus === "PAID" || (order.value?.paymentStatus === "PARTIALLY_PAID" && canOperateStock.value));
 const photoURLList = computed(() => photoItems.value.map(item => item.url));
 
-function getItemTitle(item: GaoSalesOrderItem): string {
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
-}
-
 function toPhotoItems(attachmentList?: readonly Partial<Attachment>[]): PhotoItem[] {
 	return (attachmentList || [])
 		.filter(item => !!item.id)
@@ -594,6 +594,8 @@ onUnmounted(() => navBarStore.clearRight());
 						.description {
 							gap: .5rem;
 							display: flex;
+							flex-wrap: wrap;
+							align-items: center;
 						}
 					}
 				}