update ProductStockRecordDetail.vue style

src/pages/product/ProductList.vue

@@ -280,13 +280,6 @@ onUnmounted(() => {
 .product-list {
 	padding: var(--app-nav-height) 0 1rem;
 
-	.filters {
-		z-index: 10;
-		position: sticky;
-		box-shadow: var(--td-shadow-1);
-		background: var(--td-bg-color-page);
-	}
-
 	.filters {
 		top: var(--app-nav-height);
 		left: 0;

src/pages/product/ProductStockRecordDetail.vue

@@ -12,20 +12,27 @@
 					/>
 				</template>
 			</product-profile>
-			<t-cell-group title="库存流水" theme="card" v-entrance-transition="70">
-				<t-cell title="操作类型" :note="getStockOperationText(record.operationType)" />
-				<t-cell title="业务数量" :note="getQuantityText(record)" />
-				<t-cell title="基础单位数量" :note="getProductQuantityText(record.baseQuantity)" />
-				<t-cell title="实际库存变动">
-					<template #note>
-						<span :class="getDeltaClass(record.onHandDelta)" v-text="getDeltaText(record.onHandDelta)" />
-					</template>
-				</t-cell>
-				<t-cell title="预占库存变动">
-					<template #note>
-						<span :class="getDeltaClass(record.reservedDelta)" v-text="getDeltaText(record.reservedDelta)" />
-					</template>
-				</t-cell>
+			<card-container description="库存变动信息">
+				<div class="data">
+					<div class="card">
+						<span class="label">业务数量</span>
+						<strong :class="getDeltaClass(record.quantity)" v-text="getQuantityText(record)" />
+					</div>
+					<div class="card">
+						<span class="label">基础单位数量</span>
+						<strong :class="getDeltaClass(record.baseQuantity)" v-text="getSignedQuantityText(record.baseQuantity)" />
+					</div>
+					<div class="card">
+						<span class="label">实际库存变动</span>
+						<strong :class="getDeltaClass(record.onHandDelta)" v-text="getDeltaText(record.onHandDelta)" />
+					</div>
+					<div class="card">
+						<span class="label">预占库存变动</span>
+						<strong :class="getDeltaClass(record.reservedDelta)" v-text="getDeltaText(record.reservedDelta)" />
+					</div>
+				</div>
+			</card-container>
+			<t-cell-group title="库存快照" theme="card">
 				<t-cell title="实际库存">
 					<template #note>
 						<span class="balance">
@@ -46,6 +53,9 @@
 						</span>
 					</template>
 				</t-cell>
+			</t-cell-group>
+			<t-cell-group title="库存流水" theme="card" v-entrance-transition="70">
+				<t-cell title="操作类型" :note="getStockOperationText(record.operationType)" />
 				<t-cell title="业务类型" :note="getBizTypeText(record.bizType)" />
 				<t-cell title="发生时间">
 					<template #note>
@@ -156,6 +166,10 @@ function getOperationTheme(value?: number | string): "success" | "danger" | "def
 }
 
 function getDeltaText(value?: number | string): string {
+	return getSignedQuantityText(value);
+}
+
+function getSignedQuantityText(value?: number | string): string {
 	const amount = Number(value || 0);
 	const text = getProductQuantityText(String(value || "0").replace(/^-/, ""));
 	return `${0 < amount ? "+" : amount < 0 ? "-" : ""}${text}`;
@@ -167,7 +181,7 @@ function getDeltaClass(value?: number | string): string {
 }
 
 function getQuantityText(item: StockRecord): string {
-	return `${getProductQuantityText(item.quantity)} ${item.unitSnapshot || "业务单位"}`;
+	return `${getSignedQuantityText(item.quantity)} ${item.unitSnapshot || "业务单位"}`;
 }
 
 function getBizTypeText(type?: StockBizType): string {
@@ -290,11 +304,50 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
+	.data {
+		gap: .75rem;
+		display: grid;
+		padding: .75rem;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+
+		.card {
+			gap: .25rem;
+			min-width: 0;
+			padding: .5rem .75rem;
+			display: flex;
+			background: var(--td-bg-color-secondarycontainer);
+			border-radius: .75rem;
+			flex-direction: column;
+
+			.label {
+				color: var(--td-text-color-secondary);
+				font-size: .75rem;
+			}
+
+			strong {
+				overflow: hidden;
+				font-size: 1.25rem;
+				word-break: break-all;
+				text-align: center;
+				line-height: 1.4;
+			}
+		}
+	}
+
 	.actions {
 		padding: 0 1rem;
 	}
 }
 
+:global(html.theme-dark) {
+	.product-stock-record-detail {
+		.data .card {
+			background: rgba(15, 23, 42, .72);
+			border-color: rgba(148, 163, 184, .16);
+		}
+	}
+}
+
 .revoke-popup {
 	padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));