add product sku

src/pages/product/ProductDataCharts.vue

@@ -49,6 +49,7 @@
 				<product-stock-health-table
 					v-entrance-transition="350"
 					:list="stockHealthList"
+					:sku-health-list="skuHealthList"
 					:loading="isLoading"
 				/>
 			</div>
@@ -58,6 +59,7 @@
 
 <script setup lang="ts">
 import GaoProductChartAPI from "@/api/GaoProductChartAPI";
+import GaoProductSkuChartAPI from "@/api/GaoProductSkuChartAPI";
 import ProductFulfillmentRankChart from "@/pages/product/component/ProductFulfillmentRankChart.vue";
 import ProductFulfillmentTrendChart from "@/pages/product/component/ProductFulfillmentTrendChart.vue";
 import ProductSalesRankChart from "@/pages/product/component/ProductSalesRankChart.vue";
@@ -70,7 +72,8 @@ import type {
 	GaoProductSalesDailyStatView,
 	GaoProductSalesRankView,
 	GaoProductStockHealthView,
-	GaoProductStockMovementDailyStatView
+	GaoProductStockMovementDailyStatView,
+	GaoProductSkuStockHealthView
 } from "@/types/GaoChart";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -100,6 +103,7 @@ const fulfillmentDailyList = ref<GaoProductFulfillmentDailyStatView[]>([]);
 const fulfillmentRankList = ref<GaoProductFulfillmentRankView[]>([]);
 const stockMovementList = ref<GaoProductStockMovementDailyStatView[]>([]);
 const stockHealthList = ref<GaoProductStockHealthView[]>([]);
+const skuHealthList = ref<GaoProductSkuStockHealthView[]>([]);
 const isLoading = ref(false);
 let requestId = 0;
 
