From 7c685c856e575a22c717a4a7ad9e84a543c9b17b Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Mon, 7 Sep 2026 13:17:13 +0800
Subject: [PATCH] fix ProductSkuEditor.vue style

---
 src/pages/product/ProductEdit.vue             |  47 +--
 .../product/component/ProductSkuEditor.vue    | 329 ++++++++----------
 2 files changed, 144 insertions(+), 232 deletions(-)

diff --git a/src/pages/product/ProductEdit.vue b/src/pages/product/ProductEdit.vue
index 77dfc26..89bcd70 100644
--- a/src/pages/product/ProductEdit.vue
+++ b/src/pages/product/ProductEdit.vue
@@ -136,7 +136,7 @@
 							/>
 						</template>
 					</t-cell>
-					<t-cell title="生成">
+					<t-cell title="生成 SKU">
 						<template #note>
 							<t-button
 								theme="primary"
@@ -292,7 +292,7 @@ const skuCombinationCount = computed(() => {
 	return valueCountList.reduce((total, count) => total * count, 1);
 });
 const canGenerateSku = computed(() => 0 < skuCombinationCount.value);
-const generateSkuButtonText = computed(() => `根据规格组合生成 SKU（${skuCombinationCount.value} 个）`);
+const generateSkuButtonText = computed(() => `根据规格组合生成（${skuCombinationCount.value} 个）`);
 const specValueDraftMap = reactive<Record<string, string>>({});
 const unitEditorVisible = ref(false);
 const editingSku = ref<SkuForm>();
@@ -1107,49 +1107,6 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
-	.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;
-			display: flex;
-			align-items: center;
-			justify-content: flex-end;
-			flex-wrap: wrap;
-		}
-	}
-
 	.file-input {
 		display: none;
 	}
diff --git a/src/pages/product/component/ProductSkuEditor.vue b/src/pages/product/component/ProductSkuEditor.vue
index b7e5d1e..d702ed0 100644
--- a/src/pages/product/component/ProductSkuEditor.vue
+++ b/src/pages/product/component/ProductSkuEditor.vue
@@ -3,15 +3,14 @@
 		<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' ? '已建立' : '已停用'" />
+					<t-tag size="small" variant="light" :content="sku.code"/>
+					<strong class="title clip-text" v-text="skuTitle" />
 				</div>
 			</template>
 			<template #note>
 				<t-tag
 					size="small"
-					variant="light-outline"
+					variant="light"
 					:theme="sku.status === 'ACTIVE' ? 'success' : 'warning'"
 					:content="sku.status === 'ACTIVE' ? '启用' : '停用'"
 				/>
@@ -22,6 +21,8 @@
 						v-for="entry in skuSpecEntries"
 						:key="`${entry.specName}-${entry.valueName}`"
 						size="small"
+						theme="primary"
+						variant="light-outline"
 						:content="entry.valueName"
 					/>
 					<t-tag
@@ -33,7 +34,6 @@
 					<t-tag
 						v-for="unit in sku.unitList"
 						:key="unit.clientKey"
-						class="description-tag"
 						size="small"
 						:content="unit.name || '未命名单位'"
 					/>
@@ -59,28 +59,28 @@
 		@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 class="header">
+				<span class="index" v-text="String(props.skuIndex + 1).padStart(2, '0')" />
+				<strong v-text="skuTitle" />
 			</div>
-
-			<div class="sku-spec-panel">
-				<div class="section-title">
+			<div class="hero">
+				<div class="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 v-if="skuSpecEntries.length" class="spec-list">
+					<div
+						v-for="entry in skuSpecEntries"
+						:key="`${entry.specName}-${entry.valueName}`"
+						class="item"
+					>
+						<span class="name" v-text="entry.specName" />
+						<strong class="value clip-text" 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 class="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>
@@ -90,10 +90,6 @@
 				<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>
@@ -109,28 +105,39 @@
 				<t-form-item label="备注">
 					<t-input v-model.trim="sku.remark" borderless maxlength="255" placeholder="选填" />
 				</t-form-item>
