diff --git a/src/api/GaoProductSkuChartAPI.ts b/src/api/GaoProductSkuChartAPI.ts
new file mode 100644
index 0000000..5ffe28e
--- /dev/null
+++ b/src/api/GaoProductSkuChartAPI.ts
@@ -0,0 +1,58 @@
+import { axios } from "timi-web-api";
+import type {
+	GaoProductChartReq,
+	GaoProductSkuFulfillmentDailyStatView,
+	GaoProductSkuFulfillmentRankView,
+	GaoProductSkuSalesDailyStatView,
+	GaoProductSkuSalesRankView,
+	GaoProductSkuStockHealthView,
+	GaoProductSkuStockMovementDailyStatView,
+	GaoProductSkuUnitSalesRankView
+} from "@/types/GaoChart";
+import { getStoreChartCache } from "@/utils/storeChartCache";
+import { withCurrentStoreId } from "@/utils/store";
+
+const BASE_URI = "/gao/product/sku/chart";
+
+async function salesDaily(req: GaoProductChartReq): Promise<GaoProductSkuSalesDailyStatView[]> {
+	return await requestList("sales-daily", "/sales/daily", req);
+}
+
+async function salesRank(req: GaoProductChartReq): Promise<GaoProductSkuSalesRankView[]> {
+	return await requestList("sales-rank", "/sales/rank", req);
+}
+
+async function unitSalesRank(req: GaoProductChartReq): Promise<GaoProductSkuUnitSalesRankView[]> {
+	return await requestList("sales-unit-rank", "/sales/unit/rank", req);
+}
+
+async function fulfillmentDaily(req: GaoProductChartReq): Promise<GaoProductSkuFulfillmentDailyStatView[]> {
+	return await requestList("fulfillment-daily", "/fulfillment/daily", req);
+}
+
+async function fulfillmentRank(req: GaoProductChartReq): Promise<GaoProductSkuFulfillmentRankView[]> {
+	return await requestList("fulfillment-rank", "/fulfillment/rank", req);
+}
+
+async function stockMovementDaily(req: GaoProductChartReq): Promise<GaoProductSkuStockMovementDailyStatView[]> {
+	return await requestList("stock-movement-daily", "/stock/movement/daily", req);
+}
+
+async function stockHealth(req: GaoProductChartReq): Promise<GaoProductSkuStockHealthView[]> {
+	return await requestList("stock-health", "/stock/health", req);
+}
+
+async function requestList<T>(name: string, path: string, req: GaoProductChartReq): Promise<T[]> {
+	const request = withCurrentStoreId(req);
+	return await getStoreChartCache(`gao-product-sku:${name}:${JSON.stringify(request)}`, async () => await axios.post(`${BASE_URI}${path}`, request));
+}
+
+export default {
+	salesDaily,
+	salesRank,
+	unitSalesRank,
+	fulfillmentDaily,
+	fulfillmentRank,
+	stockMovementDaily,
+	stockHealth
+};
diff --git a/src/api/GaoSalesOrderChartAPI.ts b/src/api/GaoSalesOrderChartAPI.ts
index 24100ab..b9a71b4 100644
--- a/src/api/GaoSalesOrderChartAPI.ts
+++ b/src/api/GaoSalesOrderChartAPI.ts
@@ -2,6 +2,7 @@ import { axios } from "timi-web-api";
 import type {
 	GaoCustomerOrderProductRankView,
 	GaoCustomerOrderRankView,
+	GaoCustomerOrderSkuRankView,
 	GaoCustomerRepeatDailyStatView,
 	GaoCustomerRepeatIntervalStatView,
 	GaoSalesOrderCalendarStatView,
@@ -47,6 +48,10 @@ async function customerProductRank(req: GaoSalesOrderChartReq): Promise<GaoCusto
 	return await requestList("customer-product-rank", "/customer/product/rank", req);
 }
 
+async function customerSkuRank(req: GaoSalesOrderChartReq): Promise<GaoCustomerOrderSkuRankView[]> {
+	return await requestList("customer-sku-rank", "/customer/sku/rank", req);
+}
+
 async function consumptionDaily(req: GaoSalesOrderChartReq): Promise<GaoSalesOrderConsumptionDailyStatView[]> {
 	return await requestList("customer-consumption-daily", "/customer/consumption/daily", req);
 }
@@ -76,6 +81,7 @@ export default {
 	receivable,
 	customerRank,
 	customerProductRank,
+	customerSkuRank,
 	consumptionDaily,
 	calendar,
 	repeatDaily,
diff --git a/src/api/ProductAPI.ts b/src/api/ProductAPI.ts
index 64521eb..a2bd317 100644
--- a/src/api/ProductAPI.ts
+++ b/src/api/ProductAPI.ts
@@ -5,7 +5,11 @@ import type {
 	ProductCategoryPage,
 	ProductPage,
 	ProductPageResult,
+	ProductSku,
+	ProductSpec,
+	ProductSpecValue,
 	ProductStock,
+	ProductStockProduct,
 	ProductStockChangeRequest,
 	ProductStockManualRevokeRequest,
 	ProductStockPage,
@@ -57,6 +61,34 @@ async function disable(id: string): Promise<void> {
 	await axios.post(`${PRODUCT_URI}/disable`, undefined, { params: { id } });
 }
 
+async function skuDetail(id: string): Promise<ProductSku> {
+	return await axios.post(`${PRODUCT_URI}/sku/detail`, undefined, { params: { id } });
+}
+
+async function skuCreate(sku: ProductSku): Promise<string> {
+	return await axios.post(`${PRODUCT_URI}/sku/create`, withCurrentStoreId(sku));
+}
+
+async function skuUpdate(sku: ProductSku): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/sku/update`, withCurrentStoreId(sku));
+}
+
+async function skuDisable(id: string): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/sku/disable`, undefined, { params: { id } });
+}
+
+async function specList(productId: string): Promise<ProductSpec[]> {
+	return await axios.post(`${PRODUCT_URI}/spec/list`, undefined, { params: { productId } });
+}
+
+async function specCreate(spec: ProductSpec): Promise<string> {
+	return await axios.post(`${PRODUCT_URI}/spec/create`, spec);
+}
+
+async function specValueCreate(value: ProductSpecValue): Promise<string> {
+	return await axios.post(`${PRODUCT_URI}/spec/value/create`, value);
+}
+
 async function sellableList(page: ProductPage): Promise<Product[]> {
 	return await axios.post(`${PRODUCT_URI}/sellable/list`, withCurrentStoreId(page));
 }
@@ -65,9 +97,13 @@ async function stockList(page: ProductStockPage): Promise<ProductPageResult<Prod
 	return await axios.post(`${STOCK_URI}/list`, withCurrentStoreId(page));
 }
 
