fix ProductStockSkuList.vue style

src/pages/product/ProductStockSkuList.vue

@@ -1,10 +1,5 @@
 <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"
@@ -15,7 +10,6 @@
 				placeholder="搜索 SKU 名称、编码或规格"
 			/>
 		</div>
-
 		<t-pull-down-refresh
 			class="list-wrap empty-cell-title-margin"
 			v-model="isRefreshing"
@@ -23,6 +17,10 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
+			<div class="content">
+				<t-cell-group theme="card">
+					<t-cell title="产品" :note="product?.name" />
+				</t-cell-group>
 				<t-cell-group v-if="skuStockList.length" theme="card" class="list fix-last-cell-line">
 					<t-cell
 						v-for="(item, index) in skuStockList"
@@ -42,9 +40,6 @@
 								<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">
@@ -65,6 +60,7 @@
 				</t-cell-group>
 				<div v-else class="center-tips" v-text="emptyText" />
 				<div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+			</div>
 		</t-pull-down-refresh>
 	</div>
 </template>
@@ -75,7 +71,7 @@ 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 { getProductQuantityText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -110,15 +106,6 @@ 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]
@@ -250,26 +237,6 @@ onUnmounted(() => {
 .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;
@@ -288,9 +255,14 @@ onUnmounted(() => {
 
 	.list-wrap {
 		min-height: 70vh;
+		padding-top: .75rem;
+
+		.content {
+			gap: 1rem;
+			display: flex;
+			flex-direction: column;
 
 			.list {
-			padding-top: .75rem;
 
 				.item {
 					padding: 10px;
@@ -354,4 +326,5 @@ onUnmounted(() => {
 			}
 		}
 	}
+}
 </style>