update sku tags

src/components/ProductSelector.vue

@@ -7,7 +7,27 @@
 		arrow
 		@click="open"
 	>
-		<span class="picker-text" v-text="selectedText || props.placeholder" />
+		<span class="picker-text" v-text="selectedProductName || props.placeholder" />
+		<template #help>
+			<div v-if="selectedSku" class="selected-tags">
+				<t-tag
+					v-for="entry in selectedSkuSpecEntries"
+					:key="`${entry.specName}-${entry.valueName}`"
+					size="small"
+					theme="primary"
+					variant="light-outline"
+					:content="entry.valueName"
+				/>
+				<t-tag
+					v-if="!selectedSkuSpecEntries.length"
+					size="small"
+					theme="primary"
+					variant="light-outline"
+					:content="selectedSku.specSummary || selectedSku.name || '默认 SKU'"
+				/>
+				<t-tag v-if="selectedUnit?.name" size="small" :content="selectedUnit.name" />
+			</div>
+		</template>
 	</t-form-item>
 	<bottom-popup
 		v-model="visible"
@@ -106,7 +126,7 @@ import ProductAPI from "@/api/ProductAPI";
 import type { Product, ProductSku, ProductSkuUnit, ProductSpec, ProductSpecValue } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
-import { formatProductAmount, getProductPhotoURL, getProductSkuText } from "@/utils/product";
+import { formatProductAmount, getProductPhotoURL, getProductSkuSpecEntries } from "@/utils/product";
 
 interface Props {
 	modelValue: { skuId: string; skuUnitId: string } | undefined;
@@ -126,15 +146,16 @@ const activeProduct = ref<Product>();
 const expandedProductKeyList = ref<Array<string | number>>([]);
 const selectedSpecValueMap = reactive<Record<string, string>>({});
 
-const selectedText = computed(() => {
+const selectedProduct = computed(() => {
 	if (!props.modelValue?.skuId) {
-		return "";
+		return undefined;
 	}
-	const product = props.selectedProduct || productList.value.find(item => item.skuList?.some(sku => sku.id === props.modelValue?.skuId));
-	const sku = product?.skuList?.find(item => item.id === props.modelValue?.skuId);
-	const unit = sku?.unitList?.find(item => item.id === props.modelValue?.skuUnitId);
-	return `${getProductSkuText(product?.name, sku)}${unit?.name ? ` · ${unit.name}` : ""}`;
+	return props.selectedProduct || productList.value.find(item => item.skuList?.some(sku => sku.id === props.modelValue?.skuId));
 });
+const selectedSku = computed(() => selectedProduct.value?.skuList?.find(item => item.id === props.modelValue?.skuId));
+const selectedUnit = computed(() => selectedSku.value?.unitList?.find(item => item.id === props.modelValue?.skuUnitId));
+const selectedProductName = computed(() => selectedProduct.value?.name || "");
+const selectedSkuSpecEntries = computed(() => getProductSkuSpecEntries(selectedSku.value || { specValueIdList: [] }, selectedProduct.value?.specList || []));
 const filteredProductList = computed(() => {
 	const text = keyword.value.toLocaleLowerCase();
 	return productList.value.filter(item => !text || `${item.name}${item.code}`.toLocaleLowerCase().includes(text));
@@ -231,6 +252,13 @@ function selectUnit(sku: ProductSku, skuUnitId: string): void {
 	.picker-text {
 		color: var(--td-text-color-primary);
 	}
+
+	.selected-tags {
+		gap: .375rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+	}
 }
 
 .popup {