-async function stockDetail(productId: string, storeId?: string): Promise<ProductStock> {
+async function stockProductList(page: ProductStockPage): Promise<ProductPageResult<ProductStockProduct>> {
+	return await axios.post(`${STOCK_URI}/product-list`, withCurrentStoreId(page));
+}
+
+async function stockDetail(skuId: string, storeId?: string): Promise<ProductStock> {
 	return await axios.post(`${STOCK_URI}/detail`, undefined, {
-		params: { productId, storeId: storeId || getCurrentStoreId() }
+		params: { skuId, storeId: storeId || getCurrentStoreId() }
 	});
 }
 
@@ -114,8 +150,16 @@ export default {
 	create,
 	update,
 	disable,
+	skuDetail,
+	skuCreate,
+	skuUpdate,
+	skuDisable,
+	specList,
+	specCreate,
+	specValueCreate,
 	sellableList,
 	stockList,
+	stockProductList,
 	stockDetail,
 	initialIn,
 	manualIn,
diff --git a/src/components/ProductSelector.vue b/src/components/ProductSelector.vue
index 8ad29eb..a1fa6c9 100644
--- a/src/components/ProductSelector.vue
+++ b/src/components/ProductSelector.vue
@@ -11,47 +11,83 @@
 	</t-form-item>
 	<bottom-popup
 		v-model="visible"
-		title="选择产品"
+		:title="activeProduct ? '选择 SKU 单位' : '选择产品'"
 		height="80vh"
 		right-button-text=""
-		@left-button-click="visible = false"
+		@left-button-click="close"
 	>
 		<div class="popup">
-			<div class="search-wrap">
-				<t-input
-					v-model="keyword"
-					class="search"
-					borderless
-					placeholder="搜索产品名称或编码"
-				/>
+			<div v-if="activeProduct" class="selection-header">
+				<t-button variant="text" size="small" @click="backToProducts">返回产品</t-button>
+				<strong v-text="activeProduct.name || '未命名产品'" />
+				<span v-text="activeProduct.code || ''" />
 			</div>
-			<div class="items">
-				<t-cell-group v-if="visibleProductList.length" theme="card">
-					<t-cell
-						v-for="product in visibleProductList"
-						:key="product.id"
-						class="item"
-						:title="product.name"
-						:description="`${product.code || '-'}`"
-						@click="handleProductSelect(product)"
-					>
-						<template #leftIcon>
-							<t-image
-								v-if="getProductPhotoURL(product)"
-								:src="getProductPhotoURL(product)"
-								:alt="product.name || '产品图片'"
-								fit="cover"
-								class="avatar"
+			<div v-if="activeProduct" class="selection">
+				<div v-if="specList.length" class="specs">
+					<div v-for="spec in specList" :key="spec.id || spec.name" class="spec">
+						<strong v-text="spec.name" />
+						<div class="values">
+							<t-button
+								v-for="value in enabledValues(spec)"
+								:key="value.id"
+								size="extra-small"
+								:theme="selectedSpecValueMap[spec.id || ''] === value.id ? 'primary' : 'default'"
+								:variant="selectedSpecValueMap[spec.id || ''] === value.id ? 'base' : 'outline'"
+								:content="value.name"
+								@click="selectSpecValue(spec.id || '', value.id || '')"
 							/>
-							<div
-								v-else
-								class="avatar fallback"
-								v-text="(product.name || product.code || '产').slice(0, 1)"
-							/>
-						</template>
-					</t-cell>
-				</t-cell-group>
-				<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
+						</div>
+					</div>
+				</div>
+				<div v-if="matchedSku" class="sku-card">
+					<div class="sku-title">
+						<strong v-text="matchedSku.name || matchedSku.specSummary || '默认 SKU'" />
+						<span v-if="matchedSku.code" v-text="matchedSku.code" />
+					</div>
+					<div class="units">
+						<t-button
+							v-for="unit in saleableUnits(matchedSku)"
+							:key="unit.id"
+							size="small"
+							:theme="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'primary' : 'default'"
+							:variant="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'base' : 'outline'"
+							@click="selectUnit(matchedSku, unit.id || '')"
+						>
+							<span v-text="unit.name" />
+							<span v-if="unit.salePrice !== null && unit.salePrice !== undefined" class="price" v-text="`￥${formatProductAmount(unit.salePrice)}`" />
+						</t-button>
+					</div>
+				</div>
+				<div v-else class="empty" v-text="specList.length ? '请选择每个规格项的规格值' : '暂无可售 SKU'" />
+			</div>
+			<div v-else class="products">
+				<div class="search-wrap">
+					<t-input v-model="keyword" class="search" borderless placeholder="搜索产品名称或编码" />
+				</div>
+				<div class="items">
+					<t-cell-group v-if="visibleProductList.length" theme="card">
+						<t-cell
+							v-for="product in visibleProductList"
+							:key="product.id"
+							class="item"
+							:title="product.name"
+							:description="`${product.code || '-'} · ${product.skuList?.length || 0} 个 SKU`"
+							@click="selectProduct(product)"
+						>
+							<template #leftIcon>
+								<t-image
+									v-if="getProductPhotoURL(product)"
+									:src="getProductPhotoURL(product)"
+									:alt="product.name || '产品图片'"
+									fit="cover"
+									class="avatar"
+								/>
+								<div v-else class="avatar fallback" v-text="(product.name || product.code || '产').slice(0, 1)" />
+							</template>
+						</t-cell>
+					</t-cell-group>
+					<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
+				</div>
 			</div>
 		</div>
 	</bottom-popup>
@@ -60,40 +96,54 @@
 <script setup lang="ts">
 import { BottomPopup } from "timi-tdesign-mobile";
 import ProductAPI from "@/api/ProductAPI";
-import type { Product } from "@/types/Product";
+import type { Product, ProductSku, ProductSkuUnit, ProductSpec, ProductSpecValue } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
-import { getProductPhotoURL } from "@/utils/product";
+import { formatProductAmount, getProductPhotoURL, getProductSkuText } from "@/utils/product";
 
 interface Props {
-	modelValue: { productId: string; productUnitId: string } | undefined;
+	modelValue: { skuId: string; skuUnitId: string } | undefined;
 	selectedProduct?: Product;
 	label?: string;
 	requiredMark?: boolean;
 	placeholder?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), { label: "产品", requiredMark: false, placeholder: "请选择产品单位", selectionMode: "product-unit" });
+const props = withDefaults(defineProps<Props>(), { label: "产品", requiredMark: false, placeholder: "请选择产品 SKU" });
 const emit = defineEmits<{ "update:modelValue": [value: Props["modelValue"]] }>();
 const visible = ref(false);
 const loading = ref(false);
 const keyword = ref("");
 const productList = ref<Product[]>([]);
+const activeProduct = ref<Product>();
+const selectedSpecValueMap = reactive<Record<string, string>>({});
+
 const selectedText = computed(() => {
-	if (!props.modelValue) {
+	if (!props.modelValue?.skuId) {
 		return "";
 	}
-	const product = props.selectedProduct || productList.value.find(item => item.id === props.modelValue?.productId);
-	return product?.name || "";
+	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}` : ""}`;
 });
 const filteredProductList = computed(() => {
 	const text = keyword.value.toLocaleLowerCase();
 	return productList.value.filter(item => !text || `${item.name}${item.code}`.toLocaleLowerCase().includes(text));
 });
 const visibleProductList = computed(() => filteredProductList.value);
+const specList = computed(() => activeProduct.value?.specList || []);
+const matchedSku = computed(() => {
+	const product = activeProduct.value;
+	if (!product) {
+		return undefined;
+	}
+	return (product.skuList || []).find(sku => specList.value.every(spec => sku.specValueIdList?.includes(selectedSpecValueMap[spec.id || ""] || "")));
+});
 
 async function open(): Promise<void> {
 	visible.value = true;
+	activeProduct.value = undefined;
 	if (productList.value.length) {
 		return;
 	}
@@ -107,15 +157,48 @@ async function open(): Promise<void> {
 	}
 }
 
-function handleProductSelect(product: Product): void {
-	if (!product.id) {
+function close(): void {
+	visible.value = false;
+	activeProduct.value = undefined;
+}
+
+function backToProducts(): void {
+	activeProduct.value = undefined;
+}
+
+function enabledValues(spec: ProductSpec): ProductSpecValue[] {
+	return (spec.valueList || []).filter(value => value.enabled !== false && value.id);
+}
+
+function saleableUnits(sku: ProductSku): ProductSkuUnit[] {
+	return (sku.unitList || []).filter(unit => unit.allowSale !== false && unit.id);
+}
+
+function selectProduct(product: Product): void {
+	activeProduct.value = product;
+	Object.keys(selectedSpecValueMap).forEach(key => delete selectedSpecValueMap[key]);
+	const selectedSku = product.skuList?.find(sku => sku.id === props.modelValue?.skuId);
+	for (const spec of product.specList || []) {
+		const valueId = selectedSku?.specValueIdList?.find(id => (spec.valueList || []).some(value => value.id === id))
+			|| enabledValues(spec)[0]?.id;
+		if (spec.id && valueId) {
+			selectedSpecValueMap[spec.id] = valueId;
+		}
+	}
+}
+
+function selectSpecValue(specId: string, valueId: string): void {
+	if (specId && valueId) {
+		selectedSpecValueMap[specId] = valueId;
+	}
+}
+
+function selectUnit(sku: ProductSku, skuUnitId: string): void {
+	if (!sku.id || !skuUnitId) {
 		return;
 	}
-	emit("update:modelValue", {
-		productId: product.id,
-		productUnitId: product.id === props.modelValue?.productId ? props.modelValue?.productUnitId || "" : ""
-	});
-	visible.value = false;
+	emit("update:modelValue", { skuId: sku.id, skuUnitId });
+	close();
 }
 </script>
 
@@ -134,40 +217,114 @@ function handleProductSelect(product: Product): void {
 	display: flex;
 	flex-direction: column;
 
-	.search-wrap {
-		z-index: 1;
-		padding: 1rem 0 .5rem 0;
-		box-shadow: 0 4px 4px rgba(0, 0, 0, .05);
+	.selection-header {
+		gap: .5rem;
+		display: flex;
+		padding: 0 1rem .75rem;
+		align-items: center;
+		border-bottom: 1px solid var(--td-component-border);
 
-		.search {
-			--td-input-vertical-padding: 8px 14px;
+		strong {
+			flex: 1;
+			min-width: 0;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
 
-			flex: 0;
-			margin: 0 1rem;
-			border: 1px solid var(--td-component-border);
-			border-radius: .875rem;
+		span {
+			color: var(--td-text-color-secondary);
+			font-size: .75rem;
 		}
 	}
 
-	.items {
-		flex: 1;
-		min-height: 0;
+	.selection {
+		padding: 1rem;
 		overflow-y: auto;
-		padding-bottom: env(safe-area-inset-bottom, 0);
 
-		.item {
-			padding: 10px;
+		.specs {
+			gap: 1rem;
+			display: flex;
+			flex-direction: column;
 
-			.avatar {
-				width: 3.5rem;
-				height: 3.5rem;
+			.spec {
+				gap: .5rem;
+				display: flex;
+				flex-direction: column;
+
+				.values,
+				.units {
+					gap: .5rem;
+					display: flex;
+					flex-wrap: wrap;
+				}
+			}
+		}
+
+		.sku-card {
+			margin-top: 1.25rem;
+			padding: .75rem;
+			background: var(--td-bg-color-secondarycontainer);
+			border-radius: .875rem;
+
+			.sku-title {
+				gap: .5rem;
+				display: flex;
+				align-items: baseline;
+				justify-content: space-between;
+
+				span {
+					color: var(--td-text-color-secondary);
+					font-size: .75rem;
+				}
 			}
 
 			.units {
-				gap: .35rem;
+				gap: .5rem;
 				display: flex;
+				margin-top: .75rem;
 				flex-wrap: wrap;
-				justify-content: flex-end;
+
+				.price {
+					margin-left: .25rem;
+					font-size: .75rem;
+				}
+			}
+		}
+	}
+
+	.products {
+		height: 100%;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+
+		.search-wrap {
+			z-index: 1;
+			padding: 0 0 .75rem;
+
+			.search {
+				--td-input-vertical-padding: 8px 14px;
+
+				margin: 0 1rem;
+				border: 1px solid var(--td-component-border);
+				border-radius: .875rem;
+			}
+		}
+
+		.items {
+			flex: 1;
+			min-height: 0;
+			overflow-y: auto;
+			padding-bottom: env(safe-area-inset-bottom, 0);
+
+			.item {
+				padding: 10px;
+
+				.avatar {
+					width: 3.5rem;
+					height: 3.5rem;
+				}
 			}
 		}
 	}
diff --git a/src/pages/customer/CustomerDataCharts.vue b/src/pages/customer/CustomerDataCharts.vue
index 3f23c4a..4879eec 100644
--- a/src/pages/customer/CustomerDataCharts.vue
+++ b/src/pages/customer/CustomerDataCharts.vue
@@ -27,43 +27,50 @@
 		</div>
 		<customer-profile-card v-entrance-transition class="customer" :customer="selectedCustomer" />
 		<div class="charts">
-				<customer-chart-summary
-					v-entrance-transition="70"
-					v-if="selectedCustomer"
-					:customer="selectedCustomer"
-					:month-cursor="monthCursor"
-					:selected-event-id-list="selectedEventIdList"
-				/>
-				<customer-event-record-calendar-section
-					v-entrance-transition="140"
-					v-if="selectedCustomer"
-					v-model="monthCursor"
-					v-model:selected-event-id-list="selectedEventIdList"
-					:customer-id="selectedCustomer.id || ''"
-					:customer-name="selectedCustomer.name"
-					:store-id="selectedCustomer.storeId"
-					@list="toEventRecordList"
-				/>
-				<customer-record-trend-chart
-					v-entrance-transition="210"
-					v-if="selectedCustomer"
-					:customer-id="selectedCustomer.id || ''"
-					:date-text-list="chartDateTextList"
-					:selected-event-id-list="selectedEventIdList"
-				/>
-				<customer-event-structure-chart
-					v-entrance-transition="280"
-					v-if="selectedCustomer"
-					:customer-id="selectedCustomer.id || ''"
-					:date-text-list="monthDateTextList"
-					:selected-event-id-list="selectedEventIdList"
-				/>
-				<customer-selector
-					v-entrance-transition="350"
-					v-model="selectedCustomerId"
-					v-model:visible="selectorVisible"
-					@change="handleCustomerSelected"
-				/>
+			<customer-order-charts
+				v-entrance-transition="35"
+				v-if="selectedCustomer"
+				:customer-id="selectedCustomer.id || ''"
+				:date-text-list="chartDateTextList"
+				:store-id="selectedCustomer.storeId"
+			/>
+			<customer-chart-summary
+				v-entrance-transition="70"
+				v-if="selectedCustomer"
+				:customer="selectedCustomer"
+				:month-cursor="monthCursor"
+				:selected-event-id-list="selectedEventIdList"
+			/>
+			<customer-event-record-calendar-section
+				v-entrance-transition="140"
+				v-if="selectedCustomer"
+				v-model="monthCursor"
+				v-model:selected-event-id-list="selectedEventIdList"
+				:customer-id="selectedCustomer.id || ''"
+				:customer-name="selectedCustomer.name"
+				:store-id="selectedCustomer.storeId"
+				@list="toEventRecordList"
+			/>
+			<customer-record-trend-chart
+				v-entrance-transition="210"
+				v-if="selectedCustomer"
+				:customer-id="selectedCustomer.id || ''"
+				:date-text-list="chartDateTextList"
+				:selected-event-id-list="selectedEventIdList"
+			/>
+			<customer-event-structure-chart
+				v-entrance-transition="280"
+				v-if="selectedCustomer"
+				:customer-id="selectedCustomer.id || ''"
+				:date-text-list="monthDateTextList"
+				:selected-event-id-list="selectedEventIdList"
+			/>
+			<customer-selector
+				v-entrance-transition="350"
+				v-model="selectedCustomerId"
+				v-model:visible="selectorVisible"
+				@change="handleCustomerSelected"
+			/>
 		</div>
 	</div>
 </template>
@@ -77,6 +84,7 @@ import type { EventRecordCalendarListPayload } from "@/components/EventRecordCal
 import CustomerChartSummary from "@/pages/customer/component/CustomerChartSummary.vue";
 import CustomerEventRecordCalendarSection from "@/pages/customer/component/CustomerEventRecordCalendarSection.vue";
 import CustomerEventStructureChart from "@/pages/customer/component/CustomerEventStructureChart.vue";
+import CustomerOrderCharts from "@/pages/customer/component/CustomerOrderCharts.vue";
 import CustomerRecordTrendChart from "@/pages/customer/component/CustomerRecordTrendChart.vue";
 import { useSettingStore } from "@/store/settingStore";
 import type { Customer } from "@/types/Customer";
diff --git a/src/pages/customer/component/CustomerConsumptionDailyChart.vue b/src/pages/customer/component/CustomerConsumptionDailyChart.vue
new file mode 100644
index 0000000..2ddb73b
--- /dev/null
+++ b/src/pages/customer/component/CustomerConsumptionDailyChart.vue
@@ -0,0 +1,77 @@
+<template>
+	<gao-chart-card
+		title="有效消费趋势"
+		caption="金额已换算为元"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="18rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoSalesOrderConsumptionDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerConsumptionDailyChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoSalesOrderConsumptionDailyStatView[];
+	loading: boolean;
+}>();
+
+function buildOption(visibleDateTextList: string[]): EChartsOption {
+	const labelList = visibleDateTextList.map(item => item.slice(5));
+	return {
+		...buildAxisChartOption(labelList),
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: { show: false },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		yAxis: [
+			{
+				type: "value",
+				name: "记录",
+				axisLabel: { color: "#52607a" },
+				splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
+			},
+			{
+				type: "value",
+				name: "元",
+				axisLabel: { color: "#52607a" },
+				splitLine: { show: false }
+			}
+		],
+		series: [
+			{
+				name: "消费记录",
+				type: "bar",
+				yAxisIndex: 0,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.recordCount))
+			},
+			{
+				name: "当日消费",
+				type: "line",
+				yAxisIndex: 1,
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.amount) / 100)
+			},
+			{
+				name: "累计消费",
+				type: "line",
+				yAxisIndex: 1,
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.cumulativeAmount) / 100)
+			}
+		]
+	};
+}
+</script>
diff --git a/src/pages/customer/component/CustomerOrderCalendarChart.vue b/src/pages/customer/component/CustomerOrderCalendarChart.vue
new file mode 100644
index 0000000..5577fac
--- /dev/null
+++ b/src/pages/customer/component/CustomerOrderCalendarChart.vue
@@ -0,0 +1,77 @@
+<template>
+	<gao-chart-card
+		title="订单日历"
+		caption="按下单日期统计"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="18rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoSalesOrderCalendarStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerOrderCalendarChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoSalesOrderCalendarStatView[];
+	loading: boolean;
+}>();
+
+function buildOption(visibleDateTextList: string[]): EChartsOption {
+	const labelList = visibleDateTextList.map(item => item.slice(5));
+	return {
+		...buildAxisChartOption(labelList),
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: { show: false },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		yAxis: [
+			{
+				type: "value",
+				name: "订单",
+				axisLabel: { color: "#52607a" },
+				splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
+			},
+			{
+				type: "value",
+				name: "元",
+				axisLabel: { color: "#52607a" },
+				splitLine: { show: false }
+			}
+		],
+		series: [
+			{
+				name: "订单数",
+				type: "bar",
+				yAxisIndex: 0,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
+			},
+			{
+				name: "成交金额",
+				type: "line",
+				yAxisIndex: 1,
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.saleAmount) / 100)
+			},
+			{
+				name: "净收款",
+				type: "line",
+				yAxisIndex: 1,
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.netPaidAmount) / 100)
+			}
+		]
+	};
+}
+</script>
diff --git a/src/pages/customer/component/CustomerOrderCharts.vue b/src/pages/customer/component/CustomerOrderCharts.vue
new file mode 100644
index 0000000..4db0af2
--- /dev/null
+++ b/src/pages/customer/component/CustomerOrderCharts.vue
@@ -0,0 +1,223 @@
+<template>
+	<section class="order-charts">
+		<div class="section-heading">
+			<div>
+				<div class="eyebrow" v-text="'订单经营分析'" />
+				<h2 v-text="'客户订单看板'" />
+			</div>
+			<span v-text="'金额单位：元，数量单位：基础单位'" />
+		</div>
+		<order-daily-chart
+			:date-text-list="dateTextList"
+			:list="dailyList"
+			:loading="isLoading"
+		/>
+		<div class="two-columns">
+			<customer-order-product-rank-chart
+				:list="productRankList"
+				:loading="isLoading"
+			/>
+			<customer-order-sku-rank-chart
+				:list="skuRankList"
+				:loading="isLoading"
+			/>
+		</div>
+		<customer-consumption-daily-chart
+			:date-text-list="dateTextList"
+			:list="consumptionDailyList"
+			:loading="isLoading"
+		/>
+		<customer-order-calendar-chart
+			:date-text-list="dateTextList"
+			:list="calendarList"
+			:loading="isLoading"
+		/>
+		<div class="two-columns">
+			<customer-repeat-daily-chart
+				:date-text-list="dateTextList"
+				:list="repeatDailyList"
+				:loading="isLoading"
+			/>
+			<customer-repeat-interval-chart
+				:list="repeatIntervalList"
+				:loading="isLoading"
+			/>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import GaoSalesOrderChartAPI from "@/api/GaoSalesOrderChartAPI";
+import CustomerConsumptionDailyChart from "@/pages/customer/component/CustomerConsumptionDailyChart.vue";
+import CustomerOrderCalendarChart from "@/pages/customer/component/CustomerOrderCalendarChart.vue";
+import CustomerOrderProductRankChart from "@/pages/customer/component/CustomerOrderProductRankChart.vue";
+import CustomerOrderSkuRankChart from "@/pages/customer/component/CustomerOrderSkuRankChart.vue";
+import CustomerRepeatDailyChart from "@/pages/customer/component/CustomerRepeatDailyChart.vue";
+import CustomerRepeatIntervalChart from "@/pages/customer/component/CustomerRepeatIntervalChart.vue";
+import OrderDailyChart from "@/pages/product/component/OrderDailyChart.vue";
+import type {
+	GaoCustomerOrderProductRankView,
+	GaoCustomerOrderSkuRankView,
+	GaoCustomerRepeatDailyStatView,
+	GaoCustomerRepeatIntervalStatView,
+	GaoSalesOrderCalendarStatView,
+	GaoSalesOrderConsumptionDailyStatView,
+	GaoSalesOrderDailyStatView
+} from "@/types/GaoChart";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+
+defineOptions({
+	name: "CustomerOrderCharts"
+});
+
+const props = defineProps<{
+	customerId: string;
+	dateTextList: string[];
+	storeId?: string;
+}>();
+
+const dailyList = ref<GaoSalesOrderDailyStatView[]>([]);
+const productRankList = ref<GaoCustomerOrderProductRankView[]>([]);
+const skuRankList = ref<GaoCustomerOrderSkuRankView[]>([]);
+const consumptionDailyList = ref<GaoSalesOrderConsumptionDailyStatView[]>([]);
+const calendarList = ref<GaoSalesOrderCalendarStatView[]>([]);
+const repeatDailyList = ref<GaoCustomerRepeatDailyStatView[]>([]);
+const repeatIntervalList = ref<GaoCustomerRepeatIntervalStatView[]>([]);
+const isLoading = ref(false);
+let requestId = 0;
+
+watch([
+	() => props.customerId,
+	() => props.storeId,
+	() => props.dateTextList
+], async () => {
+	await loadCharts();
+}, {
+	deep: true,
+	immediate: true
+});
+
+async function loadCharts(): Promise<void> {
+	if (!props.customerId || !props.dateTextList.length) {
+		clearData();
+		return;
+	}
+
+	const currentRequestId = ++requestId;
+	isLoading.value = true;
+	try {
+		const request = {
+			storeId: props.storeId,
+			customerId: props.customerId,
+			beginAt: getDateStart(props.dateTextList[0]),
+			endAt: getDateEnd(props.dateTextList[props.dateTextList.length - 1]),
+			topN: 10
+		};
+		const [daily, productRank, skuRank, consumptionDaily, calendar, repeatDaily, repeatInterval] = await Promise.all([
+			GaoSalesOrderChartAPI.daily(request),
+			GaoSalesOrderChartAPI.customerProductRank(request),
+			GaoSalesOrderChartAPI.customerSkuRank(request),
+			GaoSalesOrderChartAPI.consumptionDaily(request),
+			GaoSalesOrderChartAPI.calendar(request),
+			GaoSalesOrderChartAPI.repeatDaily(request),
+			GaoSalesOrderChartAPI.repeatInterval(request)
+		]);
+		if (currentRequestId !== requestId) {
+			return;
+		}
+		dailyList.value = daily || [];
+		productRankList.value = productRank || [];
+		skuRankList.value = skuRank || [];
+		consumptionDailyList.value = consumptionDaily || [];
+		calendarList.value = calendar || [];
+		repeatDailyList.value = repeatDaily || [];
+		repeatIntervalList.value = repeatInterval || [];
+	} catch (error) {
+		if (currentRequestId === requestId) {
+			Message.error(getErrorMessage(error, "客户订单图表加载失败"));
+		}
+	} finally {
+		if (currentRequestId === requestId) {
+			isLoading.value = false;
+		}
+	}
+}
+
+function clearData(): void {
+	isLoading.value = false;
+	dailyList.value = [];
+	productRankList.value = [];
+	skuRankList.value = [];
+	consumptionDailyList.value = [];
+	calendarList.value = [];
+	repeatDailyList.value = [];
+	repeatIntervalList.value = [];
+}
+
+function getDateStart(dateText: string): number {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 0, 0, 0, 0).getTime();
+}
+
+function getDateEnd(dateText: string): number {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 23, 59, 59, 999).getTime();
+}
+</script>
+
+<style scoped lang="less">
+.order-charts {
+	gap: 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.section-heading {
+		gap: .5rem;
+		padding: 0 .25rem;
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+	}
+
+	.eyebrow {
+		color: var(--td-brand-color);
+		font-size: .6875rem;
+		font-weight: 700;
+		letter-spacing: .12em;
+	}
+
+	h2 {
+		color: #0f172a;
+		margin: .25rem 0 0;
+		font-size: 1.125rem;
+	}
+
+	.section-heading > span {
+		color: #94a3b8;
+		font-size: .6875rem;
+	}
+
+	.two-columns {
+		gap: 1rem;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}
+
+:global(html.theme-dark) {
+	.order-charts {
+		h2 {
+			color: #e2e8f0;
+		}
+	}
+}
+
+@media (max-width: 42rem) {
+	.order-charts {
+		.two-columns {
+			grid-template-columns: 1fr;
+		}
+	}
+}
+</style>
diff --git a/src/pages/customer/component/CustomerOrderProductRankChart.vue b/src/pages/customer/component/CustomerOrderProductRankChart.vue
new file mode 100644
index 0000000..ee0f7d4
--- /dev/null
+++ b/src/pages/customer/component/CustomerOrderProductRankChart.vue
@@ -0,0 +1,81 @@
+<template>
+	<gao-chart-card
+		title="客户产品购买排行"
+		caption="基础单位购买及履约进度，前 10"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="20rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoCustomerOrderProductRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerOrderProductRankChart"
+});
+
+const props = defineProps<{
+	list: GaoCustomerOrderProductRankView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getProductName)),
+		legend: {
+			top: 0,
+			icon: "roundRect",
+			textStyle: { color: "#52607a" }
+		},
+		grid: {
+			top: 32,
+			left: 8,
+			right: 18,
+			bottom: 12,
+			containLabel: true
+		},
+		series: [
+			{
+				name: "直接购买",
+				type: "bar",
+				stack: "quantity",
+				data: list.map(item => getNumber(item.directBaseQuantity))
+			},
+			{
+				name: "套餐权益",
+				type: "bar",
+				stack: "quantity",
+				data: list.map(item => getNumber(item.packageBaseQuantity))
+			},
+			{
+				name: "待履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.reservedBaseQuantity))
+			},
+			{
+				name: "已履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.fulfilledBaseQuantity))
+			},
+			{
+				name: "可履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.availableBaseQuantity))
+			}
+		]
+	};
+});
+
+function getProductName(item: GaoCustomerOrderProductRankView): string {
+	return item.productName || "未命名产品";
+}
+</script>
diff --git a/src/pages/customer/component/CustomerOrderSkuRankChart.vue b/src/pages/customer/component/CustomerOrderSkuRankChart.vue
new file mode 100644
index 0000000..1bdce8c
--- /dev/null
+++ b/src/pages/customer/component/CustomerOrderSkuRankChart.vue
@@ -0,0 +1,81 @@
+<template>
+	<gao-chart-card
+		title="客户 SKU 购买排行"
+		caption="基础单位购买及履约进度，前 10"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="20rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoCustomerOrderSkuRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerOrderSkuRankChart"
+});
+
+const props = defineProps<{
+	list: GaoCustomerOrderSkuRankView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = props.list.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getSkuName)),
+		legend: {
+			top: 0,
+			icon: "roundRect",
+			textStyle: { color: "#52607a" }
+		},
+		grid: {
+			top: 32,
+			left: 8,
+			right: 18,
+			bottom: 12,
+			containLabel: true
+		},
+		series: [
+			{
+				name: "直接购买",
+				type: "bar",
+				stack: "quantity",
+				data: list.map(item => getNumber(item.directBaseQuantity))
+			},
+			{
+				name: "套餐权益",
+				type: "bar",
+				stack: "quantity",
+				data: list.map(item => getNumber(item.packageBaseQuantity))
+			},
+			{
+				name: "待履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.reservedBaseQuantity))
+			},
+			{
+				name: "已履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.fulfilledBaseQuantity))
+			},
+			{
+				name: "可履约",
+				type: "bar",
+				stack: "fulfillment",
+				data: list.map(item => getNumber(item.availableBaseQuantity))
+			}
+		]
+	};
+});
+
+function getSkuName(item: GaoCustomerOrderSkuRankView): string {
+	return [item.skuName || item.skuCode || "未命名规格", item.specSummary].filter(Boolean).join(" · ");
+}
+</script>
diff --git a/src/pages/customer/component/CustomerRepeatDailyChart.vue b/src/pages/customer/component/CustomerRepeatDailyChart.vue
new file mode 100644
index 0000000..9469500
--- /dev/null
+++ b/src/pages/customer/component/CustomerRepeatDailyChart.vue
@@ -0,0 +1,61 @@
+<template>
+	<gao-chart-card
+		title="复购趋势"
+		caption="缺失日期按 0 展示"
+		:date-text-list="dateTextList"
+		:option="buildOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="18rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoCustomerRepeatDailyStatView } from "@/types/GaoChart";
+import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerRepeatDailyChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+	list: GaoCustomerRepeatDailyStatView[];
+	loading: boolean;
+}>();
+
+function buildOption(visibleDateTextList: string[]): EChartsOption {
+	const labelList = visibleDateTextList.map(item => item.slice(5));
+	return {
+		...buildAxisChartOption(labelList),
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisTick: { show: false },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		series: [
+			{
+				name: "客户数",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.customerCount))
+			},
+			{
+				name: "复购客户",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.repeatCustomerCount))
+			},
+			{
+				name: "复购订单",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.repeatOrderCount))
+			}
+		]
+	};
+}
+</script>
diff --git a/src/pages/customer/component/CustomerRepeatIntervalChart.vue b/src/pages/customer/component/CustomerRepeatIntervalChart.vue
new file mode 100644
index 0000000..96be3ff
--- /dev/null
+++ b/src/pages/customer/component/CustomerRepeatIntervalChart.vue
@@ -0,0 +1,43 @@
+<template>
+	<gao-chart-card
+		title="复购间隔"
+		caption="按间隔天数统计订单数"
+		:option="chartOption"
+		:loading="loading"
+		:has-data="list.length > 0"
+		height="18rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import GaoChartCard from "@/pages/product/component/GaoChartCard.vue";
+import type { GaoCustomerRepeatIntervalStatView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "CustomerRepeatIntervalChart"
+});
+
+const props = defineProps<{
+	list: GaoCustomerRepeatIntervalStatView[];
+	loading: boolean;
+}>();
+
+const chartOption = computed<EChartsOption>(() => {
+	const list = [...props.list].sort((left, right) => getNumber(left.intervalDays) - getNumber(right.intervalDays));
+	return {
+		...buildHorizontalBarOption(list.map(getIntervalText)),
+		legend: { show: false },
+		series: [{
+			name: "复购订单",
+			type: "bar",
+			data: list.map(item => getNumber(item.orderCount))
+		}]
+	};
+});
+
+function getIntervalText(item: GaoCustomerRepeatIntervalStatView): string {
+	return `${getNumber(item.intervalDays)} 天`;
+}
+</script>
diff --git a/src/pages/fulfillment/OrderFulfillmentCreate.vue b/src/pages/fulfillment/OrderFulfillmentCreate.vue
index ba81150..9ebd8b8 100644
--- a/src/pages/fulfillment/OrderFulfillmentCreate.vue
+++ b/src/pages/fulfillment/OrderFulfillmentCreate.vue
@@ -24,7 +24,7 @@
 					</div>
 					<div class="main">
 						<div class="title">