+				<div class="photo-wrap">
+					<photo-scroller
+						:model-value="photoUrlList"
+						v-model:photo-items="sku.photoItemList"
+						title="SKU 图片（选填）"
+						:edit-mode="true"
+						:upload="uploadPhotoList"
+					/>
+				</div>
 			</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">
+			<div class="unit">
+				<div class="header">
 					<strong>销售单位</strong>
 					<span>采购、销售和库存操作共用</span>
 				</div>
-				<div class="unit-summary-list">
-					<div v-for="unit in sku.unitList" :key="unit.clientKey" class="unit-summary">
+				<div class="items">
+					<div
+						v-for="unit in sku.unitList"
+						:key="unit.clientKey"
+						class="item"
+					>
 						<strong v-text="unit.name || '未命名单位'" />
 						<span v-text="getUnitSummary(unit)" />
 					</div>
 				</div>
-				<t-button class="unit-button" variant="dashed" size="small" content="配置销售单位" @click="requestConfigureUnits" />
+				<t-button
+					class="cell-button"
+					variant="dashed"
+					theme="light"
+					size="small"
+					content="配置销售单位"
+					@click="requestConfigureUnits"
+				/>
 			</div>
 		</div>
 	</bottom-popup>
@@ -199,65 +206,39 @@ function getUnitSummary(unit: ProductSkuUnitForm): string {
 .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;
+		.title {
+			font-size: .875rem;
 		}
 	}
 
-	.description-tags {
-		gap: .375rem;
+	.tags {
+		gap: .5rem;
+		margin-top: .5rem;
 		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));
+	max-height: 100%;
 	overflow-y: auto;
 
-	.sku-popup-header {
+	.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 {
+		.index {
+			flex: none;
 			width: 1.75rem;
 			height: 1.75rem;
 			color: var(--td-brand-color);
-			flex: none;
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -268,139 +249,113 @@ function getUnitSummary(unit: ProductSkuUnitForm): string {
 		}
 	}
 
-	.sku-spec-panel {
+	.hero {
 		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;
+		.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;
+			span {
+				color: var(--td-text-color-secondary);
+				font-size: .75rem;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+
+		.spec-list {
+			gap: .5rem;
+			display: grid;
+			margin-top: .625rem;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+
+			.item {
+				gap: .375rem;
+				min-width: 0;
+				display: flex;
+				padding: .25rem .5rem;
+				align-items: baseline;
+				background: var(--td-bg-color-container);
+				border-radius: .625rem;
+
+				.name {
+					flex: none;
+					color: var(--td-text-color-secondary);
+					font-size: .75rem;
+				}
+
+				.value {
+					font-size: .875rem;
+				}
+			}
 		}
 	}
 
-	.sku-spec-list {
-		gap: .5rem;
-		display: grid;
-		margin-top: .625rem;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
+	.form {
 
-	.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;
+		.photo-wrap {
+			margin: .5rem 0 0 .75rem;
 		}
 	}
 
-	.sku-spec-empty {
-		margin-top: .5rem;
-		color: var(--td-text-color-secondary);
-		font-size: .75rem;
-	}
+	.unit {
+		margin-top: 1rem;
 
-	.sku-form {
-		margin: 0 .75rem;
+		.header {
+			gap: .5rem;
+			display: flex;
+			padding: .75rem 1rem .5rem;
+			align-items: baseline;
+			justify-content: space-between;
 
-		.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 {
+				color: var(--td-text-color-secondary);
+				font-size: .75rem;
+				text-align: right;
+			}
 		}
 
-		span {
-			min-width: 0;
-			color: var(--td-text-color-secondary);
-			font-size: .75rem;
-			text-align: right;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-	}
+		.items {
+			gap: .5rem;
+			display: flex;
+			padding: 0 1rem .5rem;
+			flex-direction: column;
 
-	.unit-button {
-		margin: 0 1rem .75rem;
+			.item {
+				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;
+				}
+			}
+		}
 	}
 }