From cbc819705779278f7095c5c3d1f11a3a41da01e1 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Tue, 8 Sep 2026 14:49:44 +0800
Subject: [PATCH] fix product/sku name

---
 src/components/ProductSkuSnapshotTags.vue             |  7 +++++--
 src/pages/fulfillment/OrderFulfillmentCreate.vue      |  3 ++-
 src/pages/fulfillment/OrderFulfillmentDetail.vue      |  3 ++-
 .../components/OrderFulfillmentListCell.vue           |  3 ++-
 src/pages/package/PackageConfigDetail.vue             |  4 ++--
 src/pages/package/PackageConfigList.vue               |  5 +++--
 src/pages/package/PackagePurchase.vue                 |  9 +++++++--
 src/pages/product/ProductStockRecordDetail.vue        |  3 ++-
 src/pages/product/ProductStockRecordList.vue          |  3 ++-
 src/pages/salesOrder/SalesOrderDetail.vue             |  3 ++-
 .../salesOrder/components/SalesOrderListCell.vue      |  3 ++-
 src/utils/product.ts                                  | 11 +++++++++--
 12 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/components/ProductSkuSnapshotTags.vue b/src/components/ProductSkuSnapshotTags.vue
index 2355e70..27f8f31 100644
--- a/src/components/ProductSkuSnapshotTags.vue
+++ b/src/components/ProductSkuSnapshotTags.vue
@@ -14,10 +14,12 @@
 
 <script setup lang="ts">
 import type { ProductSkuSpecSnapshot } from "@/types/Product";
+import { getProductSkuSnapshotText } from "@/utils/product";
 
 defineOptions({ name: "ProductSkuSnapshotTags" });
 
 interface Props {
+	productName?: string | null;
 	snapshot?: ProductSkuSpecSnapshot[];
 	fallback?: string;
 	unit?: string | null;
@@ -30,10 +32,11 @@ const tagList = computed(() => {
 		const content = item.specValueName?.trim() || item.specName?.trim();
 		return content ? [{ key: `${item.specId || "spec"}-${item.specValueId || index}`, content }] : [];
 	});
-	if (result.length || !props.fallback?.trim()) {
+	const fallback = getProductSkuSnapshotText(props.productName, props.fallback);
+	if (result.length || !fallback) {
 		return result;
 	}
-	return [{ key: "fallback", content: props.fallback.trim() }];
+	return [{ key: "fallback", content: fallback }];
 });
 const unitText = computed(() => props.unit?.trim() || "");
 </script>
diff --git a/src/pages/fulfillment/OrderFulfillmentCreate.vue b/src/pages/fulfillment/OrderFulfillmentCreate.vue
index aaa9d9e..4be68a4 100644
--- a/src/pages/fulfillment/OrderFulfillmentCreate.vue
+++ b/src/pages/fulfillment/OrderFulfillmentCreate.vue
@@ -40,8 +40,9 @@
 									:content="item.skuCodeSnapshot"
 								/>
 								<product-sku-snapshot-tags
+									:product-name="item.productNameSnapshot"
 									:snapshot="item.skuSpecSnapshot"
-									:fallback="item.skuNameSnapshot || item.specSummarySnapshot"
+									:fallback="item.specSummarySnapshot || item.skuNameSnapshot"
 									:unit="item.unitSnapshot"
 								/>
 							</div>
diff --git a/src/pages/fulfillment/OrderFulfillmentDetail.vue b/src/pages/fulfillment/OrderFulfillmentDetail.vue
index e75c26d..e7f7443 100644
--- a/src/pages/fulfillment/OrderFulfillmentDetail.vue
+++ b/src/pages/fulfillment/OrderFulfillmentDetail.vue
@@ -36,8 +36,9 @@
 					<template #description>
 						<div class="item-description">
 							<product-sku-snapshot-tags
+								:product-name="item.productNameSnapshot"
 								:snapshot="item.skuSpecSnapshot"
-								:fallback="item.skuNameSnapshot || item.specSummarySnapshot || '默认 SKU'"
+								:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
 								:unit="item.unitSnapshot"
 							/>
 							<span v-text="`履约数量 ${item.quantity || 0}`" />
diff --git a/src/pages/fulfillment/components/OrderFulfillmentListCell.vue b/src/pages/fulfillment/components/OrderFulfillmentListCell.vue
index 4351707..aabd108 100644
--- a/src/pages/fulfillment/components/OrderFulfillmentListCell.vue
+++ b/src/pages/fulfillment/components/OrderFulfillmentListCell.vue
@@ -39,8 +39,9 @@
 						<span v-text="`× ${getPackageQuantityText(item.quantity)}`" />
 					</div>
 					<product-sku-snapshot-tags