-							<strong v-text="item.productNameSnapshot" />
+							<strong v-text="getItemTitle(item)" />
 							<span v-text="getItemDescription(item)" />
 						</div>
 						<div class="input">
@@ -140,7 +140,12 @@ function getAvailableQuantity(item: GaoSalesOrderItem): string {
 }
 
 function getItemDescription(item: GaoSalesOrderItem): string {
-	return ` · 剩余 ${getAvailableQuantity(item)}`;
+	return ` · ${item.unitSnapshot || "业务单位"} · 剩余 ${getAvailableQuantity(item)}`;
+}
+
+function getItemTitle(item: GaoSalesOrderItem): string {
+	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
 }
 
 function fillAllQuantity(item: GaoSalesOrderItem): void {
diff --git a/src/pages/fulfillment/OrderFulfillmentDetail.vue b/src/pages/fulfillment/OrderFulfillmentDetail.vue
index 8f2f89b..b8eeb96 100644
--- a/src/pages/fulfillment/OrderFulfillmentDetail.vue
+++ b/src/pages/fulfillment/OrderFulfillmentDetail.vue
@@ -30,7 +30,7 @@
 					class="item"
 					v-for="item in fulfillment.itemList || []"
 					:key="item.id"
-					:title="item.productNameSnapshot"
+					:title="getItemTitle(item)"
 					:description="`${item.quantity} ${item.unitSnapshot}`"
 					:note="`待履约 ${item.reservedBefore || 0} → ${item.reservedAfter || 0}`"
 				>
@@ -174,6 +174,11 @@ const sourceItemType = computed<GaoSalesOrderItemType | undefined>(() => {
 	const sourceOrderItemId = fulfillment.value?.itemList?.[0]?.sourceOrderItemId;
 	return order.value?.itemList?.find(item => item.id === sourceOrderItemId)?.itemType;
 });
+
+function getItemTitle(item: NonNullable<OrderFulfillment["itemList"]>[number]): string {
+	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
+}
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) return;
diff --git a/src/pages/fulfillment/components/OrderFulfillmentListCell.vue b/src/pages/fulfillment/components/OrderFulfillmentListCell.vue
index d113d61..b890325 100644
--- a/src/pages/fulfillment/components/OrderFulfillmentListCell.vue
+++ b/src/pages/fulfillment/components/OrderFulfillmentListCell.vue
@@ -31,7 +31,7 @@
 			<div class="items">
 				<t-tag
 					v-for="(item, index) in itemList"
-					:key="item.id || `${item.productId}-${index}`"
+					:key="item.id || `${item.skuId}-${item.skuUnitId}-${index}`"
 					:content="getProductText(item)"
 					theme="primary"
 					variant="light"
