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

---
 src/pages/product/ProductStockSkuList.vue | 207 ++++++++++------------
 1 file changed, 90 insertions(+), 117 deletions(-)

diff --git a/src/pages/product/ProductStockSkuList.vue b/src/pages/product/ProductStockSkuList.vue
index a0acb35..4637286 100644
--- a/src/pages/product/ProductStockSkuList.vue
+++ b/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,48 +17,50 @@
 			@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">
+			<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"
+						: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 #description>
+							<div class="stock">
 							<span class="on-hand">
 								<span>库存</span>
 								<strong v-text="getProductQuantityText(item.onHandQuantity)" />
 							</span>
-							<span class="available">
+								<span class="available">
 								<span>可用</span>
 								<strong v-text="getProductQuantityText(item.availableQuantity)" />
 							</span>
-							<span class="reserved">
+								<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 ? '已经到底了' : '上拉加载更多'" />
+							</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 ? '已经到底了' : '上拉加载更多'" />
+			</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,67 +255,73 @@ onUnmounted(() => {
 
 	.list-wrap {
 		min-height: 70vh;
+		padding-top: .75rem;
 
-		.list {
-			padding-top: .75rem;
+		.content {
+			gap: 1rem;
+			display: flex;
+			flex-direction: column;
 
-			.item {
-				padding: 10px;
+			.list {
 
-				.avatar {
-					width: 3.5rem;
-					height: 3.5rem;
-				}
+				.item {
+					padding: 10px;
 
-				.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;
-				}
+					.avatar {
+						width: 3.5rem;
+						height: 3.5rem;
+					}
 
-				.title {
-					gap: .5rem;
-					min-width: 0;
-					flex: 1;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
+					.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;
+					}
 
-					strong {
+					.title {
+						gap: .5rem;
 						min-width: 0;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
+						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;
+					.sku-spec {
+						color: var(--td-text-color-secondary);
 					}
-				}
 
-				.reserved {
-					color: var(--td-warning-color);
-				}
+					.stock {
+						gap: .5rem;
+						display: flex;
+						margin-top: .5rem;
+						flex-wrap: wrap;
 
-				.available {
-					color: var(--td-success-color);
+						strong {
+							display: inline-block;
+							margin-left: .25rem;
+						}
+					}
+
+					.reserved {
+						color: var(--td-warning-color);
+					}
+
+					.available {
+						color: var(--td-success-color);
+					}
 				}
 			}
 		}