@@ -111,11 +115,11 @@ const summaryList = computed<SummaryItem[]>(() => [
 	},
 	{
 		label: "直接销量",
-		value: formatQuantity(sumNumber(salesDailyList.value, item => item.directQuantity))
+		value: formatQuantity(sumNumber(salesDailyList.value, item => item.directBaseQuantity))
 	},
 	{
 		label: "套餐权益",
-		value: formatQuantity(sumNumber(salesDailyList.value, item => item.packageQuantity))
+		value: formatQuantity(sumNumber(salesDailyList.value, item => item.packageBaseQuantity))
 	},
 	{
 		label: "直接销售额",
@@ -123,7 +127,7 @@ const summaryList = computed<SummaryItem[]>(() => [
 	},
 	{
 		label: "低库存产品",
-		value: `${stockHealthList.value.filter(item => item.lowStock === 1).length} 个`
+		value: `${stockHealthList.value.filter(item => 0 < (item.lowStockSkuCount || 0)).length} 个`
 	}
 ]);
 
@@ -176,6 +180,17 @@ async function loadCharts(): Promise<void> {
 		fulfillmentRankList.value = fulfillmentRank || [];
 		stockMovementList.value = stockMovement || [];
 		stockHealthList.value = stockHealth || [];
+		skuHealthList.value = [];
+		if (stockHealthList.value.some(item => 0 < (item.lowStockSkuCount || 0))) {
+			try {
+				const skuHealth = await GaoProductSkuChartAPI.stockHealth({ storeId: storeId.value });
+				if (currentRequestId === requestId) {
+					skuHealthList.value = (skuHealth || []).filter(item => item.lowStock === 1);
+				}
+			} catch (error) {
+				Message.warning(getErrorMessage(error, "低库存规格明细加载失败"));
+			}
+		}
 	} catch (error) {
 		if (currentRequestId === requestId) {
 			Message.error(getErrorMessage(error, "产品图表加载失败"));
@@ -195,6 +210,7 @@ function clearData(): void {
 	fulfillmentRankList.value = [];
 	stockMovementList.value = [];
 	stockHealthList.value = [];
+	skuHealthList.value = [];
 }
 
 function buildDefaultDateRange(): [string, string] {

src/pages/product/ProductDetail.vue

@@ -23,59 +23,40 @@
 				<t-cell
 					v-if="product.stockEnabled && userStore.hasPermissions(permissionCodes.productStock.read)"
 					title="库存"
-					note="查看库存详情"
+					:note="product.skuList?.length === 1 ? '查看 SKU 库存详情' : '查看全部 SKU 库存'"
 					arrow
 					@click="viewStock"
 				/>
 			</t-cell-group>
-			<t-cell-group title="业务单位" theme="card" class="units" v-entrance-transition="210">
+			<t-cell-group title="SKU 列表" theme="card" class="units" v-entrance-transition="210">
 				<t-cell
-					v-for="unit in product.unitList || []"
-					:key="unit.id || unit.name"
+					v-for="sku in product.skuList || []"
+					:key="sku.id || sku.code"
 				>
 					<template #title>
 						<div class="title">
-							<h3 class="name" v-text="unit.name || '未命名单位'" />
-							<t-tag
-								v-if="!unit.isBase"
-								theme="default"
-								size="small"
-								:content="`${unit.baseQuantityPerUnit} ${getProductBaseUnitName(product)}`"
-							/>
+							<h3 class="name" v-text="getSkuTitle(sku)" />
+							<t-tag size="small" variant="light-outline" :theme="sku.status === 'ACTIVE' ? 'success' : 'warning'" :content="sku.status === 'ACTIVE' ? '启用' : '停用'" />
 						</div>
 					</template>
 					<template #note>
 						<span class="price">
-							<span class="qute red text-bold">￥</span>
-							<span
-								class="value text-bold red"
-								v-text="formatProductAmount(unit.salePrice)"
-							/>
+							<span class="value text-bold" v-text="sku.code || '无编码'" />
 						</span>
 					</template>
 					<template #description>
 						<div class="tags">
 							<t-tag
-								v-if="unit.isBase"
-								theme="warning"
-								variant="light-outline"
-								content="基础单位"
-							/>
-							<t-tag
-								v-if="unit.allowSale"
+								v-for="unit in sku.unitList || []"
+								:key="unit.id || unit.name"
 								theme="primary"
 								variant="light-outline"
-								content="可销售"
-							/>
-							<t-tag
-								v-if="unit.allowPurchase"
-								theme="primary"
-								variant="light-outline"
-								content="可采购"
+								:content="`${unit.name}${unit.isBase ? '（基础）' : ''}`"
 							/>
 						</div>
 					</template>
 				</t-cell>
+				<div v-if="!product.skuList?.length" class="empty" v-text="'暂无 SKU'" />
 			</t-cell-group>
 		</template>
 	</div>
@@ -95,11 +76,7 @@ import type { PhotoItem } from "@/types/Photo";
 import type { Product } from "@/types/Product";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
-import {
-	formatProductAmount,
-	getProductBaseUnitName,
-	getProductStatusText
-} from "@/utils/product";
+import { getProductStatusText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { Text } from "timi-web";
@@ -153,14 +130,22 @@ async function edit(): Promise<void> {
 
 async function viewStock(): Promise<void> {
 	if (product.value?.id) {
+		if (product.value.skuList?.length === 1 && product.value.skuList[0]?.id) {
+			await router.push({ name: "ProductStockDetail", params: { skuId: product.value.skuList[0].id }, query: { transitionDepth: String(getCurrentRouteDepth() + 1) } });
+			return;
+		}
 		await router.push({
-			name: "ProductStockDetail",
+			name: "ProductStockSkuList",
 			params: { productId: product.value.id },
 			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
 		});
 	}
 }
 
+function getSkuTitle(sku: NonNullable<Product["skuList"]>[number]): string {
+	return sku.specSummary || sku.name || "未命名 SKU";
+}
+
 function getCurrentRouteDepth(): number {
 	const transitionDepth = Array.isArray(route.query.transitionDepth)
 		? route.query.transitionDepth[0]

src/pages/product/ProductStockDetail.vue

@@ -1,9 +1,10 @@
 <template>
 	<div v-can="permissionCodes.productStock.read" class="product-stock-detail">
 		<t-loading v-if="isLoading" class="loading" size="32px" />
-		<template v-else-if="product && stock">
+		<template v-else-if="product && sku && stock">
 			<product-profile :product="product" v-entrance-transition>
 				<template #tags>
+					<t-tag :content="sku?.specSummary || sku?.name || '默认 SKU'" variant="light-outline" theme="primary" />
 					<t-tag :content="getStockStatusText(stock)" variant="light-outline" :theme="getStockTheme(stock)" />
 				</template>
 			</product-profile>
@@ -18,29 +19,29 @@
 								<span class="label">库存</span>
 								<div class="value">
 									<strong class="text" v-text="getProductQuantityText(stock.onHandQuantity)" />
-									<span class="unit" v-text="getProductBaseUnitName(product) || '基础单位'" />
+									<span class="unit" v-text="getProductBaseUnitName(sku) || '基础单位'" />
 								</div>
 							</div>
 							<div class="footer">
 								<div class="available">
 									<span class="label">可用</span>
 									<strong class="value" v-text="getProductQuantityText(stock.availableQuantity)" />
-									<span class="unit" v-text="getProductBaseUnitName(product) || '基础单位'" />
+									<span class="unit" v-text="getProductBaseUnitName(sku) || '基础单位'" />
 								</div>
 								<div class="reserved">
 									<span class="label">预占</span>
 									<strong class="value" v-text="getProductQuantityText(stock.reservedQuantity)" />
-									<span class="unit" v-text="getProductBaseUnitName(product) || '基础单位'" />
+									<span class="unit" v-text="getProductBaseUnitName(sku) || '基础单位'" />
 								</div>
 							</div>
 						</div>
 					</template>
 				</t-cell>
 				<t-cell v-if="0 < Number(stock.reservedQuantity || 0)" title="查看预占流水" arrow @click="openReservedRecordList" />
-				<t-cell title="查看该产品流水" arrow @click="openRecordList" />
+				<t-cell title="查看该产品 SKU 流水" arrow @click="openRecordList" />
 			</t-cell-group>
 			<card-container
-				v-if="canOperate && product.stockEnabled"
+				v-if="canOperate && sku?.status === 'ACTIVE' && sku.stockEnabled"
 				class="actions-wrap"
 				title="库存操作"
 				description="所有操作必须选择业务单位、上传照片并填写备注"
@@ -65,9 +66,10 @@
 		</template>
 		<t-empty v-else description="库存或产品不存在" />
 		<product-stock-operation-popup
-			v-if="product && stock"
+			v-if="product && sku && stock"
 			v-model:visible="operationVisible"
 			:product="product"
+			:sku="sku"
 			:stock="stock"
 			:operation="operationType"
 			@success="loadAll"
@@ -81,7 +83,7 @@ import ProductAPI from "@/api/ProductAPI";
 import ProductProfile from "@/pages/product/component/ProductProfile.vue";
 import ProductStockOperationPopup from "@/pages/product/ProductStockOperationPopup.vue";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { Product, ProductStock, StockOperationType } from "@/types/Product";
+import type { Product, ProductSku, ProductStock, StockOperationType } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { getProductBaseUnitName, getProductQuantityText } from "@/utils/product";
 import { Message } from "@/utils/message";
@@ -96,6 +98,7 @@ const router = useRouter();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const product = ref<Product>();
+const sku = ref<ProductSku>();
 const stock = ref<ProductStock>();
 const isLoading = ref(false);
 const operationVisible = ref(false);
@@ -109,36 +112,38 @@ const operationList: Array<{ text: string; icon: string; type: ManualStockOperat
 ];
 
 function getStockStatusText(item: ProductStock): string {
-	if (!item.product?.stockEnabled) {
+	if (!item.sku?.stockEnabled) {
 		return "不管理库存";
 	}
 	const available = Number(item.availableQuantity || 0);
-	const min = Number(item.product.minStockQuantity || 0);
+	const min = Number(item.sku.minStockQuantity || 0);
 	return 0 < min && available < min ? "库存不足" : "库存正常";
 }
 
 function getStockTheme(item: ProductStock): "danger" | "success" | "default" {
-	if (!item.product?.stockEnabled) {
+	if (!item.sku?.stockEnabled) {
 		return "default";
 	}
 	const available = Number(item.availableQuantity || 0);
-	const min = Number(item.product.minStockQuantity || 0);
+	const min = Number(item.sku.minStockQuantity || 0);
 	return 0 < min && available < min ? "danger" : "success";
 }
 
 async function loadAll(): Promise<void> {
-	const productId = String(route.params.productId || "");
-	if (!productId) {
+	const skuId = String(route.params.skuId || "");
+	if (!skuId) {
 		return;
 	}
 	isLoading.value = true;
 	try {
+		const skuResult = await ProductAPI.skuDetail(skuId);
 		const [productResult, stockResult] = await Promise.all([
-			ProductAPI.detail(productId),
-			ProductAPI.stockDetail(productId)
+			ProductAPI.detail(skuResult.productId || ""),
+			ProductAPI.stockDetail(skuId)
 		]);
 		product.value = productResult;
-		stock.value = { ...stockResult, product: productResult };
+		sku.value = skuResult;
+		stock.value = { ...stockResult, sku: skuResult };
 	} finally {
 		isLoading.value = false;
 	}

src/pages/product/ProductStockList.vue

@@ -10,6 +10,7 @@
 				placeholder="搜索产品名称或编码"
 			/>
 		</div>
+
 		<t-pull-down-refresh
 			class="list-wrap empty-cell-title-margin"
 			v-model="isRefreshing"
@@ -17,41 +18,37 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
-			<t-cell-group v-if="stockList.length" theme="card" class="list fix-last-cell-line">
-				<t-cell v-for="(item, index) in stockList" :key="item.productId || item.id" arrow hover class="item" v-entrance-transition="index * 30" @click="toDetail(item)">
+			<t-cell-group v-if="productList.length" theme="card" class="list fix-last-cell-line">
+				<t-cell
+					v-for="(item, index) in productList"
+					:key="item.productId"
+					arrow
+					hover
+					class="item"
+					v-entrance-transition="index * 30"
+					@click="toSkuList(item)"
+				>
 					<template #leftIcon>
-						<t-image
-							v-if="getProductPhotoURL(item.product!)"
-							:src="getProductPhotoURL(item.product!)"
-							:alt="item.product?.name || '产品图片'"
-							fit="cover"
-							class="avatar"
-						/>
-						<div
-							v-else
-							class="avatar fallback"
-							v-text="(item.product?.name || '产').slice(0, 1)"
-						/>
+						<div class="avatar fallback" v-text="(item.productName || '产').slice(0, 1)" />
 					</template>
 					<template #title>
 						<div class="title">
-							<strong v-text="item.product?.name || '未命名产品'" />
-							<t-tag
-								size="small"
-								variant="outline"
-								:content="item.product?.code || '无产品编码'"
-							/>
+							<strong v-text="item.productName || '未命名产品'" />
+							<t-tag size="small" variant="outline" :content="item.productCode || '无产品编码'" />
 						</div>
 					</template>
+					<template #note>
+						<span v-text="`${item.skuCount || 0} 个 SKU 明细`" />
+					</template>
 					<template #description>
 						<div class="stock">
 							<span class="on-hand">
 								<span>库存</span>
-								<strong v-text="getProductQuantityText(item.onHandQuantity)"/>
+								<strong v-text="getProductQuantityText(item.onHandQuantity)" />
 							</span>
 							<span class="available">
 								<span>可用</span>
-								<strong v-text="getProductQuantityText(item.availableQuantity)"/>
+								<strong v-text="getProductQuantityText(item.availableQuantity)" />
 							</span>
 							<span class="reserved">
 								<span>预占</span>
@@ -62,7 +59,7 @@
 				</t-cell>
 			</t-cell-group>
 			<div v-else class="center-tips" v-text="emptyText" />
-			<div v-if="stockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+			<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
 </template>
@@ -71,19 +68,20 @@
 import { useUserStore } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { ProductStock } from "@/types/Product";
+import type { ProductStockProduct } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
-import { getProductPhotoURL, getProductQuantityText } from "@/utils/product";
+import { getProductQuantityText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
 defineOptions({ name: "ProductStockList" });
 
 const router = useRouter();
+const route = useRoute();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const keyword = ref("");
-const stockList = ref<ProductStock[]>([]);
+const productList = ref<ProductStockProduct[]>([]);
 const pageIndex = ref(0);
 const total = ref(0);
 const isLoading = ref(false);
@@ -92,7 +90,11 @@ const isNoMore = ref(false);
 let keywordTimer: number | undefined;
 let requestToken = 0;
 
-const emptyText = computed(() => isLoading.value ? "正在加载库存" : keyword.value ? "未找到匹配产品" : "暂无启用库存管理的产品");
+const emptyText = computed(() => isLoading.value ? "正在加载产品" : keyword.value ? "未找到匹配产品" : "暂无启用库存管理的产品");
+
+function getCurrentRouteDepth(): number {
+	return Number(route.meta.depth ?? 0);
+}
 
 async function fetch(reset = false): Promise<void> {
 	if (!reset && (isLoading.value || isNoMore.value)) {
@@ -100,7 +102,7 @@ async function fetch(reset = false): Promise<void> {
 	}
 	if (reset) {
 		pageIndex.value = 0;
-		stockList.value = [];
+		productList.value = [];
 		total.value = 0;
 		isNoMore.value = false;
 	}
@@ -108,15 +110,19 @@ async function fetch(reset = false): Promise<void> {
 	isLoading.value = true;
 	try {
 		const pageSize = 15;
-		const result = await ProductAPI.stockList({ index: pageIndex.value, size: pageSize, keyword: keyword.value || undefined });
+		const result = await ProductAPI.stockProductList({
+			index: pageIndex.value,
+			size: pageSize,
+			keyword: keyword.value || undefined
+		});
 		if (token !== requestToken) {
 			return;
 		}
 		const list = result.list || [];
-		stockList.value = reset ? list : stockList.value.concat(list);
+		productList.value = reset ? list : productList.value.concat(list);
 		total.value = result.total || 0;
 		pageIndex.value += 1;
-		isNoMore.value = list.length < pageSize || stockList.value.length === total.value || total.value < stockList.value.length;
+		isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
 	} finally {
 		if (token === requestToken) {
 			isLoading.value = false;
@@ -128,7 +134,7 @@ async function refresh(): Promise<void> {
 	try {
 		await fetch(true);
 	} catch (error) {
-		Message.error(getErrorMessage(error, "库存列表加载失败"));
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
 	} finally {
 		isRefreshing.value = false;
 	}
@@ -138,14 +144,19 @@ async function loadMore(): Promise<void> {
 	try {
 		await fetch();
 	} catch (error) {
-		Message.error(getErrorMessage(error, "库存列表加载失败"));
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
 	}
 }
 
-async function toDetail(item: ProductStock): Promise<void> {
-	if (item.productId) {
-		await router.push(`/management/product-stocks/${item.productId}`);
+async function toSkuList(item: ProductStockProduct): Promise<void> {
+	if (!item.productId) {
+		return;
 	}
+	await router.push({
+		name: "ProductStockSkuList",
+		params: { productId: item.productId },
+		query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+	});
 }
 
 onMounted(async () => {
@@ -156,7 +167,7 @@ onMounted(async () => {
 	try {
 		await fetch(true);
 	} catch (error) {
-		Message.error(getErrorMessage(error, "库存列表加载失败"));
+		Message.error(getErrorMessage(error, "产品列表加载失败"));
 	}
 });
 
@@ -166,7 +177,7 @@ watch(keyword, () => {
 		try {
 			await fetch(true);
 		} catch (error) {
-			Message.error(getErrorMessage(error, "库存列表加载失败"));
+			Message.error(getErrorMessage(error, "产品列表加载失败"));
 		}
 	}, 300);
 });
@@ -212,12 +223,31 @@ onUnmounted(() => {
 					height: 3.5rem;
 				}
 
+				.fallback {
+					color: var(--td-brand-color);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background: var(--td-brand-color-1);
+					border-radius: .75rem;
+					font-size: 1.5rem;
+					font-weight: 700;
+				}
+
 				.title {
 					gap: .5rem;
+					min-width: 0;
 					flex: 1;
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
+
+					strong {
+						min-width: 0;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
 				}
 
 				.stock {

src/pages/product/ProductStockOperationPopup.vue

@@ -70,9 +70,9 @@ import ProductAPI from "@/api/ProductAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import type {
 	Product,
+	ProductSku,
 	ProductStock,
 	ProductStockChangeRequest,
-	ProductUnit,
 	StockOperationType
 } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
@@ -86,6 +86,7 @@ type PickerValue = string | number;
 
 interface Props {
 	product: Product;
+	sku: ProductSku;
 	stock?: ProductStock;
 	operation: ManualStockOperation;
 }
@@ -108,7 +109,7 @@ const unitPickerZIndex = 12001;
 const unitPickerOverlayZIndex = unitPickerZIndex - 1;
 
 const isInbound = computed(() => props.operation === "MANUAL_IN" || props.operation === "STOCKTAKE_GAIN");
-const selectableUnits = computed<ProductUnit[]>(() => (props.product.unitList || []).filter(unit => isInbound.value ? unit.allowPurchase : unit.allowSale));
+const selectableUnits = computed(() => (props.sku.unitList || []).filter(unit => isInbound.value ? unit.allowPurchase : unit.allowSale));
 const unitOptions = computed(() => [selectableUnits.value.map(unit => ({ label: unit.name || "未命名单位", value: unit.id || "" }))]);
 const selectedUnitName = computed(() => selectableUnits.value.find(unit => unit.id === selectedUnitId.value)?.name || "选择业务单位");
 const quickRemarkText = computed(() => props.operation === "MANUAL_IN" ? "正常入库" : props.operation === "MANUAL_OUT" ? "正常出库" : "");
@@ -148,7 +149,7 @@ function validate(): boolean {
 		Message.warning("数量必须是大于 0 的数字，最多三位小数");
 		return false;
 	}
-	if (!props.product.allowDecimalQuantity && !/^\d+$/.test(quantity.value)) {
+	if (!props.sku.allowDecimalQuantity && !/^\d+$/.test(quantity.value)) {
 		Message.warning("该产品不允许输入小数数量");
 		return false;
 	}
@@ -166,8 +167,8 @@ function validate(): boolean {
 function buildRequest(): ProductStockChangeRequest {
 	return {
 		requestNo: requestNo.value || (requestNo.value = createProductRequestNo()),
-		productId: props.product.id || "",
-		productUnitId: selectedUnitId.value,
+		skuId: props.sku.id || "",
+		skuUnitId: selectedUnitId.value,
 		quantity: quantity.value,
 		remark: remark.value.trim(),
 		attachmentList: photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: item.attachType || "PHOTO" }] : [])

src/pages/product/ProductStockRecordDetail.vue

@@ -1,17 +1,16 @@
 <template>
 	<div v-can="permissionCodes.productStock.read" class="product-stock-record-detail">
 		<t-loading v-if="isLoading" class="loading" size="32px" />
-		<template v-else-if="record && product">
-			<product-profile :product="product" v-entrance-transition>
-				<template #tags>
-					<t-tag
-						size="small"
-						variant="light-outline"
-						:theme="getOperationTheme(record.onHandDelta)"
-						:content="getStockOperationText(record.operationType)"
-					/>
-				</template>
-			</product-profile>
+		<template v-else-if="record">
+			<section class="snapshot-head" v-entrance-transition>
+				<div class="eyebrow">库存 SKU 快照</div>
+				<h2 v-text="record.productNameSnapshot || '未命名产品'" />
+				<div class="sku" v-text="record.skuNameSnapshot || record.specSummarySnapshot || '默认 SKU'" />
+				<div class="meta">
+					<span v-text="record.skuCodeSnapshot || '无 SKU 编码'" />
+					<t-tag size="small" variant="light-outline" :theme="getOperationTheme(record.onHandDelta)" :content="getStockOperationText(record.operationType)" />
+				</div>
+			</section>
 			<card-container description="库存变动信息">
 				<div class="data">
 					<div class="card">
@@ -39,7 +38,7 @@
 							<span v-text="getProductQuantityText(record.onHandBefore)" />
 							<t-icon name="arrow-right" />
 							<span :class="getDeltaClass(record.onHandDelta)" v-text="getProductQuantityText(record.onHandAfter)" />
-							<span class="unit" v-text="getProductBaseUnitName(product) || '基础单位'" />
+							<span class="unit">基础单位</span>
 						</span>
 					</template>
 				</t-cell>
@@ -49,7 +48,7 @@
 							<span v-text="getProductQuantityText(record.reservedBefore)" />
 							<t-icon name="arrow-right" />
 							<span :class="getDeltaClass(record.reservedDelta)" v-text="getProductQuantityText(record.reservedAfter)" />
-							<span class="unit" v-text="getProductBaseUnitName(product) || '基础单位'" />
+							<span class="unit">基础单位</span>
 						</span>
 					</template>
 				</t-cell>
@@ -133,13 +132,12 @@ import { PassTimeLabel } from "timi-web";
 import { useUserStore, type Attachment } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
-import ProductProfile from "@/pages/product/component/ProductProfile.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { PhotoItem } from "@/types/Photo";
-import type { Product, StockBizType, StockRecord } from "@/types/Product";
+import type { StockBizType, StockRecord } from "@/types/Product";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
-import { createProductRequestNo, getProductBaseUnitName, getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { createProductRequestNo, getProductQuantityText, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { uploadPhotoList } from "@/utils/photo";
@@ -151,7 +149,6 @@ const navBarStore = useNavBarStore();
 const router = useRouter();
 const userStore = useUserStore();
 const record = ref<StockRecord>();
-const product = ref<Product>();
 const isLoading = ref(false);
 const isOperating = ref(false);
 const revokeVisible = ref(false);
@@ -293,9 +290,6 @@ async function loadData(): Promise<void> {
 	try {
 		const result = await ProductAPI.recordDetail(id);
 		record.value = result;
-		if (result.productId) {
-			product.value = await ProductAPI.detail(result.productId);
-		}
 	} catch (error) {
 		Message.error(getErrorMessage(error, "库存流水加载失败"));
 	} finally {
@@ -328,6 +322,42 @@ onUnmounted(() => navBarStore.clearRight());
 		margin: 3rem auto;
 	}
 
+	.snapshot-head {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+
+		.eyebrow {
+			color: var(--td-brand-color);
+			font-size: .75rem;
+			font-weight: 700;
+		}
+
+		h2 {
+			margin: .5rem 0 .25rem;
+			font-size: 1.25rem;
+		}
+
+		.sku {
+			color: var(--td-text-color-secondary);
+		}
+
+		.meta {
+			gap: .5rem;
+			display: flex;
+			margin-top: .75rem;
+			align-items: center;
+			justify-content: space-between;
+
+			span {
+				color: var(--td-text-color-secondary);
+				font-size: .75rem;
+			}
+		}
+	}
+
 	.positive {
 		color: var(--td-success-color);
 	}

src/pages/product/ProductStockRecordList.vue

@@ -54,7 +54,7 @@
 				    </template>
 					<template #description>
 						<div class="description">
-							<span v-text="record.productNameSnapshot || '未命名产品'" />
+							<span v-text="getRecordTitle(record)" />
 							<pass-time-label :timestamp="record.occurredAt" underline />
 						</div>
 					</template>
@@ -157,6 +157,11 @@ function getStockQuantityText(record: StockRecord): string {
 	return `${getProductQuantityText(record.quantity)}${unitText}`;
 }
 
+function getRecordTitle(record: StockRecord): string {
+	const skuText = record.skuNameSnapshot || record.specSummarySnapshot;
+	return `${record.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}${record.unitSnapshot ? ` / ${record.unitSnapshot}` : ""}`;
+}
+
 function getDeltaText(value?: number | string): string {
   const amount = Number(value || 0);
   const text = String(value || "0").replace(/^-/, "");

src/pages/product/ProductStockSkuList.vue

@@ -0,0 +1,357 @@
+<template>
+	<div v-can="permissionCodes.productStock.read" class="product-stock-sku-list">
+		<div class="product-context">
+			<strong v-text="product?.name || '产品 SKU'" />
+			<span v-text="product?.code || productId" />
+		</div>
+
+		<div class="search bg-white">
+			<t-input
+				v-model="keyword"
+				class="keyword"
+				type="search"
+				borderless
+				clearable
+				placeholder="搜索 SKU 名称、编码或规格"
+			/>
+		</div>
+
+		<t-pull-down-refresh
+			class="list-wrap empty-cell-title-margin"
+			v-model="isRefreshing"
+			:refresh-timeout="30000"
+			@refresh="refresh"
+			@scrolltolower="loadMore"
+		>
+			<t-cell-group v-if="skuStockList.length" theme="card" class="list fix-last-cell-line">
+				<t-cell
+					v-for="(item, index) in skuStockList"
+					:key="item.skuId || item.id"
+					arrow
+					hover
+					class="item"
+					v-entrance-transition="index * 30"
+					@click="toDetail(item)"
+				>
+					<template #leftIcon>
+						<div class="avatar fallback" v-text="(item.sku?.name || 'S').slice(0, 1)" />
+					</template>
+					<template #title>
+						<div class="title">
+							<strong v-text="item.sku?.name || '未命名 SKU 明细'" />
+							<t-tag size="small" variant="outline" :content="item.sku?.code || '无 SKU 编码'" />
+						</div>
+					</template>
+					<template #note>
+						<span class="sku-spec" v-text="getSkuSpecText(item)" />
+					</template>
+					<template #description>
+						<div class="stock">
+							<span class="on-hand">
+								<span>库存</span>
+								<strong v-text="getProductQuantityText(item.onHandQuantity)" />
+							</span>
+							<span class="available">
+								<span>可用</span>
+								<strong v-text="getProductQuantityText(item.availableQuantity)" />
+							</span>
+							<span class="reserved">
+								<span>预占</span>
+								<strong v-text="getProductQuantityText(item.reservedQuantity)" />
+							</span>
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="emptyText" />
+			<div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+		</t-pull-down-refresh>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "timi-web-api";
+import ProductAPI from "@/api/ProductAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { Product, ProductStock } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { getProductQuantityText, getProductSkuSpecEntries } from "@/utils/product";
+import { Message } from "@/utils/message";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({ name: "ProductStockSkuList" });
+
+const router = useRouter();
+const route = useRoute();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const keyword = ref("");
+const product = ref<Product>();
+const skuStockList = ref<ProductStock[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const isLoading = ref(false);
+const isRefreshing = ref(false);
+const isNoMore = ref(false);
+const productId = computed(() => {
+	const value = route.params.productId;
+	return Array.isArray(value) ? String(value[0] || "") : String(value || "");
+});
+const emptyText = computed(() => {
+	if (isLoading.value) {
+		return "正在加载 SKU";
+	}
+	if (keyword.value) {
+		return "未找到匹配 SKU";
+	}
+	return "该产品暂无启用库存管理的 SKU";
+});
+let keywordTimer: number | undefined;
+let requestToken = 0;
+let suppressKeywordFetch = false;
+
+function getSkuSpecText(item: ProductStock): string {
+	const sku = item.sku;
+	if (!sku) {
+		return "未配置规格";
+	}
+	const entries = getProductSkuSpecEntries(sku, product.value?.specList || []);
+	return entries.length ? entries.map(entry => `${entry.specName}：${entry.valueName}`).join(" · ") : sku.specSummary || "无多规格";
+}
+
+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
+}
+
+async function fetch(reset = false): Promise<void> {
+	if (!reset && (isLoading.value || isNoMore.value)) {
+		return;
+	}
+	if (reset) {
+		pageIndex.value = 0;
+		skuStockList.value = [];
+		total.value = 0;
+		isNoMore.value = false;
+	}
+	const token = ++requestToken;
+	isLoading.value = true;
+	try {
+		const pageSize = 15;
+		const result = await ProductAPI.stockList({
+			index: pageIndex.value,
+			size: pageSize,
+			productId: productId.value,
+			keyword: keyword.value || undefined
+		});
+		if (token !== requestToken) {
+			return;
+		}
+		const list = result.list || [];
+		skuStockList.value = reset ? list : skuStockList.value.concat(list);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		isNoMore.value = list.length < pageSize || skuStockList.value.length === total.value || total.value < skuStockList.value.length;
+	} finally {
+		if (token === requestToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+async function loadProduct(): Promise<void> {
+	product.value = productId.value ? await ProductAPI.detail(productId.value) : undefined;
+}
+
+async function loadCurrent(): Promise<void> {
+	if (!productId.value) {
+		return;
+	}
+	try {
+		await Promise.all([loadProduct(), fetch(true)]);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "SKU 列表加载失败"));
+	}
+}
+
+async function refresh(): Promise<void> {
+	try {
+		await Promise.all([loadProduct(), fetch(true)]);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "SKU 列表加载失败"));
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+async function loadMore(): Promise<void> {
+	try {
+		await fetch();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "SKU 列表加载失败"));
+	}
+}
+
+async function toDetail(item: ProductStock): Promise<void> {
+	if (!item.skuId) {
+		return;
+	}
+	await router.push({
+		name: "ProductStockDetail",
+		params: { skuId: item.skuId },
+		query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+	});
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (!userStore.hasPermissions(permissionCodes.productStock.read)) {
+		return;
+	}
+	await loadCurrent();
+});
+
+watch(productId, async () => {
+	suppressKeywordFetch = true;
+	keyword.value = "";
+	requestToken += 1;
+	await loadCurrent();
+	suppressKeywordFetch = false;
+});
+
+watch(keyword, () => {
+	if (suppressKeywordFetch) {
+		return;
+	}
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		try {
+			await fetch(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "SKU 列表加载失败"));
+		}
+	}, 300);
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	window.clearTimeout(keywordTimer);
+	requestToken += 1;
+});
+</script>
+
+<style scoped lang="less">
+.product-stock-sku-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.product-context {
+		gap: .25rem;
+		display: flex;
+		padding: .75rem 1rem;
+		background: var(--td-bg-color-container);
+		flex-direction: column;
+
+		strong,
+		span {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		span {
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+		}
+	}
+
+	.search {
+		top: var(--app-nav-height);
+		z-index: 10;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		.keyword {
+			border: 1px solid var(--td-component-border);
+			padding: .5rem 1rem;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+	}
+
+	.list-wrap {
+		min-height: 70vh;
+
+		.list {
+			padding-top: .75rem;
+
+			.item {
+				padding: 10px;
+
+				.avatar {
+					width: 3.5rem;
+					height: 3.5rem;
+				}
+
+				.fallback {
+					color: var(--td-brand-color);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					background: var(--td-brand-color-1);
+					border-radius: .75rem;
+					font-size: 1.5rem;
+					font-weight: 700;
+				}
+
+				.title {
+					gap: .5rem;
+					min-width: 0;
+					flex: 1;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					strong {
+						min-width: 0;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+				}
+
+				.sku-spec {
+					color: var(--td-text-color-secondary);
+				}
+
+				.stock {
+					gap: .5rem;
+					display: flex;
+					margin-top: .5rem;
+					flex-wrap: wrap;
+
+					strong {
+						display: inline-block;
+						margin-left: .25rem;
+					}
+				}
+
+				.reserved {
+					color: var(--td-warning-color);
+				}
+
+				.available {
+					color: var(--td-success-color);
+				}
+			}
+		}
+	}
+}
+</style>

src/pages/product/component/ProductFulfillmentRankChart.vue

@@ -1,7 +1,7 @@
 <template>
 	<gao-chart-card
 		title="履约进度排行"
-		caption="购买数量的当前履约快照"
+		caption="基础单位购买数量的当前履约快照"
 		:option="chartOption"
 		:loading="loading"
 		:has-data="list.length > 0"
@@ -33,19 +33,19 @@ const chartOption = computed<EChartsOption>(() => {
 				name: "待履约",
 				type: "bar",
 				stack: "progress",
-				data: list.map(item => getNumber(item.reservedQuantity))
+				data: list.map(item => getNumber(item.reservedBaseQuantity))
 			},
 			{
 				name: "已履约",
 				type: "bar",
 				stack: "progress",
-				data: list.map(item => getNumber(item.fulfilledQuantity))
+				data: list.map(item => getNumber(item.fulfilledBaseQuantity))
 			},
 			{
 				name: "可履约",
 				type: "bar",
 				stack: "progress",
-				data: list.map(item => getNumber(item.availableQuantity))
+				data: list.map(item => getNumber(item.availableBaseQuantity))
 			}
 		]
 	};

src/pages/product/component/ProductFulfillmentTrendChart.vue

@@ -1,7 +1,7 @@
 <template>
 	<gao-chart-card
 		title="每日履约趋势"
-		caption="冲正数量允许为负值"
+		caption="基础单位，冲正数量允许为负值"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
@@ -41,16 +41,16 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "直接履约",
 				type: "bar",
 				stack: "fulfillment",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directQuantity))
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
 			},
 			{
 				name: "套餐履约",
 				type: "bar",
 				stack: "fulfillment",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageQuantity))
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageBaseQuantity))
 			},
 			{
-				name: "基础单位变化",
+				name: "履约基础单位",
 				type: "line",
 				smooth: true,
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.baseQuantity))

src/pages/product/component/ProductSalesRankChart.vue

@@ -1,7 +1,7 @@
 <template>
 	<gao-chart-card
 		title="产品销售排行"
-		caption="按销量取前 10"
+		caption="按基础单位销量取前 10"
 		:option="chartOption"
 		:loading="loading"
 		:has-data="list.length > 0"
@@ -33,13 +33,13 @@ const chartOption = computed<EChartsOption>(() => {
 				name: "直接销量",
 				type: "bar",
 				stack: "quantity",
-				data: list.map(item => getNumber(item.directQuantity))
+				data: list.map(item => getNumber(item.directBaseQuantity))
 			},
 			{
 				name: "套餐权益",
 				type: "bar",
 				stack: "quantity",
-				data: list.map(item => getNumber(item.packageQuantity))
+				data: list.map(item => getNumber(item.packageBaseQuantity))
 			}
 		]
 	};

src/pages/product/component/ProductSalesTrendChart.vue

@@ -1,7 +1,7 @@
 <template>
 	<gao-chart-card
 		title="产品销售趋势"
-		caption="直接产品与套餐权益分开展示"
+			caption="基础单位，直接产品与套餐权益分开展示"
 		:date-text-list="dateTextList"
 		:option="buildOption"
 		:loading="loading"
@@ -41,13 +41,13 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "直接销量",
 				type: "bar",
 				stack: "quantity",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directQuantity))
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
 			},
 			{
 				name: "套餐权益",
 				type: "bar",
 				stack: "quantity",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageQuantity))
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageBaseQuantity))
 			},
 			{
 				name: "订单数",

src/pages/product/component/ProductSkuEditor.vue

@@ -0,0 +1,415 @@
+<template>
+	<t-swipe-cell class="sku-cell">
+		<t-cell role="button" tabindex="0" arrow @click="openEditor">
+			<template #title>
+				<div class="title">
+					<span class="code gray" v-text="sku.code" />
+					<strong class="clip-text" v-text="skuTitle" />
+					<t-tag v-if="sku.id" size="small" variant="light-outline" :content="sku.status === 'ACTIVE' ? '已建立' : '已停用'" />
+				</div>
+			</template>
+			<template #note>
+				<t-tag
+					size="small"
+					variant="light-outline"
+					:theme="sku.status === 'ACTIVE' ? 'success' : 'warning'"
+					:content="sku.status === 'ACTIVE' ? '启用' : '停用'"
+				/>
+			</template>
+			<template #description>
+				<div class="tags">
+					<t-tag
+						v-for="entry in skuSpecEntries"
+						:key="`${entry.specName}-${entry.valueName}`"
+						size="small"
+						:content="entry.valueName"
+					/>
+					<t-tag
+						v-if="sku.stockEnabled"
+						theme="warning"
+						size="small"
+						content="库存"
+					/>
+					<t-tag
+						v-for="unit in sku.unitList"
+						:key="unit.clientKey"
+						class="description-tag"
+						size="small"
+						:content="unit.name || '未命名单位'"
+					/>
+				</div>
+			</template>
+		</t-cell>
+		<template #right>
+			<t-button class="delete-action" theme="danger" @click.stop="requestRemove">
+				删除
+			</t-button>
+		</template>
+	</t-swipe-cell>
+
+	<bottom-popup
+		v-model="editorVisible"
+		title="配置 SKU 明细"
+		height="min(90vh, 52rem)"
+		:left-button-text="sku.id ? '关闭' : '取消'"
+		right-button-text="完成"
+		:z-index="skuEditorZIndex"
+		:overlay-props="{ zIndex: skuEditorZIndex - 1 }"
+		@left-button-click="closeEditor"
+		@right-button-click="closeEditor"
+	>
+		<div class="sku-popup">
+			<div class="sku-popup-header">
+				<div class="sku-heading">
+					<span class="sku-index" v-text="String(props.skuIndex + 1).padStart(2, '0')" />
+					<strong v-text="skuTitle" />
+				</div>
+			</div>
+
+			<div class="sku-spec-panel">
+				<div class="section-title">
+					<strong>销售规格</strong>
+					<span v-if="sku.specSummary" v-text="`摘要：${sku.specSummary}`" />
+				</div>
+				<div v-if="skuSpecEntries.length" class="sku-spec-list">
+					<div v-for="entry in skuSpecEntries" :key="`${entry.specName}-${entry.valueName}`" class="sku-spec-item">
+						<span class="spec-name" v-text="entry.specName" />
+						<strong v-text="entry.valueName" />
+					</div>
+				</div>
+				<div v-else class="sku-spec-empty" v-text="props.specList.length ? '请重新生成 SKU 明细以匹配规格项和规格值' : '无多规格产品，使用默认 SKU'" />
+			</div>
+
+			<t-form class="sku-form" label-align="left" label-width="5rem">
+				<t-form-item label="SKU 编码" required-mark help="门店内唯一；已有 SKU 修改失败时请保留原编码">
+					<t-input v-model.trim="sku.code" borderless maxlength="64" placeholder="如 TSHIRT-RED-M" />
+				</t-form-item>
+				<t-form-item label="明细名称" required-mark>
+					<t-input v-model.trim="sku.name" borderless maxlength="128" placeholder="如 黑色运动鞋；男；36" />
+				</t-form-item>
+				<t-form-item label="SKU 条码">
+					<t-input v-model.trim="sku.barcode" borderless maxlength="64" placeholder="选填" />
+				</t-form-item>
+				<div class="section-title setting-title">
+					<strong>库存设置</strong>
+					<span>每条 SKU 明细独立生效</span>
+				</div>
+				<t-form-item label="库存管理" content-align="right">
+					<t-switch v-model="sku.stockEnabled" size="small" :disabled="props.productType === 'SERVICE'" />
+				</t-form-item>
+				<t-form-item label="允许小数" content-align="right">
+					<t-switch v-model="sku.allowDecimalQuantity" size="small" />
+				</t-form-item>
+				<t-form-item v-if="sku.stockEnabled" label="最低库存" help="基础单位数量，最多三位小数">
+					<t-input v-model.trim="sku.minStockQuantityText" type="number" align="right" borderless placeholder="0" />
+				</t-form-item>
+				<t-form-item label="明细状态" content-align="right">
+					<t-switch :model-value="sku.status === 'ACTIVE'" size="small" @change="setSkuStatus" />
+				</t-form-item>
+				<t-form-item label="备注">
+					<t-input v-model.trim="sku.remark" borderless maxlength="255" placeholder="选填" />
+				</t-form-item>
+			</t-form>
+
+			<photo-scroller
+				:model-value="photoUrlList"
+				v-model:photo-items="sku.photoItemList"
+				title="SKU 图片（选填）"
+				:edit-mode="true"
+				:upload="uploadPhotoList"
+			/>
+
+			<div class="unit-section">
+				<div class="unit-heading">
+					<strong>销售单位</strong>
+					<span>采购、销售和库存操作共用</span>
+				</div>
+				<div class="unit-summary-list">
+					<div v-for="unit in sku.unitList" :key="unit.clientKey" class="unit-summary">
+						<strong v-text="unit.name || '未命名单位'" />
+						<span v-text="getUnitSummary(unit)" />
+					</div>
+				</div>
+				<t-button class="unit-button" variant="dashed" size="small" content="配置销售单位" @click="requestConfigureUnits" />
+			</div>
+		</div>
+	</bottom-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import type { ProductType } from "@/types/Product";
+import type { ProductSkuForm, ProductSpecForm, ProductSkuUnitForm } from "@/types/ProductEditor";
+import PhotoScroller from "@/components/PhotoScroller.vue";
+import { getProductSkuSpecEntries } from "@/utils/product";
+import { uploadPhotoList } from "@/utils/photo";
+
+defineOptions({ name: "ProductSkuEditor" });
+
+const props = defineProps<{
+	productType: ProductType;
+	skuIndex: number;
+	specList: ProductSpecForm[];
+}>();
+
+const sku = defineModel<ProductSkuForm>("sku", { required: true });
+const emit = defineEmits<{
+	configureUnits: [];
+	remove: [];
+}>();
+
+const editorVisible = ref(false);
+const skuEditorZIndex = 12000;
+const photoUrlList = computed(() => sku.value.photoItemList.map(item => item.url));
+const skuSpecEntries = computed(() => getProductSkuSpecEntries(sku.value, props.specList));
+const skuTitle = computed(() => props.specList.length ? `SKU 明细 ${props.skuIndex + 1}` : "默认 SKU");
+
+function openEditor(): void {
+	editorVisible.value = true;
+}
+
+function closeEditor(): void {
+	editorVisible.value = false;
+}
+
+function requestRemove(): void {
+	editorVisible.value = false;
+	emit("remove");
+}
+
+function requestConfigureUnits(): void {
+	emit("configureUnits");
+}
+
+function setSkuStatus(value: boolean | string | number): void {
+	const active = value === true || value === "true" || value === 1 || value === "1";
+	sku.value.status = active ? "ACTIVE" : "INACTIVE";
+}
+
+function getUnitSummary(unit: ProductSkuUnitForm): string {
+	const quantityText = unit.isBase ? "基础单位" : `1 ${unit.name || "单位"} = ${unit.baseQuantityPerUnit || "?"} 基础单位`;
+	const priceText = unit.salePriceText ? `￥${unit.salePriceText}` : "未定价";
+	const saleText = unit.allowSale ? "可销售" : "停售";
+	const purchaseText = unit.allowPurchase ? "可采购" : "禁采购";
+	return `${quantityText} · ${priceText} · ${saleText} · ${purchaseText}`;
+}
+</script>
+
+<style scoped lang="less">
+.sku-cell {
+
+	.title {
+
+	}
+
+	.cell-title {
+		gap: .5rem;
+		min-width: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		strong {
+			min-width: 0;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.description-tags {
+		gap: .375rem;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.description-tag {
+		max-width: 100%;
+	}
+
+	.delete-action {
+		width: 4.5rem;
+		height: 100%;
+		border-radius: 0;
+	}
+}
+
+.sku-popup {
+	max-height: 100%;
+	padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
+	overflow-y: auto;
+
+	.sku-popup-header {
+		gap: .5rem;
+		display: flex;
+		padding: 0 1rem .75rem;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.sku-heading {
+		gap: .5rem;
+		min-width: 0;
+		display: flex;
+		align-items: center;
+
+		.sku-index {
+			width: 1.75rem;
+			height: 1.75rem;
+			color: var(--td-brand-color);
+			flex: none;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: var(--td-brand-color-1);
+			border-radius: .625rem;
+			font-size: .6875rem;
+			font-weight: 700;
+		}
+	}
+
+	.sku-spec-panel {
+		margin: 0 .75rem .75rem;
+		padding: .75rem;
+		background: var(--td-bg-color-secondarycontainer);
+		border-radius: .875rem;
+	}
+
+	.section-title {
+		gap: .5rem;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+
+		span {
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.sku-spec-list {
+		gap: .5rem;
+		display: grid;
+		margin-top: .625rem;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.sku-spec-item {
+		gap: .375rem;
+		min-width: 0;
+		display: flex;
+		padding: .5rem .625rem;
+		align-items: baseline;
+		background: var(--td-bg-color-container);
+		border-radius: .625rem;
+
+		.spec-name {
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+			flex: none;
+		}
+
+		strong {
+			min-width: 0;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.sku-spec-empty {
+		margin-top: .5rem;
+		color: var(--td-text-color-secondary);
+		font-size: .75rem;
+	}
+
+	.sku-form {
+		margin: 0 .75rem;
+
+		.setting-title {
+			margin-top: .5rem;
+			padding: .75rem 0 .25rem;
+			border-top: 1px solid var(--td-component-border);
+		}
+	}
+
+	:deep(.t-form-item) {
+		padding-right: 0;
+		padding-left: 0;
+	}
+
+	:deep(.photo-scroller) {
+		margin: .5rem .75rem 0;
+	}
+
+	.unit-section {
+		margin-top: .75rem;
+		border-top: 1px solid var(--td-component-border);
+	}
+
+	.unit-heading {
+		gap: .5rem;
+		display: flex;
+		padding: .75rem 1rem .5rem;
+		align-items: baseline;
+		justify-content: space-between;
+
+		span {
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+			text-align: right;
+		}
+	}
+
+	.unit-summary-list {
+		gap: .5rem;
+		display: flex;
+		padding: 0 1rem .5rem;
+		flex-direction: column;
+	}
+
+	.unit-summary {
+		gap: .5rem;
+		min-width: 0;
+		display: flex;
+		padding: .625rem .75rem;
+		align-items: center;
+		background: var(--td-bg-color-secondarycontainer);
+		border-radius: .75rem;
+		justify-content: space-between;
+
+		strong {
+			max-width: 5rem;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		span {
+			min-width: 0;
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+			text-align: right;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.unit-button {
+		margin: 0 1rem .75rem;
+	}
+}
+
+:global(html.theme-dark) {
+	.sku-popup {
+		.sku-spec-panel,
+		.unit-summary {
+			background: rgba(148, 163, 184, .12);
+		}
+	}
+}
+</style>

src/pages/product/component/ProductSkuUnitBatchEditor.vue

@@ -0,0 +1,198 @@
+<template>
+	<bottom-popup
+		v-model="visible"
+		title="统一配置 SKU 单位"
+		height="min(88vh, 48rem)"
+		left-button-text="关闭"
+		right-button-text="应用到全部"
+		:z-index="batchEditorZIndex"
+		:overlay-props="{ zIndex: batchEditorZIndex - 1 }"
+		@left-button-click="close"
+		@right-button-click="applyUnits"
+	>
+		<div class="batch-editor">
+			<div class="editor-context">
+				<strong>批量配置销售单位</strong>
+				<span v-text="`以下单位将应用到全部 ${props.skuCount} 个 SKU 明细`" />
+			</div>
+
+			<div class="unit-list">
+				<div v-for="(unit, unitIndex) in unitList" :key="unit.clientKey" class="unit-card">
+					<div class="unit-card-header">
+						<strong v-text="`单位 ${unitIndex + 1}`" />
+						<t-button v-if="1 < unitList.length" theme="danger" variant="text" size="extra-small" content="删除" @click="removeUnit(unitIndex)" />
+					</div>
+					<t-form class="unit-form" label-align="left" label-width="6rem">
+						<t-form-item label="单位名称" required-mark>
+							<t-input v-model.trim="unit.name" borderless maxlength="32" placeholder="如 件、盒、箱" />
+						</t-form-item>
+						<t-form-item label="基础单位" content-align="right">
+							<t-switch v-model="unit.isBase" size="small" :disabled="unitList.length === 1" @change="setBaseUnit(unitIndex)" />
+						</t-form-item>
+						<t-form-item label="换算数量" help="1 个当前单位对应的基础单位数量" required-mark>
+							<t-input v-model.trim="unit.baseQuantityPerUnit" type="number" align="right" borderless :disabled="unit.isBase" placeholder="1" />
+						</t-form-item>
+						<t-form-item label="售价（元）">
+							<t-input v-model.trim="unit.salePriceText" type="number" align="right" borderless placeholder="选填" />
+						</t-form-item>
+						<t-form-item label="允许采购" content-align="right">
+							<t-switch v-model="unit.allowPurchase" size="small" :disabled="props.productType === 'SERVICE'" />
+						</t-form-item>
+						<t-form-item label="允许销售" content-align="right">
+							<t-switch v-model="unit.allowSale" size="small" />
+						</t-form-item>
+					</t-form>
+				</div>
+				<t-button class="add-button" variant="dashed" size="small" content="添加销售单位" @click="addUnit" />
+			</div>
+		</div>
+	</bottom-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import type { ProductType } from "@/types/Product";
+import type { ProductSkuUnitForm } from "@/types/ProductEditor";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "ProductSkuUnitBatchEditor" });
+
+const props = defineProps<{
+	modelValue: boolean;
+	productType: ProductType;
+	skuCount: number;
+}>();
+
+const unitList = defineModel<ProductSkuUnitForm[]>("unitList", { required: true });
+const emit = defineEmits<{
+	"update:modelValue": [value: boolean];
+	apply: [];
+	close: [];
+}>();
+
+const visible = computed({
+	get: () => props.modelValue,
+	set: value => handleVisibleChange(value)
+});
+const batchEditorZIndex = 12000;
+
+function handleVisibleChange(value: boolean): void {
+	emit("update:modelValue", value);
+	if (!value) {
+		emit("close");
+	}
+}
+
+function close(): void {
+	visible.value = false;
+}
+
+function applyUnits(): void {
+	if (!unitList.value.length) {
+		Message.warning("至少需要配置一个销售单位");
+		return;
+	}
+	emit("apply");
+	close();
+}
+
+function addUnit(): void {
+	unitList.value.push({
+		clientKey: window.crypto.randomUUID(),
+		name: unitList.value[0]?.name || "件",
+		baseQuantityPerUnit: "",
+		salePriceText: "",
+		isBase: false,
+		allowPurchase: props.productType !== "SERVICE",
+		allowSale: true,
+		sort: unitList.value.length
+	});
+}
+
+function removeUnit(index: number): void {
+	if (unitList.value.length < 2) {
+		Message.warning("每个 SKU 至少需要一个单位");
+		return;
+	}
+	const wasBase = unitList.value[index]?.isBase;
+	unitList.value.splice(index, 1);
+	if (wasBase) {
+		setBaseUnit(0);
+	}
+}
+
+function setBaseUnit(index: number): void {
+	unitList.value.forEach((unit, unitIndex) => { unit.isBase = unitIndex === index; });
+	const unit = unitList.value[index];
+	if (unit) {
+		unit.baseQuantityPerUnit = "1";
+	}
+}
+</script>
+
+<style scoped lang="less">
+.batch-editor {
+	max-height: 100%;
+	overflow-y: auto;
+	padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
+
+	.editor-context {
+		gap: .25rem;
+		display: flex;
+		margin: 0 1rem .75rem;
+		padding: .75rem;
+		background: var(--td-bg-color-secondarycontainer);
+		border-radius: .875rem;
+		flex-direction: column;
+
+		span {
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+		}
+	}
+
+	.unit-list {
+		gap: .75rem;
+		display: flex;
+		padding: 0 1rem 1rem;
+		flex-direction: column;
+	}
+
+	.unit-card {
+		border: 1px solid var(--td-component-border);
+		padding: .5rem 0;
+		border-radius: .75rem;
+	}
+
+	.unit-card-header {
+		gap: .5rem;
+		display: flex;
+		padding: 0 .75rem .5rem;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.unit-form {
+		margin: 0 .75rem;
+
+		:deep(.t-form-item) {
+			padding-right: 0;
+			padding-left: 0;
+		}
+	}
+
+	.add-button {
+		align-self: flex-start;
+	}
+}
+
+:global(html.theme-dark) .batch-editor {
+	.editor-context {
+		background: rgba(148, 163, 184, .12);
+	}
+
+	.unit-card {
+		border-color: rgba(148, 163, 184, .3);
+	}
+}
+</style>

src/pages/product/component/ProductSkuUnitEditor.vue

@@ -0,0 +1,252 @@
+<template>
+	<bottom-popup
+		v-model="visible"
+		title="配置 SKU 单位"
+		height="min(88vh, 48rem)"
+		left-button-text="关闭"
+		right-button-text="完成"
+		:z-index="unitEditorZIndex"
+		:overlay-props="{ zIndex: unitEditorZIndex - 1 }"
+		@left-button-click="close"
+		@right-button-click="close"
+	>
+		<div v-if="sku" class="unit-editor">
+			<div class="editor-context">
+				<span class="context-label">当前 SKU 明细</span>
+				<strong class="context-title" v-text="sku.name || sku.specSummary || '默认 SKU'" />
+				<div v-if="skuSpecEntries.length" class="context-spec-list">
+					<div v-for="entry in skuSpecEntries" :key="`${entry.specName}-${entry.valueName}`" class="context-spec">
+						<span v-text="entry.specName" />
+						<strong v-text="entry.valueName" />
+					</div>
+				</div>
+				<span v-else class="context-empty">无多规格</span>
+				<div class="context-count" v-text="`${sku.unitList.length} 个单位`" />
+			</div>
+
+			<div class="unit-list">
+				<div v-for="(unit, unitIndex) in sku.unitList" :key="unit.clientKey" class="unit-card">
+					<div class="unit-card-header">
+						<strong v-text="`单位 ${unitIndex + 1}`" />
+						<t-button v-if="1 < sku.unitList.length" theme="danger" variant="text" size="extra-small" content="删除" @click="removeUnit(unitIndex)" />
+					</div>
+					<t-form class="unit-form" label-align="left" label-width="6rem">
+						<t-form-item label="单位名称" required-mark>
+							<t-input v-model.trim="unit.name" borderless maxlength="32" placeholder="如 件、盒、箱" />
+						</t-form-item>
+						<t-form-item label="基础单位" content-align="right">
+							<t-switch v-model="unit.isBase" size="small" :disabled="sku.unitList.length === 1" @change="setBaseUnit(unitIndex)" />
+						</t-form-item>
+						<t-form-item label="换算数量" help="1 个当前单位对应的基础单位数量" required-mark>
+							<t-input v-model.trim="unit.baseQuantityPerUnit" type="number" align="right" borderless :disabled="unit.isBase" placeholder="1" />
+						</t-form-item>
+						<t-form-item label="售价（元）">
+							<t-input v-model.trim="unit.salePriceText" type="number" align="right" borderless placeholder="选填" />
+						</t-form-item>
+						<t-form-item label="允许采购" content-align="right">
+							<t-switch v-model="unit.allowPurchase" size="small" :disabled="props.productType === 'SERVICE'" />
+						</t-form-item>
+						<t-form-item label="允许销售" content-align="right">
+							<t-switch v-model="unit.allowSale" size="small" />
+						</t-form-item>
+					</t-form>
+				</div>
+				<t-button class="add-button" variant="dashed" size="small" content="添加 SKU 单位" @click="addUnit" />
+			</div>
+		</div>
+	</bottom-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import type { ProductSkuUnit, ProductType } from "@/types/Product";
+import type { ProductSkuForm, ProductSkuUnitForm, ProductSpecForm } from "@/types/ProductEditor";
+import { Message } from "@/utils/message";
+import { formatProductAmount, getProductSkuSpecEntries } from "@/utils/product";
+
+defineOptions({ name: "ProductSkuUnitEditor" });
+
+const props = defineProps<{
+	modelValue: boolean;
+	productType: ProductType;
+	specList: ProductSpecForm[];
+}>();
+
+const sku = defineModel<ProductSkuForm | undefined>("sku");
+
+const emit = defineEmits<{
+	"update:modelValue": [value: boolean];
+	close: [];
+}>();
+
+const visible = computed({
+	get: () => props.modelValue,
+	set: value => handleVisibleChange(value)
+});
+const unitEditorZIndex = 12100;
+const skuSpecEntries = computed(() => sku.value ? getProductSkuSpecEntries(sku.value, props.specList) : []);
+
+function handleVisibleChange(value: boolean): void {
+	emit("update:modelValue", value);
+	if (!value) {
+		emit("close");
+	}
+}
+
+function close(): void {
+	visible.value = false;
+}
+
+function createUnit(unit?: Partial<ProductSkuUnit>, defaultName = "件"): ProductSkuUnitForm {
+	return {
+		...unit,
+		id: unit?.id,
+		clientKey: window.crypto.randomUUID(),
+		name: unit?.name || defaultName,
+		baseQuantityPerUnit: unit?.baseQuantityPerUnit ?? "1",
+		salePriceText: unit?.salePrice === null || unit?.salePrice === undefined ? "" : formatProductAmount(unit.salePrice),
+		isBase: unit?.isBase ?? true,
+		allowPurchase: unit?.allowPurchase ?? props.productType !== "SERVICE",
+		allowSale: unit?.allowSale ?? true,
+		sort: unit?.sort ?? 0
+	};
+}
+
+function addUnit(): void {
+	if (!sku.value) {
+		return;
+	}
+	sku.value.unitList.push(createUnit({ isBase: false, baseQuantityPerUnit: "" }, sku.value.unitList[0]?.name || "件"));
+}
+
+function removeUnit(index: number): void {
+	if (!sku.value) {
+		return;
+	}
+	if (sku.value.unitList.length < 2) {
+		Message.warning("每个 SKU 至少需要一个单位");
+		return;
+	}
+	const wasBase = sku.value.unitList[index]?.isBase;
+	sku.value.unitList.splice(index, 1);
+	if (wasBase && sku.value.unitList[0]) {
+		sku.value.unitList[0].isBase = true;
+		sku.value.unitList[0].baseQuantityPerUnit = "1";
+	}
+}
+
+function setBaseUnit(index: number): void {
+	if (!sku.value) {
+		return;
+	}
+	sku.value.unitList.forEach((unit, unitIndex) => { unit.isBase = unitIndex === index; });
+	const unit = sku.value.unitList[index];
+	if (unit) {
+		unit.baseQuantityPerUnit = "1";
+	}
+}
+</script>
+
+<style scoped lang="less">
+.unit-editor {
+	max-height: 100%;
+	overflow-y: auto;
+	padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
+
+	.editor-context {
+		margin: 0 1rem .75rem;
+		padding: .75rem;
+		background: var(--td-bg-color-secondarycontainer);
+		border-radius: .875rem;
+
+		.context-label,
+		.context-empty {
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+		}
+
+		.context-label {
+			display: block;
+			margin-bottom: .25rem;
+		}
+
+		.context-title {
+			display: block;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		.context-spec-list {
+			gap: .375rem;
+			display: flex;
+			margin-top: .625rem;
+			flex-wrap: wrap;
+		}
+
+		.context-spec {
+			gap: .25rem;
+			display: flex;
+			padding: .25rem .5rem;
+			background: var(--td-bg-color-container);
+			border-radius: .5rem;
+			font-size: .75rem;
+
+			span {
+				color: var(--td-text-color-secondary);
+			}
+		}
+
+		.context-count {
+			margin-top: .625rem;
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
+		}
+	}
+
+	.unit-list {
+		gap: .75rem;
+		display: flex;
+		padding: 0 1rem 1rem;
+		flex-direction: column;
+	}
+
+	.unit-card {
+		border: 1px solid var(--td-component-border);
+		padding: .5rem 0;
+		border-radius: .75rem;
+	}
+
+	.unit-card-header {
+		gap: .5rem;
+		display: flex;
+		padding: 0 .75rem .5rem;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.unit-form {
+		margin: 0 .75rem;
+	}
+
+	:deep(.t-form-item) {
+		padding-right: 0;
+		padding-left: 0;
+	}
+
+	.add-button {
+		align-self: flex-start;
+	}
+}
+
+:global(html.theme-dark) .unit-editor {
+	.editor-context,
+	.context-spec {
+		background: rgba(148, 163, 184, .12);
+	}
+
+	.unit-card {
+		border-color: rgba(148, 163, 184, .3);
+	}
+}
+</style>

src/pages/product/component/ProductStockHealthTable.vue

@@ -22,12 +22,18 @@
 						<td>
 							<div class="product-name" v-text="item.productName || '未命名产品'" />
 							<div class="product-type" v-text="getProductTypeText(item.productType)" />
+							<div v-if="hasLowStockSku(item)" class="sku-list">
+								<div v-for="sku in getLowStockSkuList(item)" :key="`${sku.skuId}-${sku.skuCode}`" class="sku-item">
+									<span v-text="getSkuName(sku)" />
+									<span v-text="`可用 ${formatQuantity(sku.availableQuantity)}`" />
+								</div>
+							</div>
 						</td>
 						<td class="number" v-text="formatQuantity(item.availableQuantity)" />
 						<td class="number" v-text="formatQuantity(item.reservedQuantity)" />
 						<td class="number" v-text="formatQuantity(item.minStockQuantity)" />
 						<td>
-							<t-tag v-if="item.lowStock === 1" theme="danger" variant="light" content="低库存" />
+							<t-tag v-if="hasLowStockSku(item)" theme="danger" variant="light" :content="`低库存 ${formatQuantity(item.lowStockSkuCount)} 个规格`" />
 							<t-tag v-else theme="success" variant="light" content="正常" />
 						</td>
 					</tr>
@@ -38,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import type { GaoProductStockHealthView } from "@/types/GaoChart";
+import type { GaoProductSkuStockHealthView, GaoProductStockHealthView } from "@/types/GaoChart";
 import { formatQuantity, getNumber } from "@/pages/product/component/chartUtils";
 
 defineOptions({
@@ -47,14 +53,27 @@ defineOptions({
 
 const props = defineProps<{
 	list: GaoProductStockHealthView[];
+	skuHealthList: GaoProductSkuStockHealthView[];
 	loading: boolean;
 }>();
 
 const sortedList = computed(() => [...props.list].sort((left, right) => {
-	const lowStockDiff = getNumber(right.lowStock) - getNumber(left.lowStock);
+	const lowStockDiff = getNumber(right.lowStockSkuCount) - getNumber(left.lowStockSkuCount);
 	return lowStockDiff || getNumber(left.availableQuantity) - getNumber(right.availableQuantity);
 }));
 
+function hasLowStockSku(item: GaoProductStockHealthView): boolean {
+	return 0 < getNumber(item.lowStockSkuCount);
+}
+
+function getLowStockSkuList(item: GaoProductStockHealthView): GaoProductSkuStockHealthView[] {
+	return props.skuHealthList.filter(sku => sku.productId === item.productId);
+}
+
+function getSkuName(item: GaoProductSkuStockHealthView): string {
+	return [item.skuName || "未命名规格", item.specSummary].filter(Boolean).join(" · ");
+}
+
 function getProductTypeText(value?: string): string {
 	return ({ SERVICE: "服务", GOODS: "商品", CONSUMABLE: "耗材" } as Record<string, string>)[value || ""] || "未分类";
 }
@@ -127,6 +146,21 @@ function getProductTypeText(value?: string): string {
 		font-size: .6875rem;
 	}
 
+	.sku-list {
+		gap: .25rem;
+		margin-top: .375rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.sku-item {
+		gap: .5rem;
+		color: #b42318;
+		display: flex;
+		font-size: .6875rem;
+		justify-content: space-between;
+	}
+
 	.table-state {
 		padding: 1.5rem 0;
 		display: flex;
@@ -148,6 +182,10 @@ function getProductTypeText(value?: string): string {
 			color: #cbd5e1;
 			border-top-color: rgba(148, 163, 184, .2);
 		}
+
+		.sku-item {
+			color: #fda29b;
+		}
 	}
 }
 </style>