@@ -101,9 +101,10 @@ const productSummaryText = computed(() => `共 ${itemList.value.length} 项 · 
 
 function getProductText(item: OrderFulfillmentItem): string {
 	const productName = item.productNameSnapshot || "未命名产品";
+	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
 	const quantity = getPackageQuantityText(item.quantity);
 	const unit = item.unitSnapshot ? ` ${item.unitSnapshot}` : "";
-	return `${productName} × ${quantity}${unit}`;
+	return `${productName}${skuText ? ` · ${skuText}` : ""} × ${quantity}${unit}`;
 }
 
 function getUserName(user: OrderFulfillment["operator"], userId: string | undefined, fallback: string): string {
diff --git a/src/pages/package/PackageConfigDetail.vue b/src/pages/package/PackageConfigDetail.vue
index 539f811..d722bd7 100644
--- a/src/pages/package/PackageConfigDetail.vue
+++ b/src/pages/package/PackageConfigDetail.vue
@@ -30,8 +30,8 @@
 				<t-cell
 					class="item"
 					v-for="item in config.itemList || []"
-					:title="item.productNameSnapshot"
-					:key="item.id || `${item.productId}-${item.productUnitId}`"
+					:title="getItemTitle(item)"
+					:key="item.id || `${item.skuId}-${item.skuUnitId}`"
 					:note="`${item.defaultQuantity} ${item.unitSnapshot || ''}${item.remark ? `｜${item.remark}` : ''}`"
 				>
 					<template #leftIcon>
@@ -50,7 +50,7 @@
 					</template>
 					<template #description>
 						<t-tag
-							:content="getProductTypeText(item.product?.productType)"
+							:content="item.skuCodeSnapshot || item.sku?.code || 'SKU'"
 							theme="primary"
 							variant="light"
 						/>
@@ -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, getProductTypeText } from "@/utils/product";
+import { getProductPhotoURL as getProductPhotoUrl } from "@/utils/product";
 
 defineOptions({ name: "PackageConfigDetail" });
 
@@ -113,7 +113,12 @@ function getStatusTheme(status?: PackageConfigStatus): "success" | "warning" | "
 }
 
 function getItemPhotoURL(item: PackageConfigItem): string {
-	return getProductPhotoUrl(item.product || {});
+	return getProductPhotoUrl(item.sku || {});
+}
+
+function getItemTitle(item: PackageConfigItem): string {
+	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
 }
 
 async function loadData(): Promise<void> {
diff --git a/src/pages/package/PackageConfigEdit.vue b/src/pages/package/PackageConfigEdit.vue
index 0063700..5646e27 100644
--- a/src/pages/package/PackageConfigEdit.vue
+++ b/src/pages/package/PackageConfigEdit.vue
@@ -34,7 +34,7 @@
 				>
 					<div class="header">
 						<span class="no" v-text="String(index + 1).padStart(2, '0')" />
-						<strong v-text="item.productNameSnapshot || '未选择产品'" />
+						<strong v-text="getItemTitle(item)" />
 						<t-button
 							v-if="1 < form.itemList.length"
 							theme="danger"
@@ -44,26 +44,15 @@
 						>删除</t-button>
 					</div>
 					<product-selector
-						:model-value="item.productId ? {productId: item.productId, productUnitId: item.productUnitId || ''} : undefined"
+						:model-value="item.skuId ? { skuId: item.skuId, skuUnitId: item.skuUnitId || '' } : undefined"
 						:selected-product="getProduct(item)"
 						label="产品"
 						placeholder="请选择产品"
 						required-mark
 						@update:model-value="applyProduct(index, $event)"
 					/>
-					<t-form-item v-if="item.productId" label="产品单位" required-mark>
-						<div v-if="getSaleableUnits(item).length" class="unit-list">
-							<t-button
-								v-for="unit in getSaleableUnits(item)"
-								:key="unit.id"
-								:theme="item.productUnitId === unit.id ? 'primary' : 'default'"
-								:variant="item.productUnitId === unit.id ? 'base' : 'outline'"
-								size="extra-small"
-								:content="unit.name"
-								@click="selectProductUnit(index, unit)"
-							/>
-						</div>
-						<span v-else class="unit-empty" v-text="'暂无可售单位'" />
+					<t-form-item v-if="item.skuId" label="SKU 单位" content-align="right">
+						<span v-text="getUnit(item)?.name || '未选择单位'" />
 					</t-form-item>
 					<t-form-item label="默认配额" content-align="right" required-mark>
 						<t-stepper
@@ -72,7 +61,7 @@
 							:max="Number.MAX_SAFE_INTEGER"
 							:min="getQuantityStep(item)"
 							:step="getQuantityStep(item)"
-							:integer="!getProduct(item)?.allowDecimalQuantity"
+							:integer="!getSku(item)?.allowDecimalQuantity"
 							theme="outline"
 						/>
 					</t-form-item>
@@ -122,7 +111,7 @@ import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoPackageConfig, PackageConfigItem, PackageConfigStatus } from "@/types/Package";
 import ProductAPI from "@/api/ProductAPI";
-import type { Product, ProductUnit } from "@/types/Product";
+import type { Product, ProductSku, ProductSkuUnit } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmountInput, getPackageConfigStatusText, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
 import { Message } from "@/utils/message";
@@ -178,13 +167,28 @@ function createItem(item?: Partial<PackageConfigItem>): PackageConfigFormItem {
 }
 
 const productCache = new Map<string, Product>();
+const skuCache = new Map<string, ProductSku>();
 
 function getProduct(item: PackageConfigFormItem): Product | undefined {
-	return productCache.get(item.productId || "");
+	const sku = getSku(item);
+	return productCache.get(sku?.productId || "");
+}
+
+function getSku(item: PackageConfigFormItem): ProductSku | undefined {
+	return skuCache.get(item.skuId || "") || item.sku;
+}
+
+function getUnit(item: PackageConfigFormItem): ProductSkuUnit | undefined {
+	return getSku(item)?.unitList?.find(unit => unit.id === item.skuUnitId);
+}
+
+function getItemTitle(item: PackageConfigFormItem): string {
+	const sku = getSku(item);
+	return sku?.specSummary || sku?.name || item.productNameSnapshot || "未选择产品";
 }
 
 function getQuantityStep(item: PackageConfigFormItem): number {
-	return getProductQuantityStep(getProduct(item));
+	return getProductQuantityStep(getSku(item));
 }
 
 const estimatedOriginalAmount = computed<number | undefined>(() => {
@@ -200,45 +204,29 @@ const estimatedOriginalAmount = computed<number | undefined>(() => {
 });
 const estimatedOriginalAmountText = computed(() => estimatedOriginalAmount.value === undefined ? "待完善" : `￥${formatProductAmount(estimatedOriginalAmount.value)}`);
 
-async function applyProduct(index: number, value?: { productId: string; productUnitId: string }): Promise<void> {
+async function applyProduct(index: number, value?: { skuId: string; skuUnitId: string }): Promise<void> {
 	if (!value) {
 		return;
 	}
-	const product = productCache.get(value.productId) || await ProductAPI.detail(value.productId);
-	productCache.set(value.productId, product);
-	const saleableUnits = (product.unitList || []).filter(unit => unit.allowSale !== false && unit.id);
-	const productUnitId = saleableUnits.length < 2 ? saleableUnits[0]?.id || "" : value.productUnitId;
-	const unit = saleableUnits.find(item => item.id === productUnitId);
+	const sku = skuCache.get(value.skuId) || await ProductAPI.skuDetail(value.skuId);
+	skuCache.set(value.skuId, sku);
+	const product = productCache.get(sku.productId || "") || await ProductAPI.detail(sku.productId || "");
+	productCache.set(sku.productId || "", product);
+	const unit = (sku.unitList || []).find(item => item.id === value.skuUnitId);
 	Object.assign(form.itemList[index], {
-		productId: value.productId,
-		productUnitId,
+		skuId: value.skuId,
+		skuUnitId: value.skuUnitId,
 		productNameSnapshot: product.name,
+		skuNameSnapshot: sku.name,
+		specSummarySnapshot: sku.specSummary,
 		unitSnapshot: unit?.name || "",
 		baseQuantityPerUnitSnapshot: unit?.baseQuantityPerUnit
 	});
 }
 
-function getSaleableUnits(item: PackageConfigFormItem): ProductUnit[] {
-	return (productCache.get(item.productId || "")?.unitList || []).filter(unit => unit.allowSale !== false && unit.id);
-}
-
-function selectProductUnit(index: number, unit: ProductUnit): void {
-	const item = form.itemList[index];
-	const product = productCache.get(item.productId || "");
-	if (!product?.id || !unit.id) {
-		return;
-	}
-	Object.assign(item, {
-		productUnitId: unit.id,
-		productNameSnapshot: product.name,
-		unitSnapshot: unit.name,
-		baseQuantityPerUnitSnapshot: unit.baseQuantityPerUnit
-	});
-}
-
 function calculateOriginalAmount(item: PackageConfigFormItem): number | undefined {
 	const quantity = normalizePackageQuantity(item.defaultQuantity ?? "");
-	const salePrice = productCache.get(item.productId || "")?.unitList?.find(unit => unit.id === item.productUnitId)?.salePrice;
+	const salePrice = getUnit(item)?.salePrice;
 	if (!quantity || quantity === "0" || salePrice === undefined || salePrice === null) {
 		return undefined;
 	}
@@ -331,13 +319,13 @@ function validateForm(): boolean {
 	const keySet = new Set<string>();
 	for (const item of form.itemList) {
 		const quantity = normalizePackageQuantity(item.defaultQuantity ?? "");
-		const key = `${item.productId}\u0000${item.productUnitId}`;
-		if (!item.productId || !item.productUnitId || !quantity || quantity === "0") {
-			Message.warning("产品单位和正数量不能为空");
+		const key = `${item.skuId}\u0000${item.skuUnitId}`;
+		if (!item.skuId || !item.skuUnitId || !quantity || quantity === "0") {
+			Message.warning("SKU 单位和正数量不能为空");
 			return false;
 		}
-		if (getProduct(item) && !getProduct(item)!.allowDecimalQuantity && quantity.includes(".")) {
-			Message.warning("该产品不允许小数数量");
+		if (getSku(item) && !getSku(item)!.allowDecimalQuantity && quantity.includes(".")) {
+			Message.warning("该 SKU 不允许小数数量");
 			return false;
 		}
 		if (keySet.has(key)) {
@@ -371,8 +359,8 @@ async function save(): Promise<void> {
 			beginAt: form.beginAt ?? null,
 			endAt: form.endAt ?? null,
 			itemList: form.itemList.map((item, index) => ({
-				productId: item.productId!,
-				productUnitId: item.productUnitId!,
+				skuId: item.skuId!,
+				skuUnitId: item.skuUnitId!,
 				defaultQuantity: normalizePackageQuantity(item.defaultQuantity ?? "")!,
 				sort: index,
 				remark: item.remark?.trim() || null
@@ -408,9 +396,13 @@ async function loadData(): Promise<void> {
 	}
 	const result = await PackageAPI.configDetail(routeId.value);
 	const itemList = (result.itemList || []).map(createItem);
-	const productIdList = [...new Set(itemList.map(item => item.productId).filter((id): id is string => !!id))];
-	await Promise.all(productIdList.map(async productId => {
-		productCache.set(productId, await ProductAPI.detail(productId));
+	const skuIdList = [...new Set(itemList.map(item => item.skuId).filter((id): id is string => !!id))];
+	await Promise.all(skuIdList.map(async skuId => {
+		const sku = itemList.find(item => item.skuId === skuId)?.sku || await ProductAPI.skuDetail(skuId);
+		skuCache.set(skuId, sku);
+		if (sku.productId) {
+			productCache.set(sku.productId, await ProductAPI.detail(sku.productId));
+		}
 	}));
 	Object.assign(form, {
 		id: result.id || routeId.value,
diff --git a/src/pages/package/PackageConfigList.vue b/src/pages/package/PackageConfigList.vue
index a416bab..5ce7ba8 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.productId}-${productItem.productUnitId}`"
+						:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
 										:content="getProductRightText(productItem)"
 										theme="primary"
 										variant="light"
@@ -193,7 +193,8 @@ function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning
 
 function getProductRightText(item: PackageConfigItem): string {
 	const quantity = getPackageQuantityText(item.defaultQuantity);
-	return `${item.productNameSnapshot || "未命名产品"} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
 }
 
 onMounted(async () => {
diff --git a/src/pages/package/PackagePurchase.vue b/src/pages/package/PackagePurchase.vue
index cb25c2d..9e361ea 100644
--- a/src/pages/package/PackagePurchase.vue
+++ b/src/pages/package/PackagePurchase.vue
@@ -75,7 +75,7 @@
 						</div>
 						<t-form-item
 							v-for="(item, index) in packagePurchaseItemList"
-							:key="`${index}-${item.productId}-${item.productUnitId}`"
+							:key="`${index}-${item.skuId}-${item.skuUnitId}`"
 							class="item"
 						>
 							<template #label>
@@ -374,21 +374,21 @@ const {
 });
 
 function getItemLabel(item: PackagePurchaseItem): string {
-	const configItem = config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId);
-	return configItem ? `${configItem.productNameSnapshot || "未命名产品"}` : "产品权益";
+	const configItem = config.value?.itemList?.find(configItem => configItem.skuId === item.skuId && configItem.skuUnitId === item.skuUnitId);
+	return configItem ? `${configItem.productNameSnapshot || "未命名产品"} · ${configItem.skuNameSnapshot || configItem.specSummarySnapshot || "默认 SKU"}` : "产品权益";
 }
 
 function getItemName(item: PackagePurchaseItem): string {
-	return config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId)?.productNameSnapshot || "未命名产品";
+	return config.value?.itemList?.find(configItem => configItem.skuId === item.skuId && configItem.skuUnitId === item.skuUnitId)?.productNameSnapshot || "未命名产品";
 }
 
 function getItemPhotoURL(item: PackagePurchaseItem): string {
-	const configItem = config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId);
-	return getProductPhotoURL(configItem?.product || {});
+	const configItem = config.value?.itemList?.find(configItem => configItem.skuId === item.skuId && configItem.skuUnitId === item.skuUnitId);
+	return getProductPhotoURL(configItem?.sku || {});
 }
 
 function getItemUnit(item: PackagePurchaseItem): string {
-	return config.value?.itemList?.find(configItem => configItem.productId === item.productId && configItem.productUnitId === item.productUnitId)?.unitSnapshot || "";
+	return config.value?.itemList?.find(configItem => configItem.skuId === item.skuId && configItem.skuUnitId === item.skuUnitId)?.unitSnapshot || "";
 }
 
 function updateItemQuantity(index: number, value: string | number): void {
diff --git a/src/pages/package/usePackagePurchase.ts b/src/pages/package/usePackagePurchase.ts
index 1cf7738..bab5bc7 100644
--- a/src/pages/package/usePackagePurchase.ts
+++ b/src/pages/package/usePackagePurchase.ts
@@ -42,8 +42,8 @@ export function usePackagePurchase(options: UsePackagePurchaseOptions) {
 		}
 		saleAmountText.value = formatPackageAmountInput(config.standardAmount);
 		packagePurchaseItemList.value = (config.itemList || []).map((item, index) => ({
-			productId: item.productId,
-			productUnitId: item.productUnitId,
+			skuId: item.skuId,
+			skuUnitId: item.skuUnitId,
 			totalQuantity: normalizePackageQuantity(item.defaultQuantity) || "",
 			sort: item.sort ?? index,
 			remark: item.remark ?? null
@@ -79,8 +79,8 @@ export function usePackagePurchase(options: UsePackagePurchaseOptions) {
 			purchasedAt: options.buildRegisteredAt(),
 			attachmentList: options.buildAttachments(),
 			itemList: packagePurchaseItemList.value.length ? packagePurchaseItemList.value.map((item, index) => ({
-				productId: item.productId,
-				productUnitId: item.productUnitId,
+				skuId: item.skuId,
+				skuUnitId: item.skuUnitId,
 				totalQuantity: normalizePackageQuantity(item.totalQuantity)!,
 				sort: item.sort ?? index,
 				remark: item.remark ?? null
@@ -112,8 +112,13 @@ export function usePackagePurchase(options: UsePackagePurchaseOptions) {
 		}
 		for (const item of packagePurchaseItemList.value) {
 			const quantity = normalizePackageQuantity(item.totalQuantity);
-			if (!item.productId || !item.productUnitId || !quantity || quantity === "0") {
-				Message.warning("产品单位和正数量不能为空");
+			if (!item.skuId || !item.skuUnitId || !quantity || quantity === "0") {
+				Message.warning("SKU 单位和正数量不能为空");
+				return false;
+			}
+			const configItem = options.config.value.itemList?.find(source => source.skuId === item.skuId && source.skuUnitId === item.skuUnitId);
+			if (configItem?.sku && !configItem.sku.allowDecimalQuantity && quantity.includes(".")) {
+				Message.warning("该 SKU 不允许小数数量");
 				return false;
 			}
 		}
diff --git a/src/pages/product/ProductDataCharts.vue b/src/pages/product/ProductDataCharts.vue
index 36980fa..f52897c 100644
--- a/src/pages/product/ProductDataCharts.vue
+++ b/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] {
diff --git a/src/pages/product/ProductDetail.vue b/src/pages/product/ProductDetail.vue
index bce5e4b..e38ee45 100644
--- a/src/pages/product/ProductDetail.vue
+++ b/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]
diff --git a/src/pages/product/ProductEdit.vue b/src/pages/product/ProductEdit.vue
index aa2696a..77dfc26 100644
--- a/src/pages/product/ProductEdit.vue
+++ b/src/pages/product/ProductEdit.vue
@@ -2,57 +2,31 @@
 	<div v-can="savePermissionCode" class="product-edit">
 		<t-form class="form" label-align="left" label-width="6rem" v-entrance-transition>
 			<t-form-item label="产品编码" required-mark help="使用英语、拼音或唯一数字">
-				<t-input
-					v-model="form.code"
-					borderless
-					maxlength="64"
-					placeholder="门店内唯一编码"
-				/>
+				<t-input v-model="form.code" borderless maxlength="64" placeholder="门店内唯一编码" />
 			</t-form-item>
 			<t-form-item label="产品名称" required-mark>
-				<t-input
-					v-model="form.name"
-					borderless
-					maxlength="128"
-					placeholder="请输入产品名称"
-				/>
+				<t-input v-model="form.name" borderless maxlength="128" placeholder="请输入产品名称" />
 			</t-form-item>
-			<t-form-item
-				label="产品类型"
-				arrow
-				content-align="right"
-				@click="openTypePicker"
-			>
+			<t-form-item label="产品类型" arrow content-align="right" @click="openTypePicker">
 				<span class="picker-text" v-text="getProductTypeText(form.productType)" />
 			</t-form-item>
 			<t-form-item label="产品分类" arrow content-align="right" @click="openCategoryPicker">
 				<span class="picker-text" v-text="selectedCategoryName" />
 			</t-form-item>
 			<t-form-item label="库存管理" content-align="right">
-				<t-switch size="small" v-model="form.stockEnabled" :disabled="form.productType === 'SERVICE'" />
-			</t-form-item>
-			<t-form-item label="允许小数" content-align="right">
-				<t-switch size="small" v-model="form.allowDecimalQuantity" />
-			</t-form-item>
-			<t-form-item v-if="form.stockEnabled" label="最低库存" help="基础单位数量，最多三位小数">
-				<t-input
-					v-model="minStockQuantityText"
-					type="number"
-					align="right"
-					borderless
-				/>
+				<t-switch v-model="form.stockEnabled" size="small" :disabled="form.productType === 'SERVICE'" />
 			</t-form-item>
 			<t-form-item label="状态" arrow content-align="right" @click="openStatusPicker">
 				<span class="picker-text" v-text="getProductStatusText(form.status)" />
 			</t-form-item>
 			<t-form-item label="备注">
-				<t-textarea v-model.trim="form.remark" borderless maxlength="255" autosize placeholder="可填写产品说明" />
+				<t-textarea v-model="form.remark" borderless maxlength="255" autosize placeholder="可填写产品说明" />
 			</t-form-item>
 			<t-form-item label-width="0">
 				<photo-scroller
 					v-model="attachmentUrlList"
 					v-model:photo-items="attachmentItemList"
-					title="附件列表（取第一张图片作为封面）"
+					title="产品公共图片及附件"
 					:edit-mode="true"
 					:loading="isAttachmentUploading"
 					:show-viewer-actions="false"
@@ -61,7 +35,7 @@
 					@add-other="openAttachmentPicker('OTHER')"
 				/>
 			</t-form-item>
-			<t-form-item label="使用纯色作为封面" label-width="8rem" content-align="right">
+			<t-form-item label="纯色封面" label-width="8rem" content-align="right">
 				<t-button
 					size="extra-small"
 					variant="outline"
@@ -80,74 +54,116 @@
 				</t-button>
 			</t-form-item>
 		</t-form>
-		<card-container
-			title="产品单位"
-			description="必须有且仅有一个基础单位；销售和库存业务只能选择允许的单位"
-			v-entrance-transition="70"
-		>
-			<div class="units">
-				<t-form
-					class="unit"
-					v-for="(unit, index) in form.unitList"
-					:key="unit.clientKey"
-				>
-					<t-form-item label="单位名称" required-mark>
-						<t-input v-model.trim="unit.name" borderless maxlength="32" placeholder="如 瓶、次" />
+
+		<card-container title="产品规格" description="无多规格产品无需配置规格；有规格时每条 SKU 明细必须覆盖全部规格项" v-entrance-transition="70">
+			<div class="spec-list">
+				<t-form v-for="(spec, specIndex) in form.specList" :key="spec.clientKey" class="form spec">
+					<t-form-item label="名称" label-width="2.5rem">
+						<t-input
+							class="name"
+							v-model="spec.name"
+							borderless
+							maxlength="32"
+							:readonly="!!spec.id"
+							placeholder="如 颜色、尺寸"
+						/>
 						<t-button
-							v-if="1 < form.unitList.length"
+							v-if="!spec.id"
 							theme="danger"
 							variant="text"
 							size="extra-small"
 							content="删除"
-							@click="removeUnit(index)"
+							@click="removeSpec(specIndex)"
 						/>
 					</t-form-item>
-					<t-form-item label="基础单位" content-align="right">
-						<t-switch
-							size="small"
-							v-model="unit.isBase"
-							:disabled="form.unitList.length === 1"
-							@change="setBaseUnit(index)"
-						/>
+					<t-form-item v-if="getNamedSpecValues(spec).length" label-width="0">
+						<div class="tags">
+							<t-tag
+								v-for="value in getNamedSpecValues(spec)"
+								:key="value.clientKey"
+								class="tag"
+								variant="light-outline"
+								:content="value.name"
+								closable
+								@close="removeSpecValue(spec, spec.valueList.indexOf(value))"
+							/>
+						</div>
 					</t-form-item>
-					<t-form-item
-						label="基础单位数量"
-						help="每个单位对应的基础单位数量"
-						label-width="7rem"
-						required-mark
-					>
+					<t-form-item label="规格值" label-width="3.5rem">
 						<t-input
-							v-model="unit.baseQuantityPerUnit"
-							type="number"
-							align="right"
+							v-model.trim="specValueDraftMap[spec.clientKey]"
 							borderless
-							:disabled="form.unitList.length === 1"
-						/>
-					</t-form-item>
-					<t-form-item label="建议售价">
-						<t-input
-							v-model="unit.salePriceText"
-							type="number"
-							align="right"
-							borderless
-							placeholder="金额（元）"
-						/>
-					</t-form-item>
-					<t-form-item label="允许采购" content-align="right">
-						<t-switch size="small" v-model="unit.allowPurchase" />
-					</t-form-item>
-					<t-form-item label="允许销售" content-align="right">
-						<t-switch size="small" v-model="unit.allowSale" />
+							maxlength="32"
+							placeholder="输入规格值"
+						>
+							<template #suffix-icon>
+								<t-button
+									size="extra-small"
+									theme="light"
+									content="添加"
+									@click="addSpecValue(spec)"
+								/>
+							</template>
+						</t-input>
 					</t-form-item>
 				</t-form>
 				<t-button
-					class="cell-button"
+					class="add"
+					size="small"
 					theme="primary"
-					content="添加业务单位"
-					@click="addUnit"
+					variant="dashed"
+					content="添加规格项"
+					@click="addSpec"
 				/>
 			</div>
 		</card-container>
+		<card-container
+			class="sku-wrap"
+			title="SKU 明细"
+			description="每条 SKU 明细都是独立的销售、库存和履约单元；生成后可移除不需要的组合，点列表项配置具体内容"
+			v-entrance-transition="140"
+		>
+			<div class="content-wrap">
+				<t-cell-group theme="card">
+					<t-cell title="销售单位">
+						<template #note>
+							<t-button
+								variant="outline"
+								size="extra-small"
+								content="统一配置销售单位"
+								:disabled="!form.skuList.length"
+								@click="openBatchUnitEditor"
+							/>
+						</template>
+					</t-cell>
+					<t-cell title="生成">
+						<template #note>
+							<t-button
+								theme="primary"
+								size="extra-small"
+								:content="generateSkuButtonText"
+								:disabled="!canGenerateSku"
+								@click="regenerateSkuList"
+							/>
+						</template>
+					</t-cell>
+					<t-cell title="当前 SKU" :note="`${form.skuList.length} 个`" />
+				</t-cell-group>
+				<t-cell-group v-if="form.skuList.length" theme="card" class="sku-list">
+					<product-sku-editor
+						v-for="(sku, skuIndex) in form.skuList"
+						:key="sku.clientKey"
+						:product-type="form.productType"
+						v-model:sku="form.skuList[skuIndex]"
+						:sku-index="skuIndex"
+						:spec-list="form.specList"
+						@configure-units="openUnitEditor(sku)"
+						@remove="removeSku(skuIndex)"
+					/>
+				</t-cell-group>
+				<div v-else class="load-state" v-text="form.specList.length ? '请先添加规格值，再生成 SKU 组合' : '正在准备默认 SKU'" />
+			</div>
+		</card-container>
 		<t-popup v-model="typePickerVisible" placement="bottom">
 			<t-picker v-model="typeDraft" :columns="productTypeOptions" title="产品类型" @cancel="typePickerVisible = false" @confirm="confirmType" />
 		</t-popup>
@@ -157,6 +173,21 @@
 		<t-popup v-model="statusPickerVisible" placement="bottom">
 			<t-picker v-model="statusDraft" :columns="statusOptions" title="产品状态" @cancel="statusPickerVisible = false" @confirm="confirmStatus" />
 		</t-popup>
+		<product-sku-unit-editor
+			v-model="unitEditorVisible"
+			:product-type="form.productType"
+			v-model:sku="editingSku"
+			:spec-list="form.specList"
+			@close="closeUnitEditor"
+		/>
+		<product-sku-unit-batch-editor
+			v-model="batchUnitEditorVisible"
+			v-model:unit-list="batchUnitList"
+			:product-type="form.productType"
+			:sku-count="form.skuList.length"
+			@apply="applyBatchUnitTemplate"
+			@close="closeBatchUnitEditor"
+		/>
 		<bottom-popup
 			v-model="coverColorPickerVisible"
 			title="颜色选择"
@@ -164,14 +195,7 @@
 			@left-button-click="cancelCoverColorPicker"
 			@right-button-click="confirmCoverColorPicker"
 		>
-			<t-color-picker
-				v-if="coverColorPickerVisible"
-				v-model="coverColorDraft"
-				format="HEX"
-				type="multiple"
-				:swatch-colors="colorSwatchList"
-				@palette-bar-change="updateCoverColorDraftFromPalette"
-			/>
+			<t-color-picker v-if="coverColorPickerVisible" v-model="coverColorDraft" format="HEX" type="multiple" :swatch-colors="colorSwatchList" @palette-bar-change="updateCoverColorDraftFromPalette" />
 		</bottom-popup>
 		<input ref="attachmentInputRef" class="file-input" type="file" accept="image/*" @change="handleAttachmentSelected" />
 	</div>
@@ -183,9 +207,13 @@ import type { ColorObject } from "tdesign-mobile-vue";
 import { type Attachment, AttachmentAPI, useUserStore } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
+import ProductSkuEditor from "@/pages/product/component/ProductSkuEditor.vue";
+import ProductSkuUnitEditor from "@/pages/product/component/ProductSkuUnitEditor.vue";
+import ProductSkuUnitBatchEditor from "@/pages/product/component/ProductSkuUnitBatchEditor.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { PhotoItem } from "@/types/Photo";
-import type { Product, ProductAttachmentType, ProductCategory, ProductUnit } from "@/types/Product";
+import type { Product, ProductAttachmentType, ProductCategory, ProductSku, ProductSkuUnit, ProductSpec } from "@/types/Product";
+import type { ProductAttachmentItem, ProductForm, ProductSkuForm as SkuForm, ProductSkuUnitForm as UnitForm, ProductSpecForm as SpecForm, ProductSpecValueForm as SpecValueForm } from "@/types/ProductEditor";
 import { compressUploadImage } from "@/utils/imageCompression";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
@@ -194,13 +222,6 @@ import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
 type PickerValue = string | number;
-type ProductUnitForm = ProductUnit & { clientKey: string; salePriceText: string };
-type ProductAttachmentItem = PhotoItem & {
-	attachment?: Attachment;
-	attachType: ProductAttachmentType;
-	isSolidColorCover?: boolean;
-	solidColor?: string;
-};
 
 const SOLID_COLOR_COVER_PURPOSE = "PRODUCT_SOLID_COLOR_COVER";
 const DEFAULT_COVER_COLOR = "#2F88FF";
@@ -215,17 +236,17 @@ const routeId = computed(() => String(route.params.id || ""));
 const isCreateMode = computed(() => !routeId.value);
 const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.product.create : permissionCodes.product.update);
 const isSaving = ref(false);
-const form = reactive<Product & { unitList: ProductUnitForm[] }>({
+const form = reactive<ProductForm>({
 	id: undefined,
 	code: "",
 	name: "",
 	productType: "GOODS",
 	stockEnabled: true,
-	allowDecimalQuantity: false,
 	status: "ACTIVE",
-	unitList: []
+	specList: [],
+	skuList: [],
+	remark: null
 });
-const minStockQuantityText = ref("0");
 const categoryList = ref<ProductCategory[]>([]);
 const typePickerVisible = ref(false);
 const categoryPickerVisible = ref(false);
@@ -244,90 +265,189 @@ const productTypeOptions = [
 	{ label: "消耗品", value: "CONSUMABLE" }
 ];
 const categoryOptions = computed(() => [{ label: "不设置分类", value: "" }, ...categoryList.value.map(item => ({ label: item.name || "未命名分类", value: item.id || "" }))]);
-const statusOptions = [
-	{ label: "启用", value: "ACTIVE" },
-	{ label: "停用", value: "INACTIVE" }
-];
-const colorSwatchList = [
-	"#2F88FF",
-	"#0EA5E9",
-	"#10B981",
-	"#22C55E",
-	"#F59E0B",
-	"#F97316",
-	"#EF4444",
-	"#EC4899",
-	"#8B5CF6",
-	"#64748B"
-];
+const statusOptions = [{ label: "启用", value: "ACTIVE" }, { label: "停用", value: "INACTIVE" }];
+const colorSwatchList = ["#2F88FF", "#0EA5E9", "#10B981", "#22C55E", "#F59E0B", "#F97316", "#EF4444", "#EC4899", "#8B5CF6", "#64748B"];
 const selectedCategoryName = computed(() => categoryList.value.find(item => item.id === form.categoryId)?.name || "不设置分类");
 const attachmentAddActions = [
-	{
-		icon: "camera",
-		text: "产品图片",
-		emit: "add-photo",
-		theme: "primary"
-	},
-	{
-		icon: "file-attachment",
-		text: "其他文件",
-		emit: "add-other",
-		theme: "default"
-	}
+	{ icon: "camera", text: "产品图片", emit: "add-photo", theme: "primary" },
+	{ icon: "file-attachment", text: "其他文件", emit: "add-other", theme: "default" }
 ] as const;
 const attachmentItemList = ref<ProductAttachmentItem[]>([]);
 const attachmentUrlList = computed<string[]>({
-	get() {
-		return attachmentItemList.value.map(item => item.url);
-	},
-	set(value) {
+	get: () => attachmentItemList.value.map(item => item.url),
+	set: value => {
 		const urlSet = new Set(value);
 		attachmentItemList.value = attachmentItemList.value.filter(item => urlSet.has(item.url));
 	}
 });
 const solidColorCoverColor = computed(() => attachmentItemList.value.find(item => item.isSolidColorCover)?.solidColor || "");
+const skuCombinationCount = computed(() => {
+	if (!form.specList.length) {
+		return 1;
+	}
+	const valueCountList = form.specList.map(spec => spec.valueList.filter(value => value.enabled !== false && !!value.name.trim()).length);
+	if (valueCountList.some(count => !(0 < count))) {
+		return 0;
+	}
+	return valueCountList.reduce((total, count) => total * count, 1);
+});
+const canGenerateSku = computed(() => 0 < skuCombinationCount.value);
+const generateSkuButtonText = computed(() => `根据规格组合生成 SKU（${skuCombinationCount.value} 个）`);
+const specValueDraftMap = reactive<Record<string, string>>({});
+const unitEditorVisible = ref(false);
+const editingSku = ref<SkuForm>();
+const batchUnitEditorVisible = ref(false);
+const batchUnitList = ref<UnitForm[]>([]);
+const removedSkuKeySet = new Set<string>();
+const removedSkuMap = new Map<string, SkuForm>();
 
-function createUnit(unit?: Partial<ProductUnit>): ProductUnitForm {
+function createUnit(unit?: Partial<ProductSkuUnit>, defaultName = "件"): UnitForm {
 	return {
 		...unit,
+		id: unit?.id,
 		clientKey: window.crypto.randomUUID(),
-		name: unit?.name || "",
+		name: unit?.name || defaultName,
 		baseQuantityPerUnit: unit?.baseQuantityPerUnit ?? "1",
 		salePriceText: unit?.salePrice === null || unit?.salePrice === undefined ? "" : formatProductAmount(unit.salePrice),
-		isBase: unit?.isBase ?? false,
+		isBase: unit?.isBase ?? true,
 		allowPurchase: unit?.allowPurchase ?? form.productType !== "SERVICE",
 		allowSale: unit?.allowSale ?? true,
 		sort: unit?.sort ?? 0
 	};
 }
 
-function addUnit(): void {
-	form.unitList.push(createUnit({
-		isBase: !form.unitList.length,
-		baseQuantityPerUnit: !form.unitList.length ? "1" : ""
+function createSku(sku?: Partial<ProductSku>): SkuForm {
+	const sourceUnitList = sku?.unitList || [];
+	const photoItemList = (sku?.attachmentList || []).filter(item => !!item.id).map(item => ({
+		attachment: item,
+		attachType: item.attachType || "PHOTO",
+		previewUrl: getAttachmentReadURL(item.id || ""),
+		url: getAttachmentReadURL(item.id || "", 90)
 	}));
+	return {
+		...sku,
+		id: sku?.id,
+		clientKey: window.crypto.randomUUID(),
+		code: sku?.code || form.code,
+		name: sku?.name || form.name,
+		specSummary: sku?.specSummary || "",
+		stockEnabled: sku?.stockEnabled ?? form.stockEnabled,
+		allowDecimalQuantity: sku?.allowDecimalQuantity ?? false,
+		status: sku?.status || "ACTIVE",
+		minStockQuantityText: sku?.minStockQuantity === null || sku?.minStockQuantity === undefined ? "" : String(sku.minStockQuantity),
+		unitList: sourceUnitList.length ? sourceUnitList.map(unit => createUnit(unit)) : [createUnit({ isBase: true, baseQuantityPerUnit: "1" })],
+		photoItemList
+	};
 }
 
-function removeUnit(index: number): void {
-	if (form.unitList.length < 2) {
-		Message.warning("产品至少需要一个单位");
+function createSpec(spec?: Partial<ProductSpec>): SpecForm {
+	return {
+		...spec,
+		id: spec?.id,
+		clientKey: window.crypto.randomUUID(),
+		name: spec?.name || "",
+		valueList: (spec?.valueList || []).map(value => ({ ...value, id: value.id, clientKey: window.crypto.randomUUID(), name: value.name || "", enabled: value.enabled ?? true }))
+	};
+}
+
+function addSpec(): void {
+	const spec = createSpec();
+	form.specList.push(spec);
+	specValueDraftMap[spec.clientKey] = "";
+}
+
+function removeSpec(index: number): void {
+	if (form.specList[index]?.id) {
+		Message.warning("已保存的规格项不能删除，请先停用相关 SKU");
 		return;
 	}
-	const wasBase = form.unitList[index]?.isBase;
-	form.unitList.splice(index, 1);
-	if (wasBase && form.unitList[0]) {
-		form.unitList[0].isBase = true;
-		form.unitList[0].baseQuantityPerUnit = "1";
+	const [spec] = form.specList.splice(index, 1);
+	if (spec) {
+		delete specValueDraftMap[spec.clientKey];
 	}
 }
 
-function setBaseUnit(index: number): void {
-	form.unitList.forEach((unit, unitIndex) => {
-		unit.isBase = unitIndex === index;
+function addSpecValue(spec: SpecForm): void {
+	const name = specValueDraftMap[spec.clientKey]?.trim() || "";
+	if (!name) {
+		Message.warning("请输入规格值");
+		return;
+	}
+	if (spec.valueList.some(value => value.name.trim() === name)) {
+		Message.warning("同一规格项的规格值不能重复");
+		return;
+	}
+	spec.valueList.push({ clientKey: window.crypto.randomUUID(), name, enabled: true });
+	specValueDraftMap[spec.clientKey] = "";
+}
+
+function getNamedSpecValues(spec: SpecForm): SpecValueForm[] {
+	return spec.valueList.filter(value => !!value.name.trim());
+}
+
+function removeSpecValue(spec: SpecForm, index: number): void {
+	if (spec.valueList[index]?.id) {
+		Message.warning("已保存的规格值不能删除");
+		return;
+	}
+	spec.valueList.splice(index, 1);
+}
+
+function openUnitEditor(sku: SkuForm): void {
+	editingSku.value = sku;
+	unitEditorVisible.value = true;
+}
+
+function closeUnitEditor(): void {
+	unitEditorVisible.value = false;
+	editingSku.value = undefined;
+}
+
+function openBatchUnitEditor(): void {
+	const sourceSku = form.skuList[0];
+	if (!sourceSku) {
+		return;
+	}
+	batchUnitList.value = sourceSku.unitList.map(unit => ({ ...unit, id: undefined, skuId: undefined, clientKey: window.crypto.randomUUID() }));
+	batchUnitEditorVisible.value = true;
+}
+
+function closeBatchUnitEditor(): void {
+	batchUnitEditorVisible.value = false;
+}
+
+function applyBatchUnitTemplate(): void {
+	const templateList = batchUnitList.value;
+	form.skuList.forEach(sku => {
+		const oldUnitList = sku.unitList;
+		sku.unitList = templateList.map((unit, unitIndex) => ({
+			...unit,
+			id: oldUnitList[unitIndex]?.id,
+			skuId: sku.id,
+			clientKey: window.crypto.randomUUID(),
+			sort: unitIndex
+		}));
 	});
-	const unit = form.unitList[index];
-	if (unit) {
-		unit.baseQuantityPerUnit = "1";
+	Message.success(`已为 ${form.skuList.length} 个 SKU 统一配置销售单位`);
+}
+
+function removeSku(index: number): void {
+	const sku = form.skuList[index];
+	if (!sku) {
+		return;
+	}
+	if (form.skuList.length < 2) {
+		Message.warning("产品至少需要一个 SKU");
+		return;
+	}
+	if (form.specList.length && sku.specValueIdList?.length) {
+		const key = getCombinationKeyByIdList(sku.specValueIdList);
+		removedSkuKeySet.add(key);
+		removedSkuMap.set(key, sku);
+	}
+	form.skuList.splice(index, 1);
+	if (sku.id) {
+		Message.success("SKU 已移除，保存后将停用");
 	}
 }
 
@@ -342,12 +462,9 @@ function confirmType(value: Array<string | number>): void {
 		form.productType = type;
 		if (type === "SERVICE") {
 			form.stockEnabled = false;
-			form.unitList.forEach(unit => {
-				unit.allowPurchase = false;
-			});
-		} else if (form.stockEnabled) {
-			form.unitList.forEach(unit => {
-				unit.allowPurchase = true;
+			form.skuList.forEach(sku => {
+				sku.stockEnabled = false;
+				sku.unitList.forEach(unit => { unit.allowPurchase = false; });
 			});
 		}
 	}
@@ -404,7 +521,6 @@ function createSolidColorPNG(color: string): Promise<File> {
 	if (!context) {
 		return Promise.reject(new Error("纯色封面生成失败"));
 	}
-
 	context.fillStyle = color;
 	context.fillRect(0, 0, 1, 1);
 	return new Promise((resolve, reject) => {
@@ -413,7 +529,6 @@ function createSolidColorPNG(color: string): Promise<File> {
 				reject(new Error("纯色封面生成失败"));
 				return;
 			}
-
 			resolve(new File([blob], `product-cover-${Date.now()}.png`, { type: "image/png" }));
 		}, "image/png");
 	});
@@ -428,7 +543,6 @@ async function confirmCoverColorPicker(): Promise<void> {
 		coverColorPickerVisible.value = false;
 		return;
 	}
-
 	coverColorPickerVisible.value = false;
 	isAttachmentUploading.value = true;
 	try {
@@ -436,16 +550,14 @@ async function confirmCoverColorPicker(): Promise<void> {
 		if (!tempFile?.id) {
 			throw new Error("纯色封面上传失败");
 		}
-		attachmentItemList.value = [
-			{
-				attachType: "PHOTO",
-				isSolidColorCover: true,
-				solidColor: color,
-				tempFileId: tempFile.id,
-				url: AttachmentAPI.getTempReadURL(tempFile.id)
-			},
-			...attachmentItemList.value.filter(item => !item.isSolidColorCover)
-		];
+		const coverItem: ProductAttachmentItem = {
+			attachType: "PHOTO",
+			isSolidColorCover: true,
+			solidColor: color,
+			tempFileId: tempFile.id,
+			url: AttachmentAPI.getTempReadURL(tempFile.id)
+		};
+		attachmentItemList.value = [coverItem, ...attachmentItemList.value.filter(item => !item.isSolidColorCover)];
 	} catch (error) {
 		Message.error(getErrorMessage(error, "纯色封面上传失败"));
 	} finally {
@@ -459,16 +571,11 @@ async function handleAttachmentSelected(event: Event): Promise<void> {
 	if (!file) {
 		return;
 	}
-
 	isAttachmentUploading.value = true;
 	try {
 		const tempFile = (await AttachmentAPI.upload(await compressUploadImage(file)))[0];
 		if (tempFile?.id) {
-			attachmentItemList.value.push({
-				attachType: attachmentPickerTarget.value,
-				tempFileId: tempFile.id,
-				url: AttachmentAPI.getTempReadURL(tempFile.id)
-			});
+			attachmentItemList.value.push({ attachType: attachmentPickerTarget.value, tempFileId: tempFile.id, url: AttachmentAPI.getTempReadURL(tempFile.id) });
 		}
 	} catch (error) {
 		Message.error(getErrorMessage(error, "产品附件上传失败"));
@@ -481,30 +588,158 @@ async function handleAttachmentSelected(event: Event): Promise<void> {
 function buildAttachmentList(): Attachment[] {
 	return attachmentItemList.value.flatMap(item => {
 		if (item.attachment) {
-			return [{
-				...item.attachment,
-				attachType: item.attachType || item.attachment.attachType || "PHOTO"
-			}];
+			return [{ ...item.attachment, attachType: item.attachType || item.attachment.attachType || "PHOTO" }];
 		}
 		if (item.tempFileId) {
-			return [{
-				attachType: item.attachType,
-				tempFileId: item.tempFileId,
-				metadata: item.isSolidColorCover && item.solidColor ? {
-					purpose: SOLID_COLOR_COVER_PURPOSE,
-					color: item.solidColor
-				} : undefined
-			}];
+			return [{ attachType: item.attachType, tempFileId: item.tempFileId, metadata: item.isSolidColorCover && item.solidColor ? { purpose: SOLID_COLOR_COVER_PURPOSE, color: item.solidColor } : undefined }];
+		}
+		return [];
+	});
+}
+
+function buildSkuAttachmentList(photoItemList: PhotoItem[]): Attachment[] {
+	return photoItemList.flatMap(item => {
+		if (item.attachment) {
+			return [{ ...item.attachment, attachType: item.attachType || item.attachment.attachType || "PHOTO" } as Attachment];
+		}
+		if (item.tempFileId) {
+			return [{ attachType: item.attachType || "PHOTO", tempFileId: item.tempFileId } as Attachment];
 		}
 		return [];
 	});
 }
 
 function parseOptionalAmount(value: string): number | null | undefined {
-	if (!value.trim()) {
-		return null;
+	return value.trim() ? parseProductAmount(value) : null;
+}
+
+function buildCombinationList(): SpecValueForm[][] {
+	let result: SpecValueForm[][] = [[]];
+	for (const spec of form.specList) {
+		const valueList: SpecValueForm[] = spec.valueList.filter(value => value.enabled !== false && !!value.name.trim() && (value.id || value.clientKey));
+		result = result.flatMap(combination => valueList.map(value => {
+			const nextCombination: SpecValueForm[] = [...combination, value];
+			return nextCombination;
+		}));
 	}
-	return parseProductAmount(value);
+	return result;
+}
+
+function getCombinationKey(valueList: SpecValueForm[]): string {
+	return valueList.map(value => value.id || value.clientKey).sort().join("\u0000");
+}
+
+function getCombinationSummary(valueList: SpecValueForm[]): string {
+	return valueList.map(value => value.name).join("；");
+}
+
+function regenerateSkuList(): void {
+	removedSkuKeySet.clear();
+	generateSkuList();
+}
+
+function generateSkuList(fallbackSkuList: ProductSku[] = [], preserveRemoved = false): void {
+	const combinationList = buildCombinationList();
+	if (!combinationList.length) {
+		Message.warning("请为每个规格项至少配置一个启用规格值");
+		return;
+	}
+	const currentList = [...form.skuList];
+	const fallback = fallbackSkuList.find(sku => !sku.specValueIdList?.length);
+	const hasExistingCombination = fallbackSkuList.some(sku => !!sku.specValueIdList?.length);
+	const reservedCodeSet = new Set([...fallbackSkuList, ...currentList].map(sku => sku.code.trim()).filter(Boolean));
+	const usedIdSet = new Set<string>();
+	form.skuList = combinationList.flatMap((valueList, index) => {
+		const key = getCombinationKey(valueList);
+		if (preserveRemoved && removedSkuKeySet.has(key)) {
+			return [];
+		}
+		const fallbackSku = fallbackSkuList.find(sku => !!sku.id && !usedIdSet.has(sku.id) && getCombinationKeyByIdList(sku.specValueIdList) === key);
+		const removedSku = preserveRemoved ? undefined : removedSkuMap.get(key);
+		const current = currentList.find(sku => getCombinationKeyByIdList(sku.specValueIdList) === key)
+			|| removedSku
+			|| (fallbackSku ? createSku(fallbackSku) : undefined)
+			|| (!index && !hasExistingCombination ? currentList.find(sku => !sku.specValueIdList?.length) : undefined)
+			|| (!index && !hasExistingCombination ? fallback && !usedIdSet.has(fallback.id || "") ? createSku(fallback) : undefined : undefined)
+			|| createSku({
+				code: getGeneratedSkuCode(index, reservedCodeSet),
+				name: form.name ? `${form.name} ${getCombinationSummary(valueList)}` : "",
+				specSummary: getCombinationSummary(valueList),
+				stockEnabled: form.stockEnabled,
+				allowDecimalQuantity: false,
+				unitList: currentList[0]?.unitList.map(unit => createUnit({
+					name: unit.name,
+					baseQuantityPerUnit: unit.baseQuantityPerUnit,
+					salePrice: unit.salePrice,
+					isBase: unit.isBase,
+					allowPurchase: unit.allowPurchase,
+					allowSale: unit.allowSale
+				}))
+			});
+		if (current) {
+			usedIdSet.add(current.id || "");
+		}
+		const summary = getCombinationSummary(valueList);
+		if (!current!.code.trim()) {
+			current!.code = getGeneratedSkuCode(index, reservedCodeSet);
+		}
+		if (!current!.name.trim()) {
+			current!.name = form.name ? `${form.name} ${summary}` : "";
+		}
+		if (current?.specSummary !== summary) {
+			current!.specSummary = summary;
+		}
+		current!.specValueIdList = valueList.map(value => value.id || value.clientKey);
+		return [current!];
+	});
+}
+
+function getGeneratedSkuCode(index: number, reservedCodeSet: Set<string>): string {
+	const baseCode = form.code ? `${form.code}-${index + 1}` : "";
+	if (!baseCode) {
+		return "";
+	}
+	let code = baseCode;
+	let suffix = 1;
+	while (reservedCodeSet.has(code)) {
+		code = `${baseCode}-${suffix}`;
+		suffix += 1;
+	}
+	reservedCodeSet.add(code);
+	return code;
+}
+
+function getCombinationKeyByIdList(idList?: string[]): string {
+	return (idList || []).slice().sort().join("\u0000");
+}
+
+function normalizeSkuSpecValueIds(): void {
+	const idMap = new Map<string, string>();
+	for (const spec of form.specList) {
+		for (const value of spec.valueList) {
+			if (value.id) {
+				idMap.set(value.clientKey, value.id);
+			}
+		}
+	}
+	for (const sku of form.skuList) {
+		sku.specValueIdList = (sku.specValueIdList || []).map(id => idMap.get(id) || id);
+	}
+	const normalizeKey = (key: string): string => key
+		.split("\u0000")
+		.map(id => idMap.get(id) || id)
+		.sort()
+		.join("\u0000");
+	const normalizedRemovedSkuKeySet = new Set([...removedSkuKeySet].map(normalizeKey));
+	removedSkuKeySet.clear();
+	normalizedRemovedSkuKeySet.forEach(key => removedSkuKeySet.add(key));
+	const normalizedRemovedSkuMap = new Map<string, SkuForm>();
+	removedSkuMap.forEach((sku, key) => {
+		sku.specValueIdList = (sku.specValueIdList || []).map(id => idMap.get(id) || id);
+		normalizedRemovedSkuMap.set(normalizeKey(key), sku);
+	});
+	removedSkuMap.clear();
+	normalizedRemovedSkuMap.forEach((sku, key) => removedSkuMap.set(key, sku));
 }
 
 function validate(): boolean {
@@ -512,97 +747,209 @@ function validate(): boolean {
 		Message.warning("产品编码和名称不能为空");
 		return false;
 	}
+	if (!form.specList.length && 1 === form.skuList.length) {
+		const defaultSku = form.skuList[0];
+		if (defaultSku && !defaultSku.code.trim()) {
+			defaultSku.code = form.code.trim();
+		}
+		if (defaultSku && !defaultSku.name.trim()) {
+			defaultSku.name = form.name.trim();
+		}
+	}
 	if (form.productType === "SERVICE" && form.stockEnabled) {
 		Message.warning("服务产品不能管理库存");
 		return false;
 	}
-	if (form.stockEnabled && !normalizeProductQuantity(minStockQuantityText.value || "0")) {
-		Message.warning("最低库存必须是非负数量，最多三位小数");
-		return false;
-	}
-	if (!form.unitList.length) {
-		Message.warning("至少配置一个产品单位");
-		return false;
-	}
-	const unitNameSet = new Set<string>();
-	let baseCount = 0;
-	for (const unit of form.unitList) {
-		const name = unit.name.trim();
-		const baseQuantityPerUnit = String(unit.baseQuantityPerUnit).trim();
-		const salePrice = parseOptionalAmount(unit.salePriceText);
-		if (!name || unitNameSet.has(name)) {
-			Message.warning("单位名称不能为空且不能重复");
+	const specNameSet = new Set<string>();
+	for (const spec of form.specList) {
+		if (!spec.name.trim() || specNameSet.has(spec.name.trim())) {
+			Message.warning("规格名称不能为空且不能重复");
 			return false;
 		}
-		if (!/^\d+(?:\.\d{1,6})?$/.test(baseQuantityPerUnit) || !(0 < Number(baseQuantityPerUnit))) {
-			Message.warning("基础单位数量必须是大于 0 的数字，最多六位小数");
-			return false;
-		}
-		if (salePrice === undefined) {
-			Message.warning("单位售价必须是合法的非负元金额，最多两位小数");
-			return false;
-		}
-		unitNameSet.add(name);
-		if (unit.isBase) {
-			baseCount += 1;
-			if (baseQuantityPerUnit !== "1" && Number(baseQuantityPerUnit) !== 1) {
-				Message.warning("基础单位数量必须为 1");
+		specNameSet.add(spec.name.trim());
+		const valueNameSet = new Set<string>();
+		for (const value of spec.valueList) {
+			if (!value.name.trim() || valueNameSet.has(value.name.trim())) {
+				Message.warning("同一规格项的规格值不能为空且不能重复");
 				return false;
 			}
+			valueNameSet.add(value.name.trim());
+		}
+		if (!spec.valueList.some(value => value.enabled !== false)) {
+			Message.warning("每个规格项至少需要一个规格值");
+			return false;
 		}
 	}
-	if (baseCount !== 1) {
-		Message.warning("产品必须且只能有一个基础单位");
+	if (!form.skuList.length) {
+		Message.warning("至少需要一个 SKU");
 		return false;
 	}
+	const skuCodeSet = new Set<string>();
+	for (const sku of form.skuList) {
+		const pendingGeneratedSku = form.specList.length && 1 === form.skuList.length && !sku.specValueIdList?.length;
+		if ((!sku.code.trim() || !sku.name.trim()) && !pendingGeneratedSku) {
+			Message.warning("SKU 编码和名称不能为空");
+			return false;
+		}
+		if (skuCodeSet.has(sku.code.trim())) {
+			Message.warning("SKU 编码不能重复");
+			return false;
+		}
+		skuCodeSet.add(sku.code.trim());
+		if (form.productType === "SERVICE" && sku.stockEnabled) {
+			Message.warning("服务产品的 SKU 不能启用库存");
+			return false;
+		}
+		if (sku.stockEnabled && !normalizeProductQuantity(sku.minStockQuantityText || "0")) {
+			Message.warning("SKU 最低库存必须是非负数量，最多三位小数");
+			return false;
+		}
+		if (!sku.stockEnabled && sku.minStockQuantityText.trim()) {
+			Message.warning("未启用库存的 SKU 不能填写最低库存");
+			return false;
+		}
+		if (!sku.unitList.length) {
+			Message.warning("每个 SKU 至少需要一个单位");
+			return false;
+		}
+		const unitNameSet = new Set<string>();
+		let baseCount = 0;
+		for (const unit of sku.unitList) {
+			const baseQuantity = String(unit.baseQuantityPerUnit).trim();
+			const salePrice = parseOptionalAmount(unit.salePriceText);
+			if (!unit.name.trim() || unitNameSet.has(unit.name.trim())) {
+				Message.warning("同一 SKU 的单位名称不能为空且不能重复");
+				return false;
+			}
+			if (!/^\d+(?:\.\d{1,6})?$/.test(baseQuantity) || !(0 < Number(baseQuantity))) {
+				Message.warning("SKU 单位基础数量必须是大于 0 的数字，最多六位小数");
+				return false;
+			}
+			if (salePrice === undefined) {
+				Message.warning("SKU 单位售价必须是合法的非负元金额，最多两位小数");
+				return false;
+			}
+			unitNameSet.add(unit.name.trim());
+			if (unit.isBase) {
+				baseCount += 1;
+				if (baseQuantity !== "1" && Number(baseQuantity) !== 1) {
+					Message.warning("基础单位数量必须为 1");
+					return false;
+				}
+			}
+		}
+		if (baseCount !== 1) {
+			Message.warning("每个 SKU 必须且只能有一个基础单位");
+			return false;
+		}
+	}
 	return true;
 }
 
-async function save(): Promise<void> {
-	if (isSaving.value || isAttachmentUploading.value) {
-		return;
+function buildSkuPayload(sku: SkuForm, index: number): ProductSku {
+	return {
+		id: sku.id,
+		productId: form.id,
+		code: sku.code.trim(),
+		barcode: sku.barcode?.trim() || null,
+		name: sku.name.trim(),
+		specSummary: sku.specSummary?.trim() || null,
+		specValueIdList: sku.specValueIdList || [],
+		stockEnabled: !!sku.stockEnabled,
+		allowDecimalQuantity: !!sku.allowDecimalQuantity,
+		minStockQuantity: sku.stockEnabled ? normalizeProductQuantity(sku.minStockQuantityText || "0") : null,
+		status: sku.status || "ACTIVE",
+		remark: sku.remark?.trim() || null,
+		sort: index,
+		attachmentList: buildSkuAttachmentList(sku.photoItemList),
+		unitList: sku.unitList.map((unit, unitIndex) => ({
+			id: unit.id,
+			name: unit.name.trim(),
+			baseQuantityPerUnit: String(unit.baseQuantityPerUnit).trim(),
+			salePrice: parseOptionalAmount(unit.salePriceText)!,
+			isBase: !!unit.isBase,
+			allowPurchase: form.productType === "SERVICE" ? false : !!unit.allowPurchase,
+			allowSale: !!unit.allowSale,
+			sort: unitIndex
+		}))
+	};
+}
+
+function buildProductPayload(skuList?: ProductSku[], includeSpecList = false): Product {
+	return {
+		id: form.id,
+		categoryId: form.categoryId,
+		code: form.code.trim(),
+		name: form.name.trim(),
+		productType: form.productType,
+		stockEnabled: form.stockEnabled,
+		status: form.status,
+		remark: form.remark?.trim() || null,
+		attachmentList: buildAttachmentList(),
+		specList: includeSpecList ? form.specList.map(spec => ({
+			...spec,
+			productId: form.id,
+			name: spec.name.trim(),
+			valueList: spec.valueList.map(value => ({ ...value, name: value.name.trim() }))
+		})) : undefined,
+		skuList
+	};
+}
+
+async function syncSpecs(productId: string): Promise<void> {
+	for (const [specIndex, spec] of form.specList.entries()) {
+		if (!spec.id) {
+			spec.id = await ProductAPI.specCreate({ productId, name: spec.name.trim(), sort: specIndex });
+		}
+		for (const [valueIndex, value] of spec.valueList.entries()) {
+			if (!value.id) {
+				value.specId = spec.id;
+				value.id = await ProductAPI.specValueCreate({ specId: spec.id, name: value.name.trim(), enabled: value.enabled !== false, sort: valueIndex });
+			}
+		}
 	}
-	if (!userStore.hasPermissions(savePermissionCode.value) || !validate()) {
+}
+
+async function save(): Promise<void> {
+	if (isSaving.value || isAttachmentUploading.value || !userStore.hasPermissions(savePermissionCode.value) || !validate()) {
 		return;
 	}
 	isSaving.value = true;
 	try {
-		const minStockQuantity = form.stockEnabled ? normalizeProductQuantity(minStockQuantityText.value || "0") : undefined;
-		const unitList = form.unitList as ProductUnitForm[];
-		const payload: Product = {
-			id: form.id,
-			categoryId: form.categoryId,
-			code: form.code.trim(),
-			name: form.name.trim(),
-			productType: form.productType,
-			stockEnabled: form.stockEnabled,
-			allowDecimalQuantity: form.allowDecimalQuantity,
-			status: form.status,
-			minStockQuantity: form.stockEnabled ? minStockQuantity : null,
-			remark: form.remark?.trim() || null,
-			attachmentList: buildAttachmentList(),
-			unitList: unitList.map((unit, index) => ({
-				id: unit.id,
-				name: unit.name.trim(),
-				baseQuantityPerUnit: String(unit.baseQuantityPerUnit).trim(),
-				salePrice: parseOptionalAmount(unit.salePriceText)!,
-				isBase: !!unit.isBase,
-				allowPurchase: form.productType === "SERVICE" ? false : !!unit.allowPurchase,
-				allowSale: !!unit.allowSale,
-				sort: index
-			}))
-		};
 		if (isCreateMode.value) {
-			const id = await ProductAPI.create(payload);
+			if (form.specList.length) {
+				generateSkuList([], true);
+			}
+			const productId = await ProductAPI.create(buildProductPayload(form.skuList.map(buildSkuPayload), true));
 			Message.success("产品已创建");
-			await router.replace(`/management/products/${id}`);
-		} else {
-			await ProductAPI.update(payload);
-			Message.success("产品已保存");
-			await router.replace(`/management/products/${routeId.value}`);
+			await router.replace(`/management/products/${productId}`);
+			return;
 		}
+		const productId = form.id;
+		await syncSpecs(productId!);
+		normalizeSkuSpecValueIds();
+		const latest = await ProductAPI.detail(productId!);
+		const previousSkuIdSet = new Set((latest.skuList || []).map(sku => sku.id).filter((id): id is string => !!id));
+		if (form.specList.length) {
+			const defaultSku = latest.skuList?.find(sku => !sku.specValueIdList?.length);
+			if (defaultSku?.id && form.skuList[0] && !form.skuList[0].id) {
+				form.skuList[0].id = defaultSku.id;
+			}
+			generateSkuList(latest.skuList || [], true);
+		} else if (!form.skuList.length) {
+			form.skuList = [createSku(latest.skuList?.[0])];
+		} else if (!form.skuList[0]?.id && latest.skuList?.[0]) {
+			form.skuList[0].id = latest.skuList[0].id;
+		}
+		const payload = buildProductPayload(form.skuList.map(buildSkuPayload));
+		await ProductAPI.update(payload);
+		const retainedSkuIdSet = new Set(form.skuList.map(sku => sku.id).filter((id): id is string => !!id));
+		const disabledSkuIdList = [...previousSkuIdSet].filter(id => !retainedSkuIdSet.has(id));
+		await Promise.all(disabledSkuIdList.map(async skuId => await ProductAPI.skuDisable(skuId)));
+		Message.success(isCreateMode.value ? "产品已创建" : "产品已保存");
+		await router.replace(`/management/products/${productId}`);
 	} catch (error) {
-		Message.error(getErrorMessage(error, "产品保存失败"));
+		Message.error(getErrorMessage(error, "产品保存失败，请检查 SKU 编码、规格组合和单位配置"));
 	} finally {
 		isSaving.value = false;
 	}
@@ -612,7 +959,7 @@ async function load(): Promise<void> {
 	const categoryResult = await ProductAPI.categoryList({ index: 0, size: 1000, status: "ACTIVE" });
 	categoryList.value = categoryResult.list || [];
 	if (isCreateMode.value) {
-		addUnit();
+		form.skuList.push(createSku());
 		return;
 	}
 	const result = await ProductAPI.detail(routeId.value);
@@ -626,28 +973,25 @@ async function load(): Promise<void> {
 		name: result.name || "",
 		productType: result.productType || "GOODS",
 		stockEnabled: !!result.stockEnabled,
-		allowDecimalQuantity: !!result.allowDecimalQuantity,
 		status: result.status || "ACTIVE",
 		remark: result.remark || "",
-		unitList: (result.unitList || []).map(createUnit)
+		specList: (result.specList || []).map(createSpec),
+		skuList: (result.skuList || []).map(createSku)
 	});
-	attachmentItemList.value = (result.attachmentList || [])
-		.filter(item => !!item.id)
-		.map(item => {
-			const metadata = item.metadata;
-			const solidColor = metadata?.purpose === SOLID_COLOR_COVER_PURPOSE && typeof metadata.color === "string" ? metadata.color : undefined;
-			return {
-				attachment: item,
-				attachType: item.attachType === "OTHER" ? "OTHER" : "PHOTO",
-				isSolidColorCover: !!solidColor,
-				solidColor,
-				previewUrl: getAttachmentReadURL(item.id || ""),
-				url: getAttachmentReadURL(item.id || "", 90)
-			};
-		});
-	minStockQuantityText.value = result.minStockQuantity === null || result.minStockQuantity === undefined ? "" : String(result.minStockQuantity);
-	if (!form.unitList.length) {
-		addUnit();
+	attachmentItemList.value = (result.attachmentList || []).filter(item => !!item.id).map(item => {
+		const metadata = item.metadata;
+		const solidColor = metadata?.purpose === SOLID_COLOR_COVER_PURPOSE && typeof metadata.color === "string" ? metadata.color : undefined;
+		return {
+			attachment: item,
+			attachType: item.attachType === "OTHER" ? "OTHER" : "PHOTO",
+			isSolidColorCover: !!solidColor,
+			solidColor,
+			previewUrl: getAttachmentReadURL(item.id || ""),
+			url: getAttachmentReadURL(item.id || "", 90)
+		};
+	});
+	if (!form.skuList.length) {
+		form.skuList.push(createSku());
 	}
 }
 
@@ -679,79 +1023,130 @@ onUnmounted(() => navBarStore.clearRight());
 		box-shadow: var(--td-shadow-1);
 		border-radius: 1rem;
 		overflow: hidden;
-	}
 
-	.color-trigger {
-		--td-button-extra-small-padding-horizontal: 2px;
+		.color-trigger {
+			--td-button-extra-small-padding-horizontal: 2px;
 
-		gap: .75rem;
-		display: flex;
-		align-items: center;
-		padding-right: .875rem;
-
-		.content {
-			gap: .5rem;
+			gap: .75rem;
 			display: flex;
 			align-items: center;
+			padding-right: .5rem;
+			justify-content: flex-start;
 
-			.swatch {
-				width: 1.5rem;
-				height: 1.5rem;
-				border: 1px solid var(--td-component-stroke);
-				display: block;
-				border-radius: .35rem;
+			.content {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
 
-				&.empty {
-					background: var(--td-bg-color-secondarycontainer);
+				.swatch {
+					width: 1.5rem;
+					height: 1.5rem;
+					display: block;
+					border-radius: .35rem;
+
+					&.empty {
+						background-color: #FFF;
+						background-image:
+							linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
+							linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
+						background-size: 10px 10px;
+						background-position: 0 0, 5px 5px;
+					}
+				}
+
+				span {
+					color: #52607a;
+					font-size: .875rem;
+				}
+			}
+		}
+	}
+
+	.spec-list {
+		gap: .75rem;
+		padding: 1rem;
+		display: flex;
+		flex-direction: column;
+
+		.spec {
+			border: 1px dashed var(--td-component-border);
+			margin: 0;
+			border-radius: 1rem;
+
+			.name-wrap {
+				padding: 0 .5rem;
+				display: flex;
+
+				.name {
+					padding: 0 .5rem;
 				}
 			}
 
-			span {
-				color: var(--td-text-color-secondary);
-				font-size: .875rem;
+			.tags {
+				gap: .5rem;
+				display: flex;
+				flex-wrap: wrap;
 			}
 		}
+
+		.add {
+			--td-button-border-radius: 1rem;
+		}
 	}
 
-	.units {
-		padding: 1rem 0;
+	.sku-wrap {
 
-		.unit {
+		:deep(.content) {
+			background: transparent;
+		}
+
+		.content-wrap {
+			gap: 1rem;
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	.sku-list {
+		overflow: hidden;
+	}
+
+	.card-header,
+	.value-row {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+	}
+
+	.card-header {
+		padding: 0 .75rem .5rem;
+		justify-content: space-between;
+	}
+
+	.value-list {
+		gap: .5rem;
+		display: flex;
+		padding: .25rem .75rem .75rem;
+		flex-direction: column;
+	}
+	.small-button {
+		align-self: flex-start;
+	}
+
+	.sku-toolbar {
+		gap: .5rem;
+		display: flex;
+		padding: 0 1rem .75rem;
+		color: var(--td-text-color-secondary);
+		align-items: center;
+		justify-content: space-between;
+
+		.sku-actions {
 			gap: .5rem;
-			border: 1px dashed var(--td-component-border);
-			padding: .5rem 0;
-			margin-bottom: .75rem;
-			border-radius: 1rem;
-
-			.header {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
-		}
-	}
-
-	.unit-list {
-		padding: 1rem;
-
-		.unit-item {
-			padding: .75rem 0;
-			border-bottom: 1px dashed var(--td-component-border);
-
-			.unit-header {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-			}
-
-			:deep(.t-form__item) {
-				padding: .25rem 0;
-			}
-		}
-
-		.add-unit {
-			margin-top: 1rem;
-			border-radius: .75rem;
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			flex-wrap: wrap;
 		}
 	}
 
@@ -760,4 +1155,9 @@ onUnmounted(() => navBarStore.clearRight());
 	}
 }
 
+:global(html.theme-dark) .product-edit {
+	.spec-card {
+		border-color: rgba(148, 163, 184, .3);
+	}
+}
 </style>
diff --git a/src/pages/product/ProductStockDetail.vue b/src/pages/product/ProductStockDetail.vue
index 79ce173..aa18307 100644
--- a/src/pages/product/ProductStockDetail.vue
+++ b/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;
 	}
diff --git a/src/pages/product/ProductStockList.vue b/src/pages/product/ProductStockList.vue
index b931037..36fc7a2 100644
--- a/src/pages/product/ProductStockList.vue
+++ b/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 {
diff --git a/src/pages/product/ProductStockOperationPopup.vue b/src/pages/product/ProductStockOperationPopup.vue
index 5e2f6df..5136239 100644
--- a/src/pages/product/ProductStockOperationPopup.vue
+++ b/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" }] : [])
diff --git a/src/pages/product/ProductStockRecordDetail.vue b/src/pages/product/ProductStockRecordDetail.vue
index f5cbba4..608f3fd 100644
--- a/src/pages/product/ProductStockRecordDetail.vue
+++ b/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);
 	}
diff --git a/src/pages/product/ProductStockRecordList.vue b/src/pages/product/ProductStockRecordList.vue
index 5a1ca8e..1192519 100644
--- a/src/pages/product/ProductStockRecordList.vue
+++ b/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(/^-/, "");
diff --git a/src/pages/product/ProductStockSkuList.vue b/src/pages/product/ProductStockSkuList.vue
new file mode 100644
index 0000000..a0acb35
--- /dev/null
+++ b/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>
diff --git a/src/pages/product/component/ProductFulfillmentRankChart.vue b/src/pages/product/component/ProductFulfillmentRankChart.vue
index b0ed39b..5e40a0a 100644
--- a/src/pages/product/component/ProductFulfillmentRankChart.vue
+++ b/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))
 			}
 		]
 	};
diff --git a/src/pages/product/component/ProductFulfillmentTrendChart.vue b/src/pages/product/component/ProductFulfillmentTrendChart.vue
index f50dd60..44d7c62 100644
--- a/src/pages/product/component/ProductFulfillmentTrendChart.vue
+++ b/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))
diff --git a/src/pages/product/component/ProductSalesRankChart.vue b/src/pages/product/component/ProductSalesRankChart.vue
index a7be842..057b7ae 100644
--- a/src/pages/product/component/ProductSalesRankChart.vue
+++ b/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))
 			}
 		]
 	};
diff --git a/src/pages/product/component/ProductSalesTrendChart.vue b/src/pages/product/component/ProductSalesTrendChart.vue
index 5cc8335..a5b30ca 100644
--- a/src/pages/product/component/ProductSalesTrendChart.vue
+++ b/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: "订单数",
diff --git a/src/pages/product/component/ProductSkuEditor.vue b/src/pages/product/component/ProductSkuEditor.vue
new file mode 100644
index 0000000..b7e5d1e
--- /dev/null
+++ b/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>
diff --git a/src/pages/product/component/ProductSkuUnitBatchEditor.vue b/src/pages/product/component/ProductSkuUnitBatchEditor.vue
new file mode 100644
index 0000000..e9255ad
--- /dev/null
+++ b/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>
diff --git a/src/pages/product/component/ProductSkuUnitEditor.vue b/src/pages/product/component/ProductSkuUnitEditor.vue
new file mode 100644
index 0000000..2489c12
--- /dev/null
+++ b/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>
diff --git a/src/pages/product/component/ProductStockHealthTable.vue b/src/pages/product/component/ProductStockHealthTable.vue
index ee84c72..fdaa30a 100644
--- a/src/pages/product/component/ProductStockHealthTable.vue
+++ b/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>
diff --git a/src/pages/salesOrder/SalesOrderCreate.vue b/src/pages/salesOrder/SalesOrderCreate.vue
index aff54cd..fcfe835 100644
--- a/src/pages/salesOrder/SalesOrderCreate.vue
+++ b/src/pages/salesOrder/SalesOrderCreate.vue
@@ -46,35 +46,24 @@
 						<strong>购买产品</strong>
 						<span v-text="`${items.length} 项`" />
 					</div>
-					<div class="tips">同一产品单位不能重复，数量最多三位小数</div>
+					<div class="tips">同一 SKU 单位不能重复，数量最多三位小数</div>
 					<div class="items">
 						<div v-for="(item, index) in items" :key="item.clientKey" class="item">
 							<div class="header">
 								<span class="no" v-text="String(index + 1).padStart(2, '0')" />
-								<strong v-text="item.productName || '未选择产品'" />
+								<strong v-text="getItemTitle(item)" />
 								<t-button theme="danger" variant="text" size="extra-small" @click="removeItem(index)">删除</t-button>
 							</div>
 							<product-selector
-								:model-value="item.productId ? {productId: item.productId, productUnitId: item.productUnitId || ''} : undefined"
+								:model-value="item.skuId ? { skuId: item.skuId, skuUnitId: item.skuUnitId || '' } : undefined"
+								:selected-product="getProduct(item)"
 								label="产品"
 								placeholder="请选择产品"
-								selection-mode="product"
 								required-mark
 								@update:model-value="applyProduct(index, $event)"
 							/>
-							<t-form-item v-if="item.productId" label="产品单位" required-mark>
-								<div v-if="getSaleableUnits(item).length" class="unit-list">
-									<t-button
-										v-for="unit in getSaleableUnits(item)"
-										:key="unit.id"
-										:theme="item.productUnitId === unit.id ? 'primary' : 'default'"
-										:variant="item.productUnitId === unit.id ? 'base' : 'outline'"
-										size="extra-small"
-										:content="unit.name"
-										@click="selectProductUnit(index, unit)"
-									/>
-								</div>
-								<span v-else class="unit-empty" v-text="'暂无可售单位'" />
+							<t-form-item v-if="item.skuId" label="SKU 单位" content-align="right">
+								<span v-text="getUnit(item)?.name || '未选择单位'" />
 							</t-form-item>
 							<t-form-item :label="canPriceOverride ? '成交单价' : '单价'">
 								<t-input
@@ -93,7 +82,7 @@
 									:max="maxQuantity"
 									:min="getQuantityStep(item)"
 									:step="getQuantityStep(item)"
-									:integer="!getProduct(item)?.allowDecimalQuantity"
+									:integer="!getSku(item)?.allowDecimalQuantity"
 									theme="outline"
 								/>
 							</t-form-item>
@@ -181,7 +170,7 @@ import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import type { Customer } from "@/types/Customer";
-import type { Product, ProductUnit } from "@/types/Product";
+import type { Product, ProductSku, ProductSkuUnit } from "@/types/Product";
 import type { PhotoItem } from "@/types/Photo";
 import type { DirectProductOrderItemRequest } from "@/types/SalesOrder";
 import { createPackageRequestNo, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
@@ -213,6 +202,7 @@ const photoItems = ref<PhotoItem[]>([]);
 const photoUrlList = computed(() => photoItems.value.map(item => item.url));
 const maxQuantity = Number.MAX_SAFE_INTEGER;
 const productCache = new Map<string, Product>();
+const skuCache = new Map<string, ProductSku>();
 const requestNo = ref("");
 const customerDisplayText = computed(() => customer.value?.name || customer.value?.code || "选择客户");
 const customerCode = ref("");
@@ -221,12 +211,27 @@ const scannerVisible = ref(false);
 const scanStatus = ref("点击扫码开始识别。");
 let latestDecodedText = "";
 
-function getProduct(item: FormItem): Product | undefined {
-	return productCache.get(item.productId || "");
+function getSku(item: FormItem): ProductSku | undefined {
+	return skuCache.get(item.skuId || "");
 }
 
 function getQuantityStep(item: FormItem): number {
-	return getProductQuantityStep(getProduct(item));
+	return getProductQuantityStep(getSku(item));
+}
+
+function getProduct(item: FormItem): Product | undefined {
+	const sku = getSku(item);
+	return productCache.get(sku?.productId || "");
+}
+
+function getUnit(item: FormItem): ProductSkuUnit | undefined {
+	return getSku(item)?.unitList?.find(unit => unit.id === item.skuUnitId);
+}
+
+function getItemTitle(item: FormItem): string {
+	const product = getProduct(item);
+	const sku = getSku(item);
+	return sku?.specSummary || sku?.name || product?.name || item.productName || "未选择产品";
 }
 
 const totalAmount = computed(() => {
@@ -264,45 +269,30 @@ function removeItem(index: number): void {
 	}
 }
 
-async function applyProduct(index: number, value?: { productId: string; productUnitId: string }): Promise<void> {
+async function applyProduct(index: number, value?: { skuId: string; skuUnitId: string }): Promise<void> {
 	if (!value) return;
-	const product = productCache.get(value.productId) || await ProductAPI.detail(value.productId);
-	productCache.set(value.productId, product);
+	const sku = skuCache.get(value.skuId) || await ProductAPI.skuDetail(value.skuId);
+	skuCache.set(value.skuId, sku);
+	const product = productCache.get(sku.productId || "") || await ProductAPI.detail(sku.productId || "");
+	productCache.set(sku.productId || "", product);
 	const item = items.value[index];
-	const saleableUnits = (product.unitList || []).filter(unit => unit.allowSale !== false && unit.id);
-	const productUnitId = saleableUnits.length < 2 ? saleableUnits[0]?.id || "" : value.productUnitId;
-	const selectionChanged = item.productId !== value.productId || item.productUnitId !== productUnitId;
-	item.productId = value.productId;
-	item.productUnitId = productUnitId;
+	const selectionChanged = item.skuId !== value.skuId || item.skuUnitId !== value.skuUnitId;
+	item.skuId = value.skuId;
+	item.skuUnitId = value.skuUnitId;
 	item.productName = product.name;
 	if (selectionChanged) {
 		item.unitPriceText = "";
 	}
 }
-function getSaleableUnits(item: FormItem): ProductUnit[] {
-	return (productCache.get(item.productId || "")?.unitList || []).filter(unit => unit.allowSale !== false && unit.id);
-}
-function selectProductUnit(index: number, unit: ProductUnit): void {
-	const item = items.value[index];
-	const product = productCache.get(item.productId || "");
-	if (!product?.id || !unit.id) {
-		return;
-	}
-	if (item.productUnitId !== unit.id) {
-		item.unitPriceText = "";
-	}
-	item.productUnitId = unit.id;
-	item.productName = product.name;
-}
 function getItemUnitPrice(item: FormItem): number | undefined {
 	if (canPriceOverride.value && item.unitPriceText.trim()) {
 		return parsePackageAmount(item.unitPriceText);
 	}
-	const salePrice = productCache.get(item.productId || "")?.unitList?.find(unit => unit.id === item.productUnitId)?.salePrice;
+	const salePrice = getUnit(item)?.salePrice;
 	return salePrice === null ? undefined : salePrice;
 }
 function getItemUnitPricePlaceholder(item: FormItem): string {
-	const salePrice = productCache.get(item.productId || "")?.unitList?.find(unit => unit.id === item.productUnitId)?.salePrice;
+	const salePrice = getUnit(item)?.salePrice;
 	return salePrice === undefined || salePrice === null ? "产品价" : `产品价：${formatProductAmount(salePrice)}`;
 }
 function calculateItemAmount(item: FormItem): number | undefined {
@@ -388,9 +378,9 @@ function validate(): boolean {
 	const keys = new Set<string>();
 	for (const item of items.value) {
 		const quantity = normalizePackageQuantity(item.quantity ?? "");
-		const key = `${item.productId}\u0000${item.productUnitId}`;
-		if (!item.productId || !item.productUnitId || !quantity || quantity === "0") { Message.warning("产品单位和正数量不能为空"); return false; }
-		if (getProduct(item) && !getProduct(item)!.allowDecimalQuantity && quantity.includes(".")) { Message.warning("该产品不允许小数数量"); return false; }
+		const key = `${item.skuId}\u0000${item.skuUnitId}`;
+		if (!item.skuId || !item.skuUnitId || !quantity || quantity === "0") { Message.warning("SKU 单位和正数量不能为空"); return false; }
+		if (getSku(item) && !getSku(item)!.allowDecimalQuantity && quantity.includes(".")) { Message.warning("该 SKU 不允许小数数量"); return false; }
 		if (keys.has(key)) { Message.warning("产品单位不能重复"); return false; }
 		keys.add(key);
 		if (canPriceOverride.value && item.unitPriceText && parsePackageAmount(item.unitPriceText) === undefined) { Message.warning("成交单价必须是合法金额"); return false; }
@@ -403,8 +393,8 @@ async function save(): Promise<void> {
 	isSaving.value = true;
 	try {
 		const itemList = items.value.map((item, index) => ({
-			productId: item.productId!,
-			productUnitId: item.productUnitId!,
+			skuId: item.skuId!,
+			skuUnitId: item.skuUnitId!,
 			quantity: normalizePackageQuantity(item.quantity ?? "")!,
 			unitPrice: canPriceOverride.value && item.unitPriceText ? parsePackageAmount(item.unitPriceText) : undefined,
 			sort: index,
diff --git a/src/pages/salesOrder/SalesOrderDetail.vue b/src/pages/salesOrder/SalesOrderDetail.vue
index 53a3ff7..edcbad0 100644
--- a/src/pages/salesOrder/SalesOrderDetail.vue
+++ b/src/pages/salesOrder/SalesOrderDetail.vue
@@ -96,7 +96,7 @@
 							</div>
 							<div class="main">
 								<div class="title">
-									<span class="name text-bold" v-text="item.productNameSnapshot" />
+									<span class="name text-bold" v-text="getItemTitle(item)" />
 									<t-tag
 										:content="getItemFulfillmentStatus(item).text"
 										:theme="getItemFulfillmentStatus(item).theme"
@@ -110,6 +110,13 @@
 										v-text="`￥${formatPackageAmount(item.lineAmount)}`"
 									/>
 									<t-tag v-else size="small" content="套餐权益" />
+									<t-tag
+										v-if="item.skuCodeSnapshot || item.skuNameSnapshot || item.specSummarySnapshot"
+										size="small"
+										theme="primary"
+										variant="light"
+										:content="item.skuCodeSnapshot || item.skuNameSnapshot || item.specSummarySnapshot"
+									/>
 									<t-tag size="small" theme="primary" variant="light" :content="item.unitSnapshot" />
 								</div>
 							</div>
@@ -250,6 +257,11 @@ 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)
diff --git a/src/pages/salesOrder/components/SalesOrderListCell.vue b/src/pages/salesOrder/components/SalesOrderListCell.vue
index e8f4ee5..e37791d 100644
--- a/src/pages/salesOrder/components/SalesOrderListCell.vue
+++ b/src/pages/salesOrder/components/SalesOrderListCell.vue
@@ -43,8 +43,8 @@
 			<div class="items">
 				<t-tag
 					v-for="(item, index) in itemList"
-					:key="item.id || `${item.productId}-${index}`"
-					:content="item.productNameSnapshot || '未命名产品'"
+					:key="item.id || `${item.skuId}-${item.skuUnitId}-${index}`"
+					:content="getProductText(item)"
 					theme="primary"
 					variant="light"
 				/>
@@ -141,6 +141,11 @@ function sumProductQuantity(field: "quantity" | "fulfilledQuantity"): string {
 	}
 	return getPackageQuantityText(total.toFixed(3));
 }
+
+function getProductText(item: NonNullable<SalesOrder["itemList"]>[number]): string {
+	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}${item.unitSnapshot ? ` / ${item.unitSnapshot}` : ""}`;
+}
 </script>
 
 <style scoped lang="less">
diff --git a/src/pages/tabs/ProductTab.vue b/src/pages/tabs/ProductTab.vue
index 7fa3ab0..22afca9 100644
--- a/src/pages/tabs/ProductTab.vue
+++ b/src/pages/tabs/ProductTab.vue
@@ -112,6 +112,23 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				visible: userStore.hasPermissions(permissionCodes.packageConfig.read)
 			}
 		]
