fix ProductSkuEditor.vue style

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;
 	}

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" />
+					<t-tag size="small" variant="light" :content="sku.code"/>
-					<strong class="clip-text" v-text="skuTitle" />
+					<strong class="title 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"
+					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="header">
-				<div class="sku-heading">
+				<span class="index" v-text="String(props.skuIndex + 1).padStart(2, '0')" />
-					<span class="sku-index" v-text="String(props.skuIndex + 1).padStart(2, '0')" />
 				<strong v-text="skuTitle" />
 			</div>
-			</div>
+			<div class="hero">
-
+				<div class="title">
-			<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-if="skuSpecEntries.length" class="spec-list">
-					<div v-for="entry in skuSpecEntries" :key="`${entry.specName}-${entry.valueName}`" class="sku-spec-item">
+					<div
-						<span class="spec-name" v-text="entry.specName" />
+						v-for="entry in skuSpecEntries"
-						<strong v-text="entry.valueName" />
+						: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="form" label-align="left" label-width="5rem">
-			<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>
@@ -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,8 +105,7 @@
 				<t-form-item label="备注">
 					<t-input v-model.trim="sku.remark" borderless maxlength="255" placeholder="选填" />
 				</t-form-item>
-			</t-form>
+				<div class="photo-wrap">
-
 					<photo-scroller
 						:model-value="photoUrlList"
 						v-model:photo-items="sku.photoItemList"
@@ -118,19 +113,31 @@
 						:edit-mode="true"
 						:upload="uploadPhotoList"
 					/>
-
+				</div>
-			<div class="unit-section">
+			</t-form>
-				<div class="unit-heading">
+			<div class="unit">
+				<div class="header">
 					<strong>销售单位</strong>
 					<span>采购、销售和库存操作共用</span>
 				</div>
-				<div class="unit-summary-list">
+				<div class="items">
-					<div v-for="unit in sku.unitList" :key="unit.clientKey" class="unit-summary">
+					<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 {
+		.title {
-			min-width: 0;
+			font-size: .875rem;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
 		}
 	}
 
-	.description-tags {
+	.tags {
-		gap: .375rem;
+		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 {
+		.index {
-		gap: .5rem;
+			flex: none;
-		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;
@@ -268,14 +249,13 @@ 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 {
+		.title {
 			gap: .5rem;
 			display: flex;
 			align-items: baseline;
@@ -290,67 +270,45 @@ function getUnitSummary(unit: ProductSkuUnitForm): string {
 			}
 		}
 
-	.sku-spec-list {
+		.spec-list {
 			gap: .5rem;
 			display: grid;
 			margin-top: .625rem;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
+			grid-template-columns: repeat(3, minmax(0, 1fr));
-	}
 
-	.sku-spec-item {
+			.item {
 				gap: .375rem;
 				min-width: 0;
 				display: flex;
-		padding: .5rem .625rem;
+				padding: .25rem .5rem;
 				align-items: baseline;
 				background: var(--td-bg-color-container);
 				border-radius: .625rem;
 
-		.spec-name {
+				.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 {
+				.value {
-		margin: 0 .75rem;
+					font-size: .875rem;
-
+				}
-		.setting-title {
+			}
-			margin-top: .5rem;
-			padding: .75rem 0 .25rem;
-			border-top: 1px solid var(--td-component-border);
 		}
 	}
 
-	:deep(.t-form-item) {
+	.form {
-		padding-right: 0;
+
-		padding-left: 0;
+		.photo-wrap {
+			margin: .5rem 0 0 .75rem;
+		}
 	}
 
-	:deep(.photo-scroller) {
+	.unit {
-		margin: .5rem .75rem 0;
+		margin-top: 1rem;
-	}
 
-	.unit-section {
+		.header {
-		margin-top: .75rem;
-		border-top: 1px solid var(--td-component-border);
-	}
-
-	.unit-heading {
 			gap: .5rem;
 			display: flex;
 			padding: .75rem 1rem .5rem;
@@ -364,14 +322,13 @@ function getUnitSummary(unit: ProductSkuUnitForm): string {
 			}
 		}
 
-	.unit-summary-list {
+		.items {
 			gap: .5rem;
 			display: flex;
 			padding: 0 1rem .5rem;
 			flex-direction: column;
-	}
 
-	.unit-summary {
+			.item {
 				gap: .5rem;
 				min-width: 0;
 				display: flex;
@@ -398,9 +355,7 @@ function getUnitSummary(unit: ProductSkuUnitForm): string {
 					text-overflow: ellipsis;
 				}
 			}
-
+		}
-	.unit-button {
-		margin: 0 1rem .75rem;
 	}
 }