fix customer order product tag

src/assets/styles/global.less

@@ -161,6 +161,43 @@ html.theme-dark body {
 	}
 }
 
+.glass-header,
+.filters.glass {
+
+	&::after {
+		content: "";
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		position: absolute;
+
+		mask: linear-gradient(to top, transparent 0%, #000 60%);
+		-webkit-mask: linear-gradient(to top, transparent 0%, #000 60%);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+	}
+}
+
+.glass-bottom {
+
+	&::after {
+		content: "";
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		position: absolute;
+
+		mask: linear-gradient(to bottom, transparent 0%, #000 60%);
+		-webkit-mask: linear-gradient(to bottom, transparent 0%, #000 60%);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+	}
+}
+
 .entrance-fade-up-enter-active {
 	transition: opacity .4s ease, transform .4s ease;
 	transition-delay: var(--entrance-delay, 0ms);

src/layout/MainLayout.vue

@@ -197,6 +197,7 @@ const tabBarHeight = computed(() => {
 
 	.tab-bar {
 		--td-tab-bar-height: 52px;
+		--td-tab-bar-active-bg: var(--td-brand-color-2);
 
 		bottom: 1rem;
 		opacity: 1;

src/pages/ai/components/AiConversationList.vue

@@ -7,7 +7,7 @@
 		:overlay-props="{ zIndex: popupZIndex - 1 }"
 	>
 		<section class="ai-conversation-list" @scroll="handleScroll">
-			<header class="header glass-white">
+			<header class="header glass-header">
 				<h3>历史会话</h3>
 				<t-button
 					theme="danger"
@@ -65,7 +65,7 @@
 				size="1.5rem"
 				text="正在加载会话"
 			/>
-			<div class="footer glass-white">
+			<div class="footer glass-bottom">
 				<span class="llm gray">Deepseek v4.1-flash</span>
 				<t-button
 					class="agreement-button"
@@ -282,7 +282,6 @@ watch(() => props.sessionKey, async () => {
 		z-index: 1;
 		display: flex;
 		position: sticky;
-		box-shadow: var(--td-shadow-1);
 		align-items: center;
 		justify-content: space-between;
 
@@ -341,16 +340,12 @@ watch(() => props.sessionKey, async () => {
 		display: flex;
 		padding: 0 .5rem;
 		position: sticky;
-		box-shadow: 0 -2px 10px rgba(0, 0, 0, .03);
 		align-items: center;
 		justify-content: space-between;
 
 		.llm {
 			font-size: .875rem;
 		}
-
-		.agreement-button {
-		}
 	}
 }
 

src/pages/customer/CustomerDataCharts.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.stat.read" class="customer-data-charts-page">
-		<div class="header bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="customerCode"
 				class="customer-search"
@@ -272,12 +272,11 @@ function getDateEnd(date: Date): Date {
 	display: flex;
 	flex-direction: column;
 
-	.header {
+	.filters {
 		top: var(--app-nav-height);
 		z-index: 10;
 		padding: .5rem 1rem;
 		position: sticky;
-		box-shadow: var(--td-shadow-1);
 
 		.customer-search {
 			--td-button-border-radius: .875rem;
@@ -285,7 +284,6 @@ function getDateEnd(date: Date): Date {
 
 			width: 100%;
 			border: 1px solid var(--td-component-border);
-			background: var(--td-bg-color-container);
 			padding-right: .3rem;
 			border-radius: 1rem;
 		}

src/pages/customer/CustomerInviteRank.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
-		v-can="permissionCodes.customer.read"
-		class="customer-invite-rank"
-	>
+	<div v-can="permissionCodes.customer.read" class="customer-invite-rank">
 		<t-pull-down-refresh
 			class="list-wrapper"
 			v-model="isRefreshing"

src/pages/customer/CustomerList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.customer.read" class="customer-list">
-		<div class="filter bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="search"
@@ -506,7 +506,7 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 .customer-list {
 	padding: var(--app-nav-height) 0 1rem 0;
 
-	.filter {
+	.filters {
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
@@ -514,17 +514,14 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #f5f5f8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.search {
 			--td-button-border-radius: .75rem;
 			--td-input-vertical-padding: .25rem 1rem;
 
-			border: 1px solid rgba(148, 163, 184, .28);
+			border: 1px solid var(--td-component-border);
 			z-index: 2;
-			background: #f8fbff;
 			padding-right: .3rem;
 			border-radius: 1rem;
 		}
@@ -533,11 +530,10 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 			--td-spacer-1: 6px;
 
 			width: 100%;
+			border: 1px solid var(--td-component-border);
 			overflow: hidden;
 			margin-top: -1rem;
 			padding-top: .8rem;
-			background: #fff;
-			border: 1px solid rgba(148, 163, 184, .18);
 			border-radius: 0 0 1rem 1rem;
 		}
 	}

src/pages/event/EventRecordList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.eventRecord.read" class="registration-record-list">
-		<div class="search-bar">
+		<div class="filters glass">
 			<div class="search-date">
 				<t-input
 					v-model.trim="keyword"
@@ -684,12 +684,11 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .registration-record-list {
-	gap: 1rem;
 	display: flex;
-	padding: calc(var(--app-nav-height)) 0 6rem 0;
+	padding: var(--app-nav-height) 0 6rem 0;
 	flex-direction: column;
 
-	.search-bar {
+	.filters {
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
@@ -697,8 +696,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.search-date {
@@ -709,9 +706,8 @@ onUnmounted(() => {
 				--td-input-vertical-padding: .25rem 1rem;
 
 				flex: 1;
-				border: 1px solid rgba(148, 163, 184, .28);
+				border: 1px solid var(--td-component-border);
 				z-index: 2;
-				background: #f8fbff;
 				padding-right: .3rem;
 				border-radius: 1rem;
 			}
@@ -720,7 +716,7 @@ onUnmounted(() => {
 				--td-spacer: 4px;
 				--td-spacer-1: 6px;
 
-				border: 1px solid rgba(148, 163, 184, .18);
+				border: 1px solid var(--td-component-border);
 				z-index: 1;
 				margin-left: -2.5rem;
 				padding-left: 3rem;
@@ -737,11 +733,10 @@ onUnmounted(() => {
 			--td-spacer-1: 6px;
 
 			width: 100%;
+			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
 			padding-top: .8rem;
-			background: #fff;
-			border: 1px solid rgba(148, 163, 184, .18);
 			border-top: none;
 			border-radius: 0 0 1rem 1rem;
 

src/pages/followUpReminder/FollowUpReminderList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.customerFollowUpReminder.read" class="follow-up-reminder-list">
-		<div class="filter bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="customerSearchKeyword"
 				class="customer"
@@ -41,114 +41,98 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
-			class="list-wrap"
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
 			@refresh="refresh"
 			@scrolltolower="fetch"
 		>
-			<t-cell-group class="summary" theme="card">
-				<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
-				<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
-				<t-cell v-if="selectedCustomer || selectedResponsibleId" title="筛选条件">
-					<template #note>
-						<div class="selected-filter">
-							<t-tag
-								v-if="selectedCustomer"
-								theme="primary"
-								variant="light-outline"
-								:content="`客户：${selectedCustomer.name || selectedCustomer.code || '未命名'}`"
-							/>
-							<t-tag
-								v-if="selectedResponsibleId"
-								theme="primary"
-								variant="light-outline"
-								:content="`负责人：${selectedResponsibleName}`"
-							/>
-							<t-button size="extra-small" variant="text" @click="clearFilters">清空筛选</t-button>
-						</div>
-					</template>
-				</t-cell>
-			</t-cell-group>
-			<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
-				<t-swipe-cell
-					v-for="(item, index) in pageResult.list"
-					:key="item.id || index"
-					class="item"
-				>
-					<t-cell
-						v-entrance-transition="index * 30"
-						class="cell"
-						arrow
-						@click="toDetail(item)"
+			<div class="list-wrap">
+				<customer-profile-card class="customer" :customer="selectedCustomer" />
+				<t-cell-group class="summary" theme="card">
+					<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
+					<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
+					<t-cell v-if="selectedResponsibleId" title="负责人" :note="selectedResponsibleName" />
+				</t-cell-group>
+				<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
+					<t-swipe-cell
+						v-for="(item, index) in pageResult.list"
+						:key="item.id || index"
+						class="item"
 					>
-						<template #leftIcon>
-							<t-image
-								v-if="getCustomerPhotoURL(item.customer, 64)"
-								:src="getCustomerPhotoURL(item.customer, 64)"
-								:alt="getCustomerName(item)"
-								fit="cover"
-								class="avatar"
-							/>
-							<div v-else class="avatar fallback" v-text="getCustomerName(item).slice(0, 1)" />
-						</template>
-						<template #title>
-							<div class="title">
-								<div class="name-channel">
-									<span class="text-bold" v-text="getCustomerName(item)" />
-									<t-tag
-										v-if="item.notifyChannelList?.includes('INTERNAL')"
-										size="small"
-										theme="primary"
-										variant="outline"
-										content="站内信"
-									/>
-									<t-tag
-										v-if="item.notifyChannelList?.includes('SMS')"
-										size="small"
-										theme="warning"
-										variant="outline"
-										content="短信"
-									/>
+						<t-cell
+							v-entrance-transition="index * 30"
+							class="cell"
+							arrow
+							@click="toDetail(item)"
+						>
+							<template #leftIcon>
+								<t-image
+									v-if="getCustomerPhotoURL(item.customer, 64)"
+									:src="getCustomerPhotoURL(item.customer, 64)"
+									:alt="getCustomerName(item)"
+									fit="cover"
+									class="avatar"
+								/>
+								<div v-else class="avatar fallback" v-text="getCustomerName(item).slice(0, 1)" />
+							</template>
+							<template #title>
+								<div class="title">
+									<div class="name-channel">
+										<span class="text-bold" v-text="getCustomerName(item)" />
+										<t-tag
+											v-if="item.notifyChannelList?.includes('INTERNAL')"
+											size="small"
+											theme="primary"
+											variant="outline"
+											content="站内信"
+										/>
+										<t-tag
+											v-if="item.notifyChannelList?.includes('SMS')"
+											size="small"
+											theme="warning"
+											variant="outline"
+											content="短信"
+										/>
+									</div>
+									<t-tag size="small" :theme="getStatusTheme(item.status)" :content="getStatusText(item.status)" />
 								</div>
-								<t-tag size="small" :theme="getStatusTheme(item.status)" :content="getStatusText(item.status)" />
-							</div>
-						</template>
-						<template #description>
-							<div class="description">
-								<div class="content clip-text" v-text="getContentSummary(item.content)" />
-								<div class="time-responsible">
+							</template>
+							<template #description>
+								<div class="description">
+									<div class="content clip-text" v-text="getContentSummary(item.content)" />
+									<div class="time-responsible">
 									<span
 										class="remind-time"
 										:class="getReminderTimeClass(item)"
 										v-text="getReminderTimeText(item.remindAt)"
 									/>
-									<span v-text="`负责人：${getResponsibleName(item)}`" />
+										<span v-text="`负责人：${getResponsibleName(item)}`" />
+									</div>
 								</div>
+							</template>
+						</t-cell>
+						<template #right>
+							<div class="swipe-actions">
+								<t-button
+									v-if="canComplete && item.status === 'PENDING'"
+									class="complete swipe-cell-button"
+									variant="text"
+									:loading="operatingId === item.id && operatingType === 'complete'"
+									@click.stop="confirmComplete(item)"
+								>完成</t-button>
+								<t-button
+									v-if="canDelete"
+									class="delete swipe-cell-button"
+									variant="text"
+									:loading="operatingId === item.id && operatingType === 'delete'"
+									@click.stop="confirmDelete(item)"
+								>删除</t-button>
 							</div>
 						</template>
-					</t-cell>
-					<template #right>
-						<div class="swipe-actions">
-							<t-button
-								v-if="canComplete && item.status === 'PENDING'"
-								class="complete swipe-cell-button"
-								variant="text"
-								:loading="operatingId === item.id && operatingType === 'complete'"
-								@click.stop="confirmComplete(item)"
-							>完成</t-button>
-							<t-button
-								v-if="canDelete"
-								class="delete swipe-cell-button"
-								variant="text"
-								:loading="operatingId === item.id && operatingType === 'delete'"
-								@click.stop="confirmDelete(item)"
-							>删除</t-button>
-						</div>
-					</template>
-				</t-swipe-cell>
-			</t-cell-group>
-			<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
+					</t-swipe-cell>
+				</t-cell-group>
+				<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
+			</div>
 		</t-pull-down-refresh>
 		<customer-selector
 			v-model="selectedCustomerId"
@@ -676,7 +660,7 @@ onUnmounted(() => navBarStore.clearRight());
 .follow-up-reminder-list {
 	padding: var(--app-nav-height) 0 1rem;
 
-	.filter {
+	.filters {
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
@@ -684,8 +668,6 @@ onUnmounted(() => navBarStore.clearRight());
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #f5f5f8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -694,7 +676,7 @@ onUnmounted(() => navBarStore.clearRight());
 
 			width: 100%;
 			border: 1px solid var(--td-component-border);
-			background: var(--td-bg-color-container);
+			z-index: 1;
 			padding-right: .3rem;
 			border-radius: 1rem;
 		}
@@ -703,11 +685,10 @@ onUnmounted(() => navBarStore.clearRight());
 			--td-spacer-1: 6px;
 
 			width: 100%;
-			border: 1px solid rgba(148, 163, 184, .18);
-			z-index: -1;
+			border: 1px solid var(--td-component-border);
 			overflow: hidden;
 			margin-top: -1rem;
-			background: #fff;
+			background: #FFF;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;
@@ -733,10 +714,12 @@ onUnmounted(() => navBarStore.clearRight());
 	}
 
 	.list-wrap {
-		padding: 1rem 0;
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
 
-		.summary {
-			margin-bottom: 1rem;
+		.customer {
+			margin: 0 1rem;
 		}
 
 		.items {

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -81,13 +81,23 @@
 		<div v-else class="empty" v-text="'暂无可履约明细，请返回订单详情检查'" />
 		<t-form class="form" label-width="7rem">
 			<t-form-item label="履约时间" content-align="right">
-				<t-button
-					theme="primary"
-					variant="outline"
-					size="extra-small"
-					:content="deliveredAtText || '此刻'"
-					@click="pickerVisible = true"
-				/>
+				<div class="time-actions">
+					<t-button
+						theme="primary"
+						variant="outline"
+						size="extra-small"
+						:content="deliveredAtText || '此刻'"
+						@click="pickerVisible = true"
+					/>
+					<t-button
+						v-if="deliveredAtText"
+						theme="primary"
+						variant="text"
+						size="extra-small"
+						content="此刻"
+						@click="resetDeliveredAt"
+					/>
+				</div>
 			</t-form-item>
 			<t-form-item v-if="canDirectVerify" label="直接核销履约" content-align="right">
 				<t-switch v-model="directVerify" size="small" :disabled="isSaving || isStockChecking" />
@@ -373,6 +383,11 @@ function confirmTime(value: string | number): void {
 	pickerVisible.value = false;
 }
 
+function resetDeliveredAt(): void {
+	deliveredAtText.value = "";
+	draftTime.value = "";
+}
+
 function resolveTimestamp(value: string): number | undefined {
 	if (!value) return undefined;
 	const timestamp = new Date(value.replace(" ", "T")).getTime();
@@ -663,6 +678,13 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
+	.time-actions {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
 	.tips {
 		font-size: .875rem;
 	}

src/pages/fulfillment/OrderFulfillmentList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.orderFulfillment.read" class="fulfillment-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				class="customer"
 				v-model.trim="customerSearchKeyword"
@@ -517,8 +517,6 @@ onUnmounted(() => navBarStore.clearRight());
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -526,7 +524,7 @@ onUnmounted(() => navBarStore.clearRight());
 
 			width: 100%;
 			border: 1px solid var(--td-component-border);
-			background: var(--td-bg-color-container);
+			z-index: 1;
 			padding-right: .3rem;
 			border-radius: 1rem;
 
@@ -544,10 +542,8 @@ onUnmounted(() => navBarStore.clearRight());
 
 			width: 100%;
 			border: 1px solid rgba(148, 163, 184, .18);
-			z-index: -1;
 			overflow: hidden;
 			margin-top: -1rem;
-			background: #fff;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;

src/pages/package/PackageConfigList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.packageConfig.read" class="package-config-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="keyword"
@@ -217,16 +217,14 @@ onUnmounted(() => {
 	padding: var(--app-nav-height) 0 1rem;
 
 	.filters {
+		gap: .5rem;
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
 		z-index: 10;
-		gap: .5rem;
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.keyword {
 			--td-input-vertical-padding: .25rem 1rem;
@@ -234,7 +232,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -246,10 +243,6 @@ onUnmounted(() => {
 			margin-left: -2rem;
 			padding-left: 2rem;
 			border-radius: 1rem;
-
-			&:after {
-				display: none;
-			}
 		}
 	}
 

src/pages/package/PackageOrderConfigList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.packageConfig.read" class="package-order-config-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="keyword"
@@ -211,8 +211,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.keyword {
 			--td-input-vertical-padding: .25rem 1rem;
@@ -220,7 +218,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -232,10 +229,6 @@ onUnmounted(() => {
 			margin-left: -2rem;
 			padding-left: 2rem;
 			border-radius: 1rem;
-
-			&:after {
-				display: none;
-			}
 		}
 	}
 

src/pages/point/PointAccountList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.point.accountRead" class="point-account-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="customer"
@@ -257,8 +257,6 @@ onMounted(async () => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -267,7 +265,6 @@ onMounted(async () => {
 
 			width: 100%;
 			border: 1px solid var(--td-component-border);
-			background: var(--td-bg-color-container);
 			padding-right: .3rem;
 			border-radius: 1rem;
 		}
@@ -277,7 +274,6 @@ onMounted(async () => {
 		gap: 1rem;
 		display: flex;
 		min-height: 70vh;
-		padding-top: 1rem;
 		flex-direction: column;
 
 		.list {

src/pages/point/PointLedgerList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				v-model="customerKeyword"
 				class="customer"
@@ -482,7 +482,6 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .point-ledger-list {
-	gap: 1rem;
 	display: flex;
 	padding: var(--app-nav-height) 0 1rem;
 	flex-direction: column;
@@ -495,8 +494,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -505,7 +502,7 @@ onUnmounted(() => {
 
 			width: 100%;
 			border: 1px solid var(--td-component-border);
-			background: var(--td-bg-color-container);
+			z-index: 1;
 			padding-right: .3rem;
 			border-radius: 1rem;
 		}
@@ -514,8 +511,7 @@ onUnmounted(() => {
 			--td-spacer-1: 6px;
 
 			width: 100%;
-			border: 1px solid rgba(148, 163, 184, .18);
-			z-index: -1;
+			border: 1px solid var(--td-component-border);
 			overflow: hidden;
 			margin-top: -1rem;
 			border-top: none;

src/pages/point/PointRedeemSkuList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.pointRedeemSku.manage" class="redeem-sku-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="keyword"
@@ -194,15 +194,12 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #f5f5f8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
 			--td-input-vertical-padding: .25rem 1rem;
 
 			border: 1px solid var(--td-component-border);
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 	}

src/pages/point/PointRedemptionList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.pointRedemption.create" class="redemption-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="keyword"
@@ -421,8 +421,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #f5f5f8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -431,7 +429,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 2;
-			background: var(--td-bg-color-container);
 			padding-right: .3rem;
 			border-radius: 1rem;
 
@@ -448,10 +445,9 @@ onUnmounted(() => {
 			--td-spacer-1: 6px;
 
 			width: 100%;
-			border: 1px solid rgba(148, 163, 184, .18);
+			border: 1px solid var(--td-component-border);
 			overflow: hidden;
 			margin-top: -1rem;
-			background: #fff;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;

src/pages/product/ProductCategoryList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.productCategory.read" class="product-category-list">
-		<div class="filters bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="keyword"
 				class="keyword"
@@ -368,8 +368,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.keyword {
 			--td-input-vertical-padding: 8px 14px;
@@ -377,7 +375,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 

src/pages/product/ProductList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div ref="productListRef" v-can="permissionCodes.product.read" class="product-list">
-		<div class="filters bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="keyword"
 				class="keyword"
@@ -431,8 +431,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -440,7 +438,6 @@ onUnmounted(() => {
 
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -448,26 +445,11 @@ onUnmounted(() => {
 			--td-spacer-1: 6px;
 
 			width: 100%;
+			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
 			padding-top: .8rem;
-			background: #fff;
-			border: 1px solid rgba(148, 163, 184, .18);
 			border-radius: 0 0 1rem 1rem;
-
-			&:after {
-				display: none;
-			}
-
-			:deep(.t-dropdown-menu__item) {
-				min-width: 0;
-			}
-
-			:deep(.t-dropdown-menu__title) {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
 		}
 	}
 

src/pages/product/ProductStockDetail.vue

@@ -55,8 +55,8 @@
 						</div>
 					</template>
 				</t-cell>
-				<t-cell v-if="0 < Number(stock.reservedQuantity || 0)" title="查看预占流水" arrow @click="openReservedRecordList" />
-				<t-cell title="查看该产品 SKU 流水" arrow @click="openRecordList" />
+				<t-cell title="查看库存流水" arrow @click="openRecordList" />
+				<t-cell v-if="0 < Number(stock.reservedQuantity || 0)" title="查看库存预占流水" arrow @click="openReservedRecordList" />
 			</t-cell-group>
 			<card-container
 				v-if="canOperate && sku?.status === 'ACTIVE' && sku.stockEnabled"
@@ -199,11 +199,12 @@ async function loadAll(): Promise<void> {
 }
 
 async function openRecordList(): Promise<void> {
-	if (product.value?.id) {
+	if (product.value?.id && sku.value?.id) {
 		await router.push({
 			name: "ProductStockRecordList",
 			query: {
 				productId: product.value.id,
+				skuId: sku.value.id,
 				transitionDepth: String(getCurrentRouteDepth() + 1)
 			}
 		});
@@ -211,11 +212,12 @@ async function openRecordList(): Promise<void> {
 }
 
 async function openReservedRecordList(): Promise<void> {
-	if (product.value?.id) {
+	if (product.value?.id && sku.value?.id) {
 		await router.push({
 			name: "ProductStockRecordList",
 			query: {
 				productId: product.value.id,
+				skuId: sku.value.id,
 				operationType: "ORDER_RESERVE",
 				activeReservationOnly: "true",
 				transitionDepth: String(getCurrentRouteDepth() + 1)

src/pages/product/ProductStockList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div ref="productStockListRef" v-can="permissionCodes.productStock.read" class="product-stock-list">
-		<div class="search bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="keyword"
 				class="keyword"
@@ -10,7 +10,6 @@
 				placeholder="搜索产品名称（拼音）或编码"
 			/>
 		</div>
-
 		<t-pull-down-refresh
 			class="list-wrap empty-cell-title-margin"
 			v-model="isRefreshing"
@@ -322,18 +321,15 @@ onUnmounted(() => {
 .product-stock-list {
 	padding: var(--app-nav-height) 0 1rem;
 
-	.search {
+	.filters {
 		top: var(--app-nav-height);
 		z-index: 10;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.keyword {
 			border: 1px solid var(--td-component-border);
 			padding: .5rem 1rem;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 	}

src/pages/product/ProductStockRecordList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.productStock.read" class="product-stock-record-list">
-		<div class="filters bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="keyword"
 				class="keyword"
@@ -10,6 +10,12 @@
 				placeholder="搜索产品名称（拼音）或编码"
 			/>
 			<t-dropdown-menu class="menus">
+				<t-dropdown-item
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="selectDateFilter"
+				/>
 				<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperationType" />
 				<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
 			</t-dropdown-menu>
@@ -20,83 +26,155 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
-			<t-cell-group v-if="recordList.length" class="list empty-cell-title-margin" theme="card">
-				<t-cell
-					v-for="(record, index) in recordList"
-					:key="record.id || `${record.occurredAt}-${record.requestNo}-${index}`"
-					class="item"
-					:arrow="!!record.id"
-					:hover="!!record.id"
-					v-entrance-transition="index * 30"
-					@click="toDetail(record)"
-				>
-					<template #leftIcon>
-						<t-image
-							v-if="getCustomerPhotoURL(record.customer, 64)"
-							:src="getCustomerPhotoURL(record.customer, 64)"
-							:alt="getCustomerText(record)"
-							fit="cover"
-							class="avatar"
-						/>
-						<div
-							v-else-if="record.customer"
-							class="avatar fallback"
-							v-text="getCustomerText(record).slice(0, 1)"
-						/>
-						<t-image
-							v-else-if="record.operator"
-							:src="getOperatorAvatar(record)"
-							:alt="getOperatorText(record)"
-							fit="cover"
-							class="avatar"
-						/>
-						<span v-else class="icon" :class="getDeltaClass(record.onHandDelta)">
+			<div class="list-wrap">
+				<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
+					<t-cell
+						title="开始时间"
+						:note="dateRange[0] || '-'"
+						arrow
+						@click="openStartTime"
+					/>
+					<t-cell
+						title="结束时间"
+						:note="dateRange[1] || '-'"
+						arrow
+						@click="openEndTime"
+					/>
+				</t-cell-group>
+				<t-cell-group v-if="filteredProduct && filteredSku" theme="card">
+					<t-cell class="sku">
+						<template #leftIcon>
+							<t-image
+								v-if="filteredSkuPhotoURL"
+								class="avatar"
+								:src="filteredSkuPhotoURL"
+								:alt="filteredProduct.name || '产品图片'"
+								fit="cover"
+							/>
+							<div
+								v-else
+								class="fallback"
+								v-text="(filteredProduct.name || filteredProduct.code || '产').slice(0, 1)"
+							/>
+						</template>
+						<template #title>
+							<div class="title">
+								<strong class="text-bold clip-text" v-text="filteredProduct.name || '未命名产品'" />
+								<span class="clip-text" v-text="filteredSku.specSummary || filteredSku.name || '默认 SKU'" />
+							</div>
+						</template>
+						<template #note>
+							<t-tag
+								variant="light-outline"
+								theme="primary"
+								:content="getProductTypeText(filteredProduct.productType)"
+							/>
+						</template>
+					</t-cell>
+				</t-cell-group>
+				<t-cell-group v-if="recordList.length" class="list empty-cell-title-margin" theme="card">
+					<t-cell
+						v-for="(record, index) in recordList"
+						:key="record.id || `${record.occurredAt}-${record.requestNo}-${index}`"
+						class="item"
+						:arrow="!!record.id"
+						:hover="!!record.id"
+						v-entrance-transition="index * 30"
+						@click="toDetail(record)"
+					>
+						<template #leftIcon>
+							<t-image
+								v-if="getCustomerPhotoURL(record.customer, 64)"
+								:src="getCustomerPhotoURL(record.customer, 64)"
+								:alt="getCustomerText(record)"
+								fit="cover"
+								class="avatar"
+							/>
+							<div
+								v-else-if="record.customer"
+								class="avatar fallback"
+								v-text="getCustomerText(record).slice(0, 1)"
+							/>
+							<t-image
+								v-else-if="record.operator"
+								:src="getOperatorAvatar(record)"
+								:alt="getOperatorText(record)"
+								fit="cover"
+								class="avatar"
+							/>
+							<span v-else class="icon" :class="getDeltaClass(record.onHandDelta)">
 							<t-icon :name="getOperationIcon(record.operationType)" size="1.25rem" />
 						</span>
-					</template>
-					<template #title>
-						<div class="title">
-							<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
-							<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
-							<strong class="operation" v-text="getStockOperationText(record.operationType)" />
-							<strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" />
-							<span
-								v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
-								class="quantity"
-								v-text="getStockQuantityText(record)"
-							/>
-						</div>
-				    </template>
-					<template #description>
-						<div class="description">
-							<pass-time-label :timestamp="record.occurredAt" underline />
-							<div class="delta">
-								<span>库存：</span>
+						</template>
+						<template #title>
+							<div class="title">
+								<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
+								<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
+								<strong class="operation" v-text="getStockOperationText(record.operationType)" />
+								<strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" />
 								<span
-									class="value"
-									:class="getDeltaClass(record.onHandDelta)"
-									v-text="getDeltaText(record.onHandDelta)"
+									v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
+									class="quantity"
+									v-text="getStockQuantityText(record)"
 								/>
 							</div>
-						</div>
-					</template>
-				</t-cell>
-			</t-cell-group>
-			<div v-else class="center-tips" v-text="emptyText" />
-			<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
+						</template>
+						<template #description>
+							<div class="description">
+								<pass-time-label :timestamp="record.occurredAt" underline />
+								<div class="delta">
+									<span>库存：</span>
+									<span
+										class="value"
+										:class="getDeltaClass(record.onHandDelta)"
+										v-text="getDeltaText(record.onHandDelta)"
+									/>
+								</div>
+							</div>
+						</template>
+					</t-cell>
+				</t-cell-group>
+				<div v-else class="center-tips" v-text="emptyText" />
+				<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
+			</div>
 		</t-pull-down-refresh>
 	</div>
+	<t-popup v-model="startVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="startVisible"
+			v-model="startDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="开始时间"
+			:default-value="dateRange[0]"
+			@cancel="cancelStartTime"
+			@confirm="confirmStartTime"
+		/>
+	</t-popup>
+	<t-popup v-model="endVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="endVisible"
+			v-model="endDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="结束时间"
+			:default-value="dateRange[1]"
+			@cancel="cancelEndTime"
+			@confirm="confirmEndTime"
+		/>
+	</t-popup>
 </template>
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
-import { PassTimeLabel } from "timi-web";
+import { PassTimeLabel, Time } from "timi-web";
 import { UserAPI } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
+import type { Product, ProductSku, StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
+import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
-import { getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { getProductPhotoURL, getProductQuantityText, getProductTypeText, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { getCustomerPhotoURL } from "@/utils/customer";
@@ -104,6 +182,7 @@ import { buildFallbackAvatar } from "@/utils/avatar";
 
 defineOptions({ name: "ProductStockRecordList" });
 
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 type OperationFilter = "ALL" | StockOperationType;
 type DirectionFilter = "ALL" | StockRecordDirection;
 
@@ -118,13 +197,36 @@ const loading = ref(false);
 const isRefreshing = ref(false);
 const noMore = ref(false);
 const productId = computed(() => getQueryText("productId"));
+const skuId = computed(() => getQueryText("skuId"));
+const filteredProduct = ref<Product>();
+const filteredSku = ref<ProductSku>();
+const filteredSkuUnitId = ref("");
+const filteredSkuUnitList = computed(() => (filteredSku.value?.unitList || []).filter(unit => !!unit.id));
+const filteredSkuPhotoURL = computed(() => filteredSku.value ? getProductPhotoURL(filteredSku.value) || (filteredProduct.value ? getProductPhotoURL(filteredProduct.value) : "") : "");
 const activeReservationRequested = getQueryText("activeReservationOnly") === "true";
 const operationType = ref<OperationFilter>(getQueryText("operationType") as OperationFilter || (activeReservationRequested ? "ORDER_RESERVE" : "ALL"));
 const direction = ref<DirectionFilter>(getQueryText("direction") as DirectionFilter || "ALL");
 const keyword = ref(getQueryText("keyword"));
+const dateOptions: Array<{ label: string; value: DateFilterType }> = [
+	{ label: "今天", value: "today" },
+	{ label: "昨天", value: "yesterday" },
+	{ label: "本周", value: "thisWeek" },
+	{ label: "本月", value: "thisMonth" },
+	{ label: "上个月", value: "lastMonth" },
+	{ label: "全部", value: "all" },
+	{ label: "自定义范围", value: "custom" }
+];
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "thisWeek"));
+const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
+const startDraft = ref("");
+const endDraft = ref("");
+const startVisible = ref(false);
+const endVisible = ref(false);
 const activeReservationOnly = computed(() => activeReservationRequested && operationType.value === "ORDER_RESERVE");
 let keywordTimer: number | undefined;
 let requestToken = 0;
+const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const isCustomDate = computed(() => dateFilterType.value === "custom");
 const emptyText = computed(() => {
 	if (loading.value) {
 		return "正在加载库存流水";
@@ -132,7 +234,7 @@ const emptyText = computed(() => {
 	if (activeReservationOnly.value) {
 		return "暂无有效的预占流水";
 	}
-	return keyword.value.trim() || productId.value || operationType.value !== "ALL" || direction.value !== "ALL" ? "未找到匹配的库存流水" : "暂无库存流水";
+	return keyword.value.trim() || productId.value || skuId.value || operationType.value !== "ALL" || direction.value !== "ALL" ? "未找到匹配的库存流水" : "暂无库存流水";
 });
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
 const operationOptions = [
@@ -159,6 +261,17 @@ function getQueryText(key: string): string {
 	return Array.isArray(value) ? String(value[0] || "") : String(value || "");
 }
 
+function parseDateRange(type: DateFilterType): [string, string] {
+	if (type !== "custom") {
+		return buildPresetDateRange(type);
+	}
+	return [getQueryText("beginAt"), getQueryText("endAt")];
+}
+
+function getDefaultFilteredSkuUnitId(): string {
+	return filteredSkuUnitList.value.find(unit => unit.isBase)?.id || filteredSkuUnitList.value[0]?.id || "";
+}
+
 function getOperationIcon(type?: StockOperationType): string {
 	return ({
 		INITIAL_IN: "import",
@@ -233,12 +346,16 @@ async function loadMore(force = false): Promise<void> {
 	const token = ++requestToken;
 	loading.value = true;
 	try {
+		const [beginAt, endAt] = buildUnixRange();
 		const result = await ProductAPI.recordList({
 			productId: productId.value || undefined,
+			skuId: skuId.value || undefined,
 			keyword: keyword.value.trim() || undefined,
 			operationType: operationType.value === "ALL" ? undefined : operationType.value,
 			activeReservationOnly: activeReservationOnly.value || undefined,
 			direction: direction.value === "ALL" ? undefined : direction.value,
+			beginAt,
+			endAt,
 			index: pageIndex.value,
 			size: pageSize
 		});
@@ -257,6 +374,23 @@ async function loadMore(force = false): Promise<void> {
 	}
 }
 
+async function loadSkuFilter(): Promise<void> {
+	if (!skuId.value) {
+		filteredProduct.value = undefined;
+		filteredSku.value = undefined;
+		filteredSkuUnitId.value = "";
+		return;
+	}
+	const sku = await ProductAPI.skuDetail(skuId.value);
+	const product = sku.productId ? await ProductAPI.detail(sku.productId) : undefined;
+	if (skuId.value !== getQueryText("skuId")) {
+		return;
+	}
+	filteredSku.value = sku;
+	filteredProduct.value = product;
+	filteredSkuUnitId.value = getDefaultFilteredSkuUnitId();
+}
+
 async function selectOperationType(value: DropdownValue): Promise<void> {
 	if (!Array.isArray(value)) {
 		operationType.value = String(value) as OperationFilter;
@@ -271,6 +405,101 @@ async function selectDirection(value: DropdownValue): Promise<void> {
 	}
 }
 
+async function selectDateFilter(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	dateFilterType.value = String(value) as DateFilterType;
+	if (dateFilterType.value !== "custom") {
+		dateRange.value = buildPresetDateRange(dateFilterType.value);
+		await replaceFilterQuery();
+		await reload();
+	} else {
+		await replaceFilterQuery();
+	}
+}
+
+function openStartTime(): void {
+	startDraft.value = dateRange.value[0];
+	startVisible.value = true;
+}
+
+function openEndTime(): void {
+	endDraft.value = dateRange.value[1];
+	endVisible.value = true;
+}
+
+function cancelStartTime(): void {
+	startVisible.value = false;
+	startDraft.value = dateRange.value[0];
+}
+
+function cancelEndTime(): void {
+	endVisible.value = false;
+	endDraft.value = dateRange.value[1];
+}
+
+async function confirmStartTime(value?: string | number): Promise<void> {
+	startVisible.value = false;
+	dateRange.value = [String(value || startDraft.value), dateRange.value[1]];
+	await confirmCustomRange();
+}
+
+async function confirmEndTime(value?: string | number): Promise<void> {
+	endVisible.value = false;
+	dateRange.value = [dateRange.value[0], String(value || endDraft.value)];
+	await confirmCustomRange();
+}
+
+async function confirmCustomRange(): Promise<void> {
+	if (dateRange.value[0] && dateRange.value[1] && dateRange.value[1] < dateRange.value[0]) {
+		dateRange.value = [dateRange.value[1], dateRange.value[0]];
+	}
+	dateFilterType.value = "custom";
+	await replaceFilterQuery();
+	await reload();
+}
+
+function buildFilterQuery(transitionDepth = getQueryText("transitionDepth")): Record<string, string> {
+	const query = {
+		productId: productId.value,
+		skuId: skuId.value,
+		keyword: keyword.value.trim(),
+		operationType: operationType.value === "ALL" ? "" : operationType.value,
+		direction: direction.value === "ALL" ? "" : direction.value,
+		activeReservationOnly: activeReservationRequested ? "true" : "",
+		dateType: dateFilterType.value,
+		beginAt: dateRange.value[0] || "",
+		endAt: dateRange.value[1] || ""
+	};
+	if (isValidTransitionDepth(transitionDepth)) {
+		return { ...query, transitionDepth };
+	}
+	return query;
+}
+
+async function replaceFilterQuery(): Promise<void> {
+	await router.replace({
+		name: "ProductStockRecordList",
+		query: buildFilterQuery()
+	});
+}
+
+function isValidTransitionDepth(value: string): boolean {
+	const depth = Number(value);
+	return value !== "" && Number.isInteger(depth) && 0 <= depth && depth <= 20;
+}
+
+function buildUnixRange(): [number | undefined, number | undefined] {
+	if (dateFilterType.value === "all") {
+		return [0, Time.toTimestamp(new Date())];
+	}
+	return [
+		Time.toTimestamp(parseDateTime(dateRange.value[0], false)),
+		Time.toTimestamp(parseDateTime(dateRange.value[1], true))
+	];
+}
+
 async function reload(): Promise<void> {
 	pageIndex.value = 0;
 	recordList.value = [];
@@ -292,7 +521,7 @@ async function refresh(): Promise<void> {
 onMounted(async () => {
 	navBarStore.clearRight();
 	try {
-		await reload();
+		await Promise.all([loadSkuFilter(), reload()]);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "库存流水加载失败"));
 	}
@@ -331,8 +560,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -341,7 +568,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 2;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -352,103 +578,135 @@ onUnmounted(() => {
 			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
-			background: #fff;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;
-			&:after {
-				display: none;
-			}
-
-			:deep(.t-dropdown-menu__item) {
-				min-width: 0;
-			}
-
-			:deep(.t-dropdown-menu__title) {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
 		}
 	}
 
-	.list {
-		margin: 0;
+	.list-wrap {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
 
-		.item {
-			padding: 10px;
-			min-width: 0;
+		.date-summary {
 
 			:deep(.t-cell__title) {
-				min-width: 0;
-				width: 0;
+				flex: 0 0 4.5rem;
 			}
 
-			:deep(.t-cell__title-text) {
+			:deep(.t-cell__note) {
+				flex: 1 1 0;
 				min-width: 0;
-				width: 100%;
+				overflow: hidden;
+				text-align: right;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+
+		.sku {
+			--td-tag-square-border-radius: .5rem;
+
+			padding: 10px;
+
+			:deep(.t-cell__title) {
+				display: flex;
+				align-items: center;
 			}
 
 			.avatar {
-				width: 3.5rem;
-				height: 3.5rem;
-			}
-
-			.icon {
-				width: 2.25rem;
-				height: 2.25rem;
-				display: inline-flex;
-				background: var(--td-bg-color-secondarycontainer);
-				align-items: center;
-				border-radius: 50%;
-				justify-content: center;
+				width: 2rem;
+				height: 2rem;
+				border-radius: .5rem !important;
 			}
 
 			.title {
 				gap: .5rem;
+				display: flex;
 				min-width: 0;
-				max-width: 100%;
-				flex: 1;
-				display: flex;
-				font-size: .75rem;
 				align-items: center;
-				white-space: nowrap;
-
-				.actor {
-					color: var(--td-text-color-secondary);
-					flex: 0 0 auto;
-				}
-
-				.operation {
-					flex: 0 0 auto;
-				}
-
-				.product-name {
-					min-width: 0;
-					flex: 0 1 auto;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-
-				.quantity {
-					color: var(--td-text-color-secondary);
-					flex: 0 0 auto;
-					font-weight: 400;
-				}
 			}
+		}
 
-			.description {
-				gap: .5rem;
-				display: flex;
-				font-size: .75rem;
-				align-items: center;
-				justify-content: space-between;
+		.list {
+			margin: 0;
 
-				.delta {
+			.item {
+				padding: 10px;
+				min-width: 0;
 
-					.value {
-						font-size: 1.25rem;
+				:deep(.t-cell__title) {
+					min-width: 0;
+					width: 0;
+				}
+
+				:deep(.t-cell__title-text) {
+					min-width: 0;
+					width: 100%;
+				}
+
+				.avatar {
+					width: 3.5rem;
+					height: 3.5rem;
+				}
+
+				.icon {
+					width: 2.25rem;
+					height: 2.25rem;
+					display: inline-flex;
+					background: var(--td-bg-color-secondarycontainer);
+					align-items: center;
+					border-radius: 50%;
+					justify-content: center;
+				}
+
+				.title {
+					gap: .5rem;
+					min-width: 0;
+					max-width: 100%;
+					flex: 1;
+					display: flex;
+					font-size: .75rem;
+					align-items: center;
+					white-space: nowrap;
+
+					.actor {
+						color: var(--td-text-color-secondary);
+						flex: 0 0 auto;
+					}
+
+					.operation {
+						flex: 0 0 auto;
+					}
+
+					.product-name {
+						min-width: 0;
+						flex: 0 1 auto;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+
+					.quantity {
+						color: var(--td-text-color-secondary);
+						flex: 0 0 auto;
+						font-weight: 400;
+					}
+				}
+
+				.description {
+					gap: .5rem;
+					display: flex;
+					font-size: .75rem;
+					align-items: center;
+					justify-content: space-between;
+
+					.delta {
+
+						.value {
+							font-size: 1.25rem;
+						}
 					}
 				}
 			}

src/pages/product/ProductStockSkuList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.productStock.read" class="product-stock-sku-list">
-		<div class="search bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="keyword"
 				class="keyword"
@@ -318,18 +318,15 @@ onUnmounted(() => {
 .product-stock-sku-list {
 	padding: var(--app-nav-height) 0 1rem;
 
-	.search {
+	.filters {
 		top: var(--app-nav-height);
 		z-index: 10;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.keyword {
 			border: 1px solid var(--td-component-border);
 			padding: .5rem 1rem;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 	}

src/pages/salesOrder/ConsumptionRecordList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.salesOrder.read" class="consumption-record-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				class="keyword"
 				:value="customerDisplayText"
@@ -474,8 +474,6 @@ onMounted(async () => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -484,7 +482,6 @@ onMounted(async () => {
 
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			padding-right: .3rem;
 			border-radius: 1rem;
 
@@ -501,11 +498,10 @@ onMounted(async () => {
 			--td-spacer-1: 6px;
 
 			width: 100%;
+			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
 			padding-top: .8rem;
-			background: #fff;
-			border: 1px solid rgba(148, 163, 184, .18);
 			border-radius: 0 0 1rem 1rem;
 		}
 	}

src/pages/salesOrder/FundRecordList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="pageAccess" class="sales-order-record-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				class="customer"
 				v-model.trim="customerSearchKeyword"
@@ -32,6 +32,12 @@
 				</template>
 			</t-input>
 			<t-dropdown-menu class="menus">
+				<t-dropdown-item
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="selectDateFilter"
+				/>
 				<t-dropdown-item
 					v-if="!isSelfReceiveOnly"
 					v-model="operationType"
@@ -48,6 +54,20 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
+			<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
+				<t-cell
+					title="开始时间"
+					:note="dateRange[0] || '-'"
+					arrow
+					@click="openStartTime"
+				/>
+				<t-cell
+					title="结束时间"
+					:note="dateRange[1] || '-'"
+					arrow
+					@click="openEndTime"
+				/>
+			</t-cell-group>
 			<t-cell-group v-if="recordList.length" class="empty-cell-title-margin" theme="card">
 				<t-cell
 					class="item"
@@ -124,10 +144,35 @@
 		v-model:visible="customerSelectorVisible"
 		@change="handleCustomerChange"
 	/>
+	<t-popup v-model="startVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="startVisible"
+			v-model="startDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="开始时间"
+			:default-value="dateRange[0]"
+			@cancel="cancelStartTime"
+			@confirm="confirmStartTime"
+		/>
+	</t-popup>
+	<t-popup v-model="endVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="endVisible"
+			v-model="endDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="结束时间"
+			:default-value="dateRange[1]"
+			@cancel="cancelEndTime"
+			@confirm="confirmEndTime"
+		/>
+	</t-popup>
 </template>
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
+import { PassTimeLabel, Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
@@ -135,16 +180,18 @@ import CustomerSelector from "@/components/CustomerSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
 import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
+import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount } from "@/utils/package";
 import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { getCustomerPhotoURL } from "@/utils/customer";
-import { PassTimeLabel } from "timi-web";
 
 defineOptions({ name: "FundRecordList" });
 
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+
 const route = useRoute();
 const router = useRouter();
 const navBarStore = useNavBarStore();
@@ -161,6 +208,21 @@ const customerId = ref(getQueryText(route.query.customerId));
 const selectedCustomer = ref<Customer>();
 const customerSelectorVisible = ref(false);
 const customerSearchKeyword = ref("");
+const dateOptions: Array<{ label: string; value: DateFilterType }> = [
+	{ label: "今天", value: "today" },
+	{ label: "昨天", value: "yesterday" },
+	{ label: "本周", value: "thisWeek" },
+	{ label: "本月", value: "thisMonth" },
+	{ label: "上个月", value: "lastMonth" },
+	{ label: "全部", value: "all" },
+	{ label: "自定义范围", value: "custom" }
+];
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "thisWeek"));
+const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
+const startDraft = ref("");
+const endDraft = ref("");
+const startVisible = ref(false);
+const endVisible = ref(false);
 const isSelfReceiveOnly = computed(() => !userStore.hasPermissions(permissionCodes.fundRecord.read)
 	&& userStore.hasPermissions(permissionCodes.fundReceive.create));
 const pageAccess = computed(() => [permissionCodes.fundRecord.read, permissionCodes.fundReceive.create]);
@@ -179,24 +241,36 @@ const statusOptions = [
 	{ label: "已撤销", value: "CANCELLED" }
 ];
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
+const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const isCustomDate = computed(() => dateFilterType.value === "custom");
 
 function getQueryText(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }
 
+function parseDateRange(type: DateFilterType): [string, string] {
+	if (type !== "custom") {
+		return buildPresetDateRange(type);
+	}
+	return [getQueryText(route.query.beginAt), getQueryText(route.query.endAt)];
+}
+
 async function loadMore(): Promise<void> {
 	if (loading.value || noMore.value) {
 		return;
 	}
 	loading.value = true;
 	try {
+		const [beginAt, endAt] = buildUnixRange();
 		const page = {
 			index: pageIndex.value,
 			size: 15,
 			salesOrderId: String(route.query.salesOrderId || "") || undefined,
 			customerId: customerId.value || undefined,
 			operationType: isSelfReceiveOnly.value || operationType.value === "ALL" ? undefined : operationType.value as FundOperationType,
-			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus
+			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus,
+			beginAt,
+			endAt
 		};
 		const result = isSelfReceiveOnly.value
 			? await SalesOrderAPI.myReceiveRecordList(page)
@@ -283,6 +357,99 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	}
 }
 
+async function selectDateFilter(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	dateFilterType.value = String(value) as DateFilterType;
+	if (dateFilterType.value !== "custom") {
+		dateRange.value = buildPresetDateRange(dateFilterType.value);
+		await replaceFilterQuery();
+		await reload();
+	} else {
+		await replaceFilterQuery();
+	}
+}
+
+function openStartTime(): void {
+	startDraft.value = dateRange.value[0];
+	startVisible.value = true;
+}
+
+function openEndTime(): void {
+	endDraft.value = dateRange.value[1];
+	endVisible.value = true;
+}
+
+function cancelStartTime(): void {
+	startVisible.value = false;
+	startDraft.value = dateRange.value[0];
+}
+
+function cancelEndTime(): void {
+	endVisible.value = false;
+	endDraft.value = dateRange.value[1];
+}
+
+async function confirmStartTime(value?: string | number): Promise<void> {
+	startVisible.value = false;
+	dateRange.value = [String(value || startDraft.value), dateRange.value[1]];
+	await confirmCustomRange();
+}
+
+async function confirmEndTime(value?: string | number): Promise<void> {
+	endVisible.value = false;
+	dateRange.value = [dateRange.value[0], String(value || endDraft.value)];
+	await confirmCustomRange();
+}
+
+async function confirmCustomRange(): Promise<void> {
+	if (dateRange.value[0] && dateRange.value[1] && dateRange.value[1] < dateRange.value[0]) {
+		dateRange.value = [dateRange.value[1], dateRange.value[0]];
+	}
+	dateFilterType.value = "custom";
+	await replaceFilterQuery();
+	await reload();
+}
+
+function buildFilterQuery(transitionDepth = getQueryText(route.query.transitionDepth)): Record<string, string> {
+	const query = {
+		salesOrderId: getQueryText(route.query.salesOrderId),
+		customerId: customerId.value,
+		operationType: isSelfReceiveOnly.value || operationType.value === "ALL" ? "" : operationType.value,
+		status: status.value === "ALL" ? "" : status.value,
+		dateType: dateFilterType.value,
+		beginAt: dateRange.value[0] || "",
+		endAt: dateRange.value[1] || ""
+	};
+	if (isValidTransitionDepth(transitionDepth)) {
+		return { ...query, transitionDepth };
+	}
+	return query;
+}
+
+async function replaceFilterQuery(): Promise<void> {
+	await router.replace({
+		name: "FundRecordList",
+		query: buildFilterQuery()
+	});
+}
+
+function isValidTransitionDepth(value: string): boolean {
+	const depth = Number(value);
+	return value !== "" && Number.isInteger(depth) && 0 <= depth && depth <= 20;
+}
+
+function buildUnixRange(): [number | undefined, number | undefined] {
+	if (dateFilterType.value === "all") {
+		return [0, Time.toTimestamp(new Date())];
+	}
+	return [
+		Time.toTimestamp(parseDateTime(dateRange.value[0], false)),
+		Time.toTimestamp(parseDateTime(dateRange.value[1], true))
+	];
+}
+
 function getOperatorText(item: FundRecord): string {
 	return item.operator?.name || item.operator?.nick || item.operatorUserId || "未知";
 }
@@ -355,8 +522,6 @@ onUnmounted(() => navBarStore.clearRight());
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -364,8 +529,7 @@ onUnmounted(() => navBarStore.clearRight());
 			--td-input-vertical-padding: .25rem 1rem;
 
 			border: 1px solid var(--td-component-border);
-			z-index: 2;
-			background: var(--td-bg-color-container);
+			z-index: 1;
 			padding-right: .3rem;
 			border-radius: 1rem;
 
@@ -381,10 +545,8 @@ onUnmounted(() => navBarStore.clearRight());
 
 			width: 100%;
 			border: 1px solid rgba(148, 163, 184, .18);
-			z-index: -1;
 			overflow: hidden;
 			margin-top: -1rem;
-			background: #fff;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;

src/pages/salesOrder/SalesOrderList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div ref="salesOrderListRef" v-can="permissionCodes.salesOrder.read" class="sales-order-list">
-		<div class="filters">
+		<div class="filters glass">
 			<div class="search-row">
 				<t-input
 					v-model.trim="keyword"
@@ -726,8 +726,6 @@ onUnmounted(() => {
 		z-index: 10;
 		padding: .75rem 1rem .5rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.search-row {
 			gap: .5rem;

src/pages/salesOrder/components/SalesOrderSummary.vue

@@ -126,7 +126,7 @@ function getProductQuantity(product: CustomerProductSummary): string {
 }
 
 function getProductTagContent(product: CustomerProductSummary): string {
-	return `${product.productName || "未命名产品"} × ${getProductQuantity(product)}${product.unit || "基础单位"}`;
+	return `${product.productName || "未命名产品"} ${getProductQuantity(product)} ${product.unit || "基础单位"}`;
 }
 
 async function loadOrderSummary(customerId: string, token: number): Promise<void> {

src/pages/setting/Help.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="help-page empty-cell-title-margin">
-		<div class="search-wrap">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="searchKeyword"
 				class="search"
@@ -289,12 +289,11 @@ onMounted(async () => {
 
 <style scoped lang="less">
 .help-page {
-	gap: 1rem;
 	display: flex;
 	padding: var(--app-nav-height) 0 1rem;
 	flex-direction: column;
 
-	.search-wrap {
+	.filters {
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
@@ -302,8 +301,6 @@ onMounted(async () => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.search {
@@ -313,7 +310,6 @@ onMounted(async () => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 2;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 	}

src/types/Product.ts

@@ -192,6 +192,7 @@ export type StockRecord = {
 export type StockRecordPage = {
 	storeId?: string;
 	productId?: string;
+	skuId?: string;
 	keyword?: string;
 	bizType?: StockBizType;
 	bizId?: string;