+	},
+	{
+		title: "经营分析",
+		items: [
+			{
+				icon: "chart",
+				path: "/management/product-data-charts",
+				title: "产品经营图表",
+				visible: userStore.hasPermissions(permissionCodes.stat.read)
+			},
+			{
+				icon: "chart",
+				path: "/management/order-data-charts",
+				title: "客户经营图表",
+				visible: userStore.hasPermissions(permissionCodes.stat.read)
+			}
+		]
 	}
 ]);
 
diff --git a/src/router/routes/productRoutes.ts b/src/router/routes/productRoutes.ts
index 085ea0a..131b9e7 100644
--- a/src/router/routes/productRoutes.ts
+++ b/src/router/routes/productRoutes.ts
@@ -6,6 +6,7 @@ import ProductEdit from "@/pages/product/ProductEdit.vue";
 import ProductList from "@/pages/product/ProductList.vue";
 import ProductStockDetail from "@/pages/product/ProductStockDetail.vue";
 import ProductStockList from "@/pages/product/ProductStockList.vue";
+import ProductStockSkuList from "@/pages/product/ProductStockSkuList.vue";
 import ProductStockRecordDetail from "@/pages/product/ProductStockRecordDetail.vue";
 import ProductStockRecordList from "@/pages/product/ProductStockRecordList.vue";
 