+						:product-name="item.productNameSnapshot"
 						:snapshot="item.skuSpecSnapshot"
-						:fallback="item.skuNameSnapshot || item.specSummarySnapshot || '默认 SKU'"
+						:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
 						:unit="item.unitSnapshot"
 					/>
 				</div>
diff --git a/src/pages/package/PackageConfigDetail.vue b/src/pages/package/PackageConfigDetail.vue
index d722bd7..40a0723 100644
--- a/src/pages/package/PackageConfigDetail.vue
+++ b/src/pages/package/PackageConfigDetail.vue
@@ -89,7 +89,7 @@ import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount, getPackageConfigStatusText } from "@/utils/package";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
-import { getProductPhotoURL as getProductPhotoUrl } from "@/utils/product";
+import { getProductPhotoURL as getProductPhotoUrl, getProductSkuSnapshotText } from "@/utils/product";
 
 defineOptions({ name: "PackageConfigDetail" });
 
@@ -117,7 +117,7 @@ function getItemPhotoURL(item: PackageConfigItem): string {
 }
 
 function getItemTitle(item: PackageConfigItem): string {
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
+	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
 	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
 }
 
diff --git a/src/pages/package/PackageConfigList.vue b/src/pages/package/PackageConfigList.vue
index 5ce7ba8..ef0f8dd 100644
--- a/src/pages/package/PackageConfigList.vue
+++ b/src/pages/package/PackageConfigList.vue
@@ -46,7 +46,7 @@
 								<div class="products">
 									<t-tag
 										v-for="productItem in item.itemList || []"
-						:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
+										:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
 										:content="getProductRightText(productItem)"
 										theme="primary"
 										variant="light"
@@ -93,6 +93,7 @@ import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount, getPackageConfigStatusText, getPackageQuantityText } from "@/utils/package";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { getProductSkuSnapshotText } from "@/utils/product";
 
 defineOptions({ name: "PackageConfigList" });
 
@@ -193,7 +194,7 @@ function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning
 
 function getProductRightText(item: PackageConfigItem): string {
 	const quantity = getPackageQuantityText(item.defaultQuantity);
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
+	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
 	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
 }
 
