fix sku display

src/components/ProductSelector.vue

@@ -9,6 +9,7 @@
 	>
 		<span class="picker-text" v-text="selectedProductName || props.placeholder" />
 	</t-form-item>
+	<product-sku-form-item :sku="selectedSku" :unit="selectedUnit" />
 	<bottom-popup
 		v-model="visible"
 		title="选择产品 SKU"
@@ -103,6 +104,7 @@
 <script setup lang="ts">
 import { BottomPopup } from "timi-tdesign-mobile";
 import ProductAPI from "@/api/ProductAPI";
+import ProductSkuFormItem from "@/components/ProductSkuFormItem.vue";
 import type {
 	Product,
 	ProductSelection,
@@ -143,6 +145,8 @@ const selectedProduct = computed(() => {
 	return props.selectedProduct || productList.value.find(item => item.skuList?.some(sku => sku.id === props.modelValue?.skuId));
 });
 const selectedProductName = computed(() => selectedProduct.value?.name || "");
+const selectedSku = computed(() => selectedProduct.value?.skuList?.find(sku => sku.id === props.modelValue?.skuId));
+const selectedUnit = computed(() => selectedSku.value?.unitList?.find(unit => unit.id === props.modelValue?.skuUnitId));
 const filteredProductList = computed(() => {
 	const text = keyword.value.toLocaleLowerCase();
 	return productList.value.filter(item => !text || `${item.name}${item.code}`.toLocaleLowerCase().includes(text));

src/components/ProductSkuFormItem.vue

@@ -0,0 +1,22 @@
+<template>
+	<t-form-item v-if="skuText || unitText" label="产品 SKU" content-align="right">
+		<product-sku-tags :fallback="skuText" :unit="unitText" />
+	</t-form-item>
+</template>
+
+<script setup lang="ts">
+import ProductSkuTags from "@/components/ProductSkuTags.vue";
+import type { ProductSku, ProductSkuUnit } from "@/types/Product";
+
+defineOptions({ name: "ProductSkuFormItem" });
+
+interface Props {
+	sku?: ProductSku;
+	unit?: ProductSkuUnit;
+}
+
+const props = defineProps<Props>();
+
+const skuText = computed(() => props.sku?.name?.trim() || props.sku?.specSummary?.trim() || "");
+const unitText = computed(() => props.unit?.name?.trim() || "");
+</script>

src/components/ProductSkuTags.vue

@@ -8,6 +8,7 @@
 			variant="light-outline"
 			:content="tag.content"
 		/>
+		<t-tag v-if="unitText" size="small" :content="unitText" />
 	</div>
 </template>
 
@@ -15,7 +16,7 @@
 import type { ProductSkuSpecSnapshot } from "@/types/Product";
 import { getProductSkuSnapshotText } from "@/utils/product";
 
-defineOptions({ name: "ProductSkuSnapshotTags" });
+defineOptions({ name: "ProductSkuTags" });
 
 interface Props {
 	productName?: string | null;