fix sku style

src/components/ProductSelector.vue

@@ -18,7 +18,6 @@
 		@left-button-click="close"
 	>
 		<div class="popup">
-			<div class="products">
 			<div class="search-wrap">
 				<t-input v-model="keyword" class="search" borderless placeholder="搜索产品名称或编码" />
 			</div>
@@ -32,14 +31,14 @@
 					@change="handleProductChange"
 				>
 					<t-collapse-panel
+						class="item"
 						v-for="(product, productIndex) in visibleProductList"
 						:key="getProductKey(product, productIndex)"
 						:value="getProductKey(product, productIndex)"
-							class="panel"
 						placement="bottom"
 					>
 						<template #header>
-								<div class="product-header">
+							<div class="header">
 								<t-image
 									v-if="getProductPhotoURL(product)"
 									:src="getProductPhotoURL(product)"
@@ -48,10 +47,7 @@
 									class="avatar"
 								/>
 								<div v-else class="avatar fallback" v-text="(product.name || product.code || '产').slice(0, 1)" />
-									<div class="product-info">
+								<strong class="clip-text" v-text="product.name || '未命名产品'" />
-										<strong v-text="product.name || '未命名产品'" />
-										<span v-text="`${product.code || '-'} · ${product.skuList?.length || 0} 个 SKU`" />
-									</div>
 							</div>
 						</template>
 						<div v-if="isExpandedProduct(product, productIndex)" class="selection">
@@ -72,10 +68,6 @@
 								</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)"
@@ -97,7 +89,6 @@
 				<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
 			</div>
 		</div>
-		</div>
 	</bottom-popup>
 </template>
 
@@ -253,69 +244,10 @@ function selectUnit(sku: ProductSku, skuUnitId: string): void {
 
 .popup {
 	height: 100%;
-	min-height: 0;
 	padding: 1rem 0;
+	display: flex;
 	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-
-	.selection {
-		overflow-y: auto;
-
-		.specs {
-			gap: 1rem;
-			display: flex;
-			flex-direction: column;
-
-			.spec {
-				gap: .5rem;
-				display: flex;
-				flex-direction: column;
-
-				.values,
-				.units {
-					gap: .5rem;
-					display: flex;
-					flex-wrap: wrap;
-				}
-			}
-		}
-
-		.sku-card {
-			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: .5rem;
-				display: flex;
-				margin-top: .75rem;
-				flex-wrap: wrap;
-
-				.price {
-					margin-left: .25rem;
-					font-size: .75rem;
-				}
-			}
-		}
-	}
-
-	.products {
-		height: 100%;
 	min-height: 0;
-		display: flex;
 	flex-direction: column;
 
 	.search-wrap {
@@ -339,42 +271,63 @@ function selectUnit(sku: ProductSku, skuUnitId: string): void {
 
 		.collapse {
 			margin: 0;
-			}
 
-			.product-header {
+			.item {
+				--td-collapse-content-padding: .25rem 1rem .75rem 1rem;
+
+				.header {
 					gap: .75rem;
 					display: flex;
 					min-width: 0;
 					align-items: center;
 
 					.avatar {
-					width: 3.5rem;
-					height: 3.5rem;
 						flex: 0 0 auto;
+						width: 2.5rem;
+						height: 2.5rem;
+						border-radius: .75rem !important;
+					}
 				}
 
-				.product-info {
+				.selection {
-					gap: .25rem;
+					overflow-y: auto;
+
+					.specs {
+						gap: .5rem;
 						display: flex;
-					min-width: 0;
-					flex: 1;
 						flex-direction: column;
 
-					strong,
+						.spec {
-					span {
+							gap: .5rem;
-						overflow: hidden;
+							display: flex;
-						white-space: nowrap;
+							flex-direction: column;
-						text-overflow: ellipsis;
+
+							.values,
+							.units {
+								gap: .5rem;
+								display: flex;
+								flex-wrap: wrap;
+							}
+						}
 					}
 
-					span {
+					.sku-card {
-						color: var(--td-text-color-secondary);
+						padding: .5rem;
+						border: 1px dashed var(--td-brand-color);
+						margin-top: .5rem;
+						border-radius: .875rem;
+
+						.units {
+							gap: .5rem;
+							display: flex;
+							flex-wrap: wrap;
+
+							.price {
+								margin-left: .25rem;
 								font-size: .75rem;
 							}
 						}
-
+					}
-				&:active {
-					opacity: .7;
 				}
 			}
 		}