diff --git a/src/pages/package/PackagePurchase.vue b/src/pages/package/PackagePurchase.vue
index 2d42373..26503a5 100644
--- a/src/pages/package/PackagePurchase.vue
+++ b/src/pages/package/PackagePurchase.vue
@@ -237,7 +237,7 @@ import { formatPackageAmount } from "@/utils/package";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { uploadPhotoList } from "@/utils/photo";
-import { getProductPhotoURL } from "@/utils/product";
+import { getProductPhotoURL, getProductSkuSnapshotText } from "@/utils/product";
 
 defineOptions({
 	name: "PackagePurchase"
@@ -407,7 +407,12 @@ const {
 
 function getItemLabel(item: PackagePurchaseItem): string {
 	const configItem = config.value?.itemList?.find(configItem => configItem.skuId === item.skuId && configItem.skuUnitId === item.skuUnitId);
-	return configItem ? `${configItem.productNameSnapshot || "未命名产品"} · ${configItem.skuNameSnapshot || configItem.specSummarySnapshot || "默认 SKU"}` : "产品权益";
+	if (!configItem) {
+		return "产品权益";
+	}
+	const productName = configItem.productNameSnapshot || "未命名产品";
+	const skuText = getProductSkuSnapshotText(productName, configItem.skuNameSnapshot, configItem.specSummarySnapshot);
+	return skuText ? `${productName} · ${skuText}` : productName;
 }
 
 function getItemName(item: PackagePurchaseItem): string {
diff --git a/src/pages/product/ProductStockRecordDetail.vue b/src/pages/product/ProductStockRecordDetail.vue
index 2c4dd13..42875b1 100644
--- a/src/pages/product/ProductStockRecordDetail.vue
+++ b/src/pages/product/ProductStockRecordDetail.vue
@@ -7,8 +7,9 @@
 				<h2 v-text="record.productNameSnapshot || '未命名产品'" />
 				<product-sku-snapshot-tags
 					class="sku"
+					:product-name="record.productNameSnapshot"
 					:snapshot="record.skuSpecSnapshot"
-					:fallback="record.skuNameSnapshot || record.specSummarySnapshot || '默认 SKU'"
+					:fallback="record.specSummarySnapshot || record.skuNameSnapshot || '默认 SKU'"
 					:unit="record.unitSnapshot"
 				/>
 				<div class="meta">
diff --git a/src/pages/product/ProductStockRecordList.vue b/src/pages/product/ProductStockRecordList.vue
index 776be0f..137d5cd 100644
--- a/src/pages/product/ProductStockRecordList.vue
+++ b/src/pages/product/ProductStockRecordList.vue
@@ -56,8 +56,9 @@
 						<div class="description">
 							<strong v-text="record.productNameSnapshot || '未命名产品'" />
 							<product-sku-snapshot-tags
+								:product-name="record.productNameSnapshot"
 								:snapshot="record.skuSpecSnapshot"
-								:fallback="record.skuNameSnapshot || record.specSummarySnapshot || '默认 SKU'"
+								:fallback="record.specSummarySnapshot || record.skuNameSnapshot || '默认 SKU'"
 								:unit="record.unitSnapshot"
 							/>
 							<pass-time-label :timestamp="record.occurredAt" underline />
diff --git a/src/pages/salesOrder/SalesOrderDetail.vue b/src/pages/salesOrder/SalesOrderDetail.vue
index 1406028..881cb8e 100644
--- a/src/pages/salesOrder/SalesOrderDetail.vue
+++ b/src/pages/salesOrder/SalesOrderDetail.vue
@@ -118,8 +118,9 @@
 										:content="item.skuCodeSnapshot"
 									/>
 									<product-sku-snapshot-tags
+										:product-name="item.productNameSnapshot"
 										:snapshot="item.skuSpecSnapshot"
-										:fallback="item.skuNameSnapshot || item.specSummarySnapshot"
+										:fallback="item.specSummarySnapshot || item.skuNameSnapshot"
 										:unit="item.unitSnapshot"
 									/>
 								</div>
diff --git a/src/pages/salesOrder/components/SalesOrderListCell.vue b/src/pages/salesOrder/components/SalesOrderListCell.vue
index e37791d..523dc43 100644
--- a/src/pages/salesOrder/components/SalesOrderListCell.vue
+++ b/src/pages/salesOrder/components/SalesOrderListCell.vue
@@ -92,6 +92,7 @@ import type { GaoSalesPaymentStatus, SalesOrder } from "@/types/SalesOrder";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
 import { getSalesOrderStatusText, getSalesOrderTypeText, getSalesPaymentStatusText, getStatusTheme } from "@/utils/salesOrder";
+import { getProductSkuSnapshotText } from "@/utils/product";
 
 defineOptions({ name: "SalesOrderListCell" });
 
@@ -143,7 +144,7 @@ function sumProductQuantity(field: "quantity" | "fulfilledQuantity"): string {
 }
 
 function getProductText(item: NonNullable<SalesOrder["itemList"]>[number]): string {
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
+	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
 	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}${item.unitSnapshot ? ` / ${item.unitSnapshot}` : ""}`;
 }
 </script>
diff --git a/src/utils/product.ts b/src/utils/product.ts
index a8ea461..f4a728a 100644
--- a/src/utils/product.ts
+++ b/src/utils/product.ts
@@ -103,8 +103,15 @@ export function getProductBaseUnitName(sku?: ProductSku): string {
 
 /** 组合产品名、SKU 名称和规格摘要，供选品后的业务页面统一展示。 */
 export function getProductSkuText(productName: string | undefined, sku?: Pick<ProductSku, "name" | "specSummary">): string {
-	const skuText = sku?.specSummary || sku?.name;
-	return skuText && skuText !== productName ? `${productName || "未命名产品"} · ${skuText}` : productName || "未命名产品";
+	const skuText = getProductSkuSnapshotText(productName, sku?.name, sku?.specSummary);
+	return skuText ? `${productName || "未命名产品"} · ${skuText}` : productName || "未命名产品";
+}
+
+/** 获取 SKU 快照的独立展示文本；默认 SKU 与产品同名时不重复展示。 */
+export function getProductSkuSnapshotText(productName?: string | null, skuName?: string | null, specSummary?: string | null): string {
+	const productText = productName?.trim() || "";
+	const skuText = specSummary?.trim() || skuName?.trim() || "";
+	return skuText && skuText !== productText ? skuText : "";
 }
 
 export type ProductSkuSpecEntry = {