@@ -62,7 +63,13 @@ const productRoutes: RouteRecordRaw[] = [
 		path: "/management/product-stocks",
 		name: "ProductStockList",
 		component: ProductStockList,
-		meta: pageMeta("库存")
+		meta: pageMeta("选择产品")
+	},
+	{
+		path: "/management/product-stocks/:productId/skus",
+		name: "ProductStockSkuList",
+		component: ProductStockSkuList,
+		meta: pageMeta("选择 SKU", 4)
 	},
 	{
 		path: "/management/product-stock-records",
@@ -77,10 +84,10 @@ const productRoutes: RouteRecordRaw[] = [
 		meta: pageMeta("库存流水详情", 4)
 	},
 	{
-		path: "/management/product-stocks/:productId",
+		path: "/management/product-stocks/:skuId",
 		name: "ProductStockDetail",
 		component: ProductStockDetail,
-		meta: pageMeta("库存详情", 4)
+		meta: pageMeta("库存详情", 5)
 	}
 ];
 
diff --git a/src/types/Fulfillment.ts b/src/types/Fulfillment.ts
index 09d8313..6e873ae 100644
--- a/src/types/Fulfillment.ts
+++ b/src/types/Fulfillment.ts
@@ -5,8 +5,8 @@ export type GaoFulfillmentStatus = "WAITING_STOCK" | "PENDING" | "VERIFIED" | "R
 
 export type OrderFulfillmentItem = {
 	fulfillmentId?: string;
-	productId?: string;
-	productUnitId?: string;
+	skuId?: string;
+	skuUnitId?: string;
 	attachmentList?: Attachment[];
 	sourceOrderItemId?: string;
 	quantity?: number | string;
@@ -16,6 +16,10 @@ export type OrderFulfillmentItem = {
 	fulfilledBefore?: number | string;
 	fulfilledAfter?: number | string;
 	productNameSnapshot?: string;
+	productIdSnapshot?: string;
+	skuCodeSnapshot?: string;
+	skuNameSnapshot?: string;
+	specSummarySnapshot?: string;
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;
 } & Model;
diff --git a/src/types/GaoChart.ts b/src/types/GaoChart.ts
index 7388999..a03e994 100644
--- a/src/types/GaoChart.ts
+++ b/src/types/GaoChart.ts
@@ -3,6 +3,7 @@ import type { ProductType } from "@/types/Product";
 export type GaoProductChartReq = {
 	storeId?: string;
 	productId?: string;
+	skuId?: string;
 	categoryId?: string;
 	productType?: ProductType;
 	beginAt?: number;
@@ -13,6 +14,8 @@ export type GaoProductChartReq = {
 export type GaoSalesOrderChartReq = {
 	storeId?: string;
 	customerId?: string;
+	productId?: string;
+	skuId?: string;
 	orderType?: "PACKAGE" | "DIRECT_PRODUCT";
 	status?: "ACTIVE" | "FULFILLED" | "CANCELLED";
 	paymentStatus?: "UNPAID" | "PARTIALLY_PAID" | "PAID";
@@ -26,6 +29,8 @@ export type GaoProductSalesDailyStatView = {
 	orderCount?: number;
 	directQuantity?: number;
 	packageQuantity?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
 	directSaleAmount?: number;
 };
 
@@ -35,6 +40,8 @@ export type GaoProductSalesRankView = {
 	orderCount?: number;
 	directQuantity?: number;
 	packageQuantity?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
 	directSaleAmount?: number;
 };
 
@@ -43,11 +50,13 @@ export type GaoProductSkuUnitSalesRankView = {
 	productName?: string;
 	skuId?: string;
 	skuUnitId?: string;
+	productUnitId?: string;
 	skuName?: string;
 	specSummary?: string;
 	unitName?: string;
 	orderCount?: number;
 	quantity?: number;
+	baseQuantity?: number;
 	saleAmount?: number;
 };
 
@@ -55,6 +64,8 @@ export type GaoProductFulfillmentDailyStatView = {
 	dateValue?: number;
 	directQuantity?: number;
 	packageQuantity?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
 	baseQuantity?: number;
 };
 
@@ -67,6 +78,11 @@ export type GaoProductFulfillmentRankView = {
 	reservedQuantity?: number;
 	fulfilledQuantity?: number;
 	availableQuantity?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
+	reservedBaseQuantity?: number;
+	fulfilledBaseQuantity?: number;
+	availableBaseQuantity?: number;
 };
 
 export type GaoProductStockMovementDailyStatView = {
@@ -89,6 +105,95 @@ export type GaoProductStockHealthView = {
 	availableQuantity?: number;
 	minStockQuantity?: number;
 	lowStock?: number;
+	skuCount?: number;
+	lowStockSkuCount?: number;
+};
+
+export type GaoProductSkuSalesDailyStatView = {
+	dateValue?: number;
+	skuId?: string;
+	skuCode?: string;
+	skuName?: string;
+	specSummary?: string;
+	productId?: string;
+	productName?: string;
+	orderCount?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
+	directSaleAmount?: number;
+};
+
+export type GaoProductSkuSalesRankView = {
+	skuId?: string;
+	skuCode?: string;
+	skuName?: string;
+	specSummary?: string;
+	productId?: string;
+	productName?: string;
+	orderCount?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
+	directSaleAmount?: number;
+};
+
+export type GaoProductSkuFulfillmentDailyStatView = {
+	dateValue?: number;
+	skuId?: string;
+	skuCode?: string;
+	skuName?: string;
+	specSummary?: string;
+	productId?: string;
+	productName?: string;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
+	baseQuantity?: number;
+};
+
+export type GaoProductSkuFulfillmentRankView = {
+	skuId?: string;
+	skuCode?: string;
+	skuName?: string;
+	specSummary?: string;
+	productId?: string;
+	productName?: string;
+	orderCount?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
+	reservedBaseQuantity?: number;
+	fulfilledBaseQuantity?: number;
+	availableBaseQuantity?: number;
+};
+
+export type GaoProductSkuStockMovementDailyStatView = {
+	dateValue?: number;
+	skuId?: string;
+	skuCode?: string;
+	skuName?: string;
+	specSummary?: string;
+	productId?: string;
+	productName?: string;
+	inQuantity?: number;
+	outQuantity?: number;
+	netOnHandQuantity?: number;
+	reserveQuantity?: number;
+	releaseQuantity?: number;
+};
+
+export type GaoProductSkuStockHealthView = {
+	skuId?: string;
+	skuCode?: string;
+	skuName?: string;
+	specSummary?: string;
+	productId?: string;
+	productName?: string;
+	categoryId?: string | null;
+	categoryName?: string;
+	productType?: ProductType;
+	onHandQuantity?: number;
+	reservedQuantity?: number;
+	availableQuantity?: number;
+	minStockQuantity?: number;
+	lowStock?: number;
 };
 
 export type GaoProductTypeStatView = {
@@ -170,6 +275,27 @@ export type GaoCustomerOrderProductRankView = {
 	fulfilledQuantity?: number;
 	availableQuantity?: number;
 	directSaleAmount?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
+	reservedBaseQuantity?: number;
+	fulfilledBaseQuantity?: number;
+	availableBaseQuantity?: number;
+};
+
+export type GaoCustomerOrderSkuRankView = {
+	skuId?: string;
+	skuCode?: string;
+	skuName?: string;
+	specSummary?: string;
+	productId?: string;
+	productName?: string;
+	orderCount?: number;
+	directBaseQuantity?: number;
+	packageBaseQuantity?: number;
+	reservedBaseQuantity?: number;
+	fulfilledBaseQuantity?: number;
+	availableBaseQuantity?: number;
+	directSaleAmount?: number;
 };
 
 export type GaoSalesOrderConsumptionDailyStatView = {
diff --git a/src/types/Package.ts b/src/types/Package.ts
index b8d4ec6..c108a89 100644
--- a/src/types/Package.ts
+++ b/src/types/Package.ts
@@ -1,22 +1,26 @@
 import type { Attachment, Model, PageResult, User } from "timi-web-api";
 import type { Customer } from "@/types/Customer";
 import type { OrderFulfillment } from "@/types/Fulfillment";
-import type { Product } from "@/types/Product";
+import type { ProductSku } from "@/types/Product";
 import type { GaoSalesOrderItem, GaoSalesOrderStatus, SalesOrder } from "@/types/SalesOrder";
 
 export type PackageConfigStatus = "DRAFT" | "ACTIVE" | "INACTIVE";
 
 export type PackageConfigItem = {
 	packageConfigId?: string;
-	productId: string;
-	productUnitId: string;
+	skuId: string;
+	skuUnitId: string;
 	productNameSnapshot?: string;
+	productIdSnapshot?: string;
+	skuCodeSnapshot?: string;
+	skuNameSnapshot?: string;
+	specSummarySnapshot?: string;
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;
 	defaultQuantity: number | string;
 	sort?: number;
 	remark?: string | null;
-	product?: Product;
+	sku?: ProductSku;
 } & Model;
 
 export type GaoPackageConfig = {
@@ -54,8 +58,8 @@ export type GaoCustomerPackage = {
 } & Model;
 
 export type PackagePurchaseItem = {
-	productId: string;
-	productUnitId: string;
+	skuId: string;
+	skuUnitId: string;
 	totalQuantity: number | string;
 	sort?: number;
 	remark?: string | null;
diff --git a/src/types/Product.ts b/src/types/Product.ts
index 869e568..89f91ce 100644
--- a/src/types/Product.ts
+++ b/src/types/Product.ts
@@ -25,9 +25,23 @@ export type ProductCategory = {
 	status?: ProductCategoryStatus;
 } & Model;
 
-export type ProductUnit = {
+export type ProductSpecValue = {
+	specId?: string;
+	name: string;
+	enabled?: boolean;
+	sort?: number;
+} & Model;
+
+export type ProductSpec = {
 	productId?: string;
 	name: string;
+	sort?: number;
+	valueList?: ProductSpecValue[];
+} & Model;
+
+export type ProductSkuUnit = {
+	skuId?: string;
+	name: string;
 	baseQuantityPerUnit: number | string;
 	salePrice?: number | null;
 	isBase?: boolean;
@@ -36,6 +50,25 @@ export type ProductUnit = {
 	sort?: number;
 } & Model;
 
+export type ProductSku = {
+	storeId?: string;
+	productId?: string;
+	code: string;
+	barcode?: string | null;
+	name: string;
+	specSummary?: string | null;
+	stockEnabled: boolean;
+	allowDecimalQuantity: boolean;
+	minStockQuantity?: number | string | null;
+	status?: ProductStatus;
+	sort?: number;
+	remark?: string | null;
+	updatedBy?: string;
+	specValueIdList?: string[];
+	unitList?: ProductSkuUnit[];
+	attachmentList?: Attachment[];
+} & Model;
+
 export type Product = {
 	storeId?: string;
 	categoryId?: string;
@@ -43,14 +76,13 @@ export type Product = {
 	name: string;
 	productType: ProductType;
 	stockEnabled: boolean;
-	allowDecimalQuantity: boolean;
 	status?: ProductStatus;
-	minStockQuantity?: number | string | null;
 	sort?: number;
 	remark?: string | null;
 	updatedBy?: string;
 	category?: ProductCategory;
-	unitList?: ProductUnit[];
+	specList?: ProductSpec[];
+	skuList?: ProductSku[];
 	attachmentList?: Attachment[];
 } & Model;
 
@@ -75,14 +107,25 @@ export type ProductPage = {
 
 export type ProductStock = {
 	storeId?: string;
-	productId?: string;
+	skuId?: string;
 	onHandQuantity?: number | string;
 	reservedQuantity?: number | string;
 	updatedBy?: string;
-	product?: Product;
+	sku?: ProductSku;
 	availableQuantity?: number | string;
 } & Model;
 
+export type ProductStockProduct = {
+	productId: string;
+	productCode: string;
+	productName: string;
+	productType?: ProductType;
+	skuCount?: number;
+	onHandQuantity?: number | string;
+	reservedQuantity?: number | string;
+	availableQuantity?: number | string;
+};
+
 export type ProductStockPage = {
 	storeId?: string;
 	productId?: string;
@@ -93,9 +136,13 @@ export type ProductStockPage = {
 
 export type StockRecord = {
 	storeId?: string;
-	productId?: string;
-	productUnitId?: string;
+	skuId?: string;
+	skuUnitId?: string;
 	productNameSnapshot?: string;
+	productIdSnapshot?: string;
+	skuCodeSnapshot?: string;
+	skuNameSnapshot?: string;
+	specSummarySnapshot?: string;
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;
 	quantity?: number | string;
@@ -137,8 +184,8 @@ export type StockRecordPage = {
 export type ProductStockChangeRequest = {
 	requestNo: string;
 	storeId?: string;
-	productId: string;
-	productUnitId: string;
+	skuId: string;
+	skuUnitId: string;
 	quantity: number | string;
 	remark: string;
 	attachmentList: Partial<Attachment>[];
diff --git a/src/types/ProductEditor.ts b/src/types/ProductEditor.ts
new file mode 100644
index 0000000..0e0cb96
--- /dev/null
+++ b/src/types/ProductEditor.ts
@@ -0,0 +1,36 @@
+import type { Attachment } from "timi-web-api";
+import type { PhotoItem } from "@/types/Photo";
+import type { Product, ProductAttachmentType, ProductSku, ProductSkuUnit, ProductSpec, ProductSpecValue } from "@/types/Product";
+
+export type ProductSpecValueForm = ProductSpecValue & {
+	clientKey: string;
+};
+
+export type ProductSpecForm = Omit<ProductSpec, "valueList"> & {
+	clientKey: string;
+	valueList: ProductSpecValueForm[];
+};
+
+export type ProductSkuUnitForm = ProductSkuUnit & {
+	clientKey: string;
+	salePriceText: string;
+};
+
+export type ProductSkuForm = Omit<ProductSku, "unitList"> & {
+	clientKey: string;
+	unitList: ProductSkuUnitForm[];
+	minStockQuantityText: string;
+	photoItemList: PhotoItem[];
+};
+
+export type ProductForm = Omit<Product, "specList" | "skuList"> & {
+	specList: ProductSpecForm[];
+	skuList: ProductSkuForm[];
+};
+
+export type ProductAttachmentItem = PhotoItem & {
+	attachment?: Attachment;
+	attachType: ProductAttachmentType;
+	isSolidColorCover?: boolean;
+	solidColor?: string;
+};
diff --git a/src/types/SalesOrder.ts b/src/types/SalesOrder.ts
index ce728f8..cf4aa8a 100644
--- a/src/types/SalesOrder.ts
+++ b/src/types/SalesOrder.ts
@@ -14,10 +14,14 @@ export type FundRecordStatus = "PENDING" | "VERIFIED" | "REJECTED" | "CANCELLED"
 export type GaoSalesOrderItem = {
 	salesOrderId?: string;
 	itemType?: GaoSalesOrderItemType;
-	productId?: string;
-	productUnitId?: string;
+	skuId?: string;
+	skuUnitId?: string;
 	attachmentList?: Attachment[];
 	productNameSnapshot?: string;
+	productIdSnapshot?: string;
+	skuCodeSnapshot?: string;
+	skuNameSnapshot?: string;
+	specSummarySnapshot?: string;
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;
 	quantity?: number | string;
@@ -80,8 +84,8 @@ export type SalesOrderPage = {
 };
 
 export type DirectProductOrderItemRequest = {
-	productId: string;
-	productUnitId: string;
+	skuId: string;
+	skuUnitId: string;
 	quantity: number | string;
 	unitPrice?: number;
 	sort?: number;
diff --git a/src/utils/product.ts b/src/utils/product.ts
index 985afe4..a8ea461 100644
--- a/src/utils/product.ts
+++ b/src/utils/product.ts
@@ -1,4 +1,4 @@
-import type { Product, ProductCategoryStatus, ProductStatus, ProductType, StockOperationType } from "@/types/Product";
+import type { Product, ProductCategoryStatus, ProductSku, ProductSpec, ProductSpecValue, ProductStatus, ProductType, StockOperationType } from "@/types/Product";
 import { getAttachmentReadURL } from "@/utils/attachment.ts";
 
 /** 生成产品域写操作的幂等请求号。一次失败重试应复用调用方已经生成的请求号。 */
@@ -44,8 +44,8 @@ export function normalizeProductQuantity(value: number | string): string | undef
 }
 
 /** 根据产品数量规则返回数量控件步长。允许小数时固定步进 0.1。 */
-export function getProductQuantityStep(product?: Pick<Product, "allowDecimalQuantity">): number {
-	return product?.allowDecimalQuantity ? .1 : 1;
+export function getProductQuantityStep(sku?: Pick<ProductSku, "allowDecimalQuantity">): number {
+	return sku?.allowDecimalQuantity ? .1 : 1;
 }
 
 export function getProductTypeText(type?: ProductType): string {
@@ -83,7 +83,7 @@ export function getStockOperationText(type?: StockOperationType): string {
 	} as Record<string, string>)[type || ""] || "未知操作";
 }
 
-export function getProductPhotoURL(item: Pick<Product, "attachmentList">): string {
+export function getProductPhotoURL(item: Pick<Product | ProductSku, "attachmentList">): string {
 	const attachment = item.attachmentList?.find(item => item.attachType === "PHOTO" && !!item.id);
 	return attachment?.id ? getAttachmentReadURL(attachment.id, 128) : "";
 }
@@ -97,6 +97,36 @@ export function getProductQuantityText(value?: number | string | null): string {
 }
 
 /** 从产品单位列表中获取基础单位名称。 */
-export function getProductBaseUnitName(product?: Product): string {
-	return product?.unitList?.find(unit => unit.isBase)?.name || "";
+export function getProductBaseUnitName(sku?: ProductSku): string {
+	return sku?.unitList?.find(unit => unit.isBase)?.name || "";
+}
+
+/** 组合产品名、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 || "未命名产品";
+}
+
+export type ProductSkuSpecEntry = {
+	specName: string;
+	valueName: string;
+};
+
+type ProductEditorSpec = Pick<ProductSpec, "name"> & {
+	valueList?: Array<Pick<ProductSpecValue, "id" | "name"> & { clientKey?: string }>;
+};
+
+/** 根据 SKU 保存的规格值 ID，返回可直接展示的规格项和规格值。 */
+export function getProductSkuSpecEntries(sku: Pick<ProductSku, "specValueIdList">, specList: ProductEditorSpec[]): ProductSkuSpecEntry[] {
+	const valueIdSet = new Set(sku.specValueIdList || []);
+	return specList.flatMap((spec, specIndex) => {
+		const value = (spec.valueList || []).find(item => valueIdSet.has(item.id || item.clientKey || ""));
+		if (!value) {
+			return [];
+		}
+		return [{
+			specName: spec.name.trim() || `规格项 ${specIndex + 1}`,
+			valueName: value.name.trim() || "未命名规格值"
+		}];
+	});
 }