add ProductStockPackageSummary.vue

src/api/GaoPointChartAPI.ts

@@ -0,0 +1,26 @@
+import { axios } from "timi-web-api";
+import type { GaoPointChartReq, GaoPointDailyStatView, GaoPointRedemptionProductRankView } from "@/types/GaoChart";
+import { getStoreChartCache } from "@/utils/storeChartCache";
+import { withCurrentStoreId } from "@/utils/store";
+
+const BASE_URI = "/gao/store/chart";
+
+/** 查询按日汇总的获得积分、消耗积分及两者差值。 */
+async function dailyTrend(req: GaoPointChartReq): Promise<GaoPointDailyStatView[]> {
+	return await requestList("point-daily-trend", "/point/ledger/daily", req);
+}
+
+/** 查询兑换积分最高的前 10 个产品，不扣除退回积分。 */
+async function redemptionProductRank(req: GaoPointChartReq): Promise<GaoPointRedemptionProductRankView[]> {
+	return await requestList("point-redemption-product-rank", "/point/redemption/product/rank", req);
+}
+
+async function requestList<T>(name: string, path: string, req: GaoPointChartReq): Promise<T[]> {
+	const request = withCurrentStoreId(req);
+	return await getStoreChartCache(`gao-point:${name}:${JSON.stringify(request)}`, async () => await axios.post(`${BASE_URI}${path}`, request));
+}
+
+export default {
+	dailyTrend,
+	redemptionProductRank
+};

src/api/GaoRoleAPI.ts

@@ -0,0 +1,11 @@
+import { axios } from "timi-web-api";
+import type { Role } from "timi-web-api";
+
+const BASE_URI = "/gao/role";
+
+export const GaoRoleAPI = {
+	/** 查询登录用户所属门店内可管理的角色。 */
+	async managementList(): Promise<Role[]> {
+		return await axios.post(`${BASE_URI}/management/list`);
+	}
+};

src/api/ProductAPI.ts

@@ -62,6 +62,10 @@ async function disable(id: string): Promise<void> {
 	await axios.post(`${PRODUCT_URI}/disable`, undefined, { params: { id } });
 }
 
+async function remove(id: string): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/delete`, undefined, { params: { id } });
+}
+
 async function skuDetail(id: string): Promise<ProductSku> {
 	return await axios.post(`${PRODUCT_URI}/sku/detail`, undefined, { params: { id } });
 }
@@ -86,10 +90,18 @@ async function specCreate(spec: ProductSpec): Promise<string> {
 	return await axios.post(`${PRODUCT_URI}/spec/create`, spec);
 }
 
+async function specUpdate(spec: ProductSpec): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/spec/update`, spec);
+}
+
 async function specValueCreate(value: ProductSpecValue): Promise<string> {
 	return await axios.post(`${PRODUCT_URI}/spec/value/create`, value);
 }
 
+async function specValueUpdate(value: ProductSpecValue): Promise<void> {
+	await axios.post(`${PRODUCT_URI}/spec/value/update`, value);
+}
+
 async function sellableList(page: ProductPage): Promise<Product[]> {
 	return await axios.post(`${PRODUCT_URI}/sellable/list`, withCurrentStoreId(page));
 }
@@ -155,13 +167,16 @@ export default {
 	create,
 	update,
 	disable,
+	remove,
 	skuDetail,
 	skuCreate,
 	skuUpdate,
 	skuDisable,
 	specList,
 	specCreate,
+	specUpdate,
 	specValueCreate,
+	specValueUpdate,
 	sellableList,
 	stockList,
 	stockProductList,

src/api/TagAPI.ts

@@ -1,6 +1,7 @@
 import { axios } from "timi-web-api";
 import type { Page, PageResult } from "timi-web-api";
 import type { Tag, TagApply, TagBizType } from "@/types/Tag";
+import { getCurrentStoreId } from "@/utils/store";
 
 const BASE_URI = "/gao/tag";
 
@@ -15,7 +16,16 @@ async function detail(id: string): Promise<Tag> {
 }
 
 async function create(tag: Tag): Promise<Tag> {
-	return await axios.post(`${BASE_URI}/create`, tag);
+	const ownerId = tag.ownerId || getCurrentStoreId();
+	if (!ownerId) {
+		throw new Error("无法确定标签所属门店");
+	}
+
+	return await axios.post(`${BASE_URI}/create`, {
+		...tag,
+		ownerType: tag.ownerType || "GAO_STORE",
+		ownerId
+	});
 }
 
 async function update(tag: Tag): Promise<void> {

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/components/DateRangeChartCard.vue

@@ -24,7 +24,7 @@ import type { EChartsOption } from "echarts";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import { useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
 
-type ChartOptionBuilder = (visibleDateTextList: string[]) => EChartsOption;
+type ChartOptionBuilder = (visibleDateTextList: string[], chartWidth: number) => EChartsOption;
 
 const props = withDefaults(defineProps<{
 	caption?: string;
@@ -42,6 +42,7 @@ const props = withDefaults(defineProps<{
 });
 
 const dateTextList = computed(() => props.dateTextList);
+const chartWidth = ref(window.innerWidth);
 const {
 	rangeText,
 	showSlider: chartShowSlider,
@@ -51,9 +52,27 @@ const {
 	handleSliderChange
 } = useStoreChartWindow(dateTextList);
 const option = computed<EChartsOption>(() => typeof props.option === "function"
-	? props.option(visibleDateTextList.value)
+	? props.option(visibleDateTextList.value, chartWidth.value)
 	: props.option);
 const { chartElement } = useStoreChart(option);
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
+});
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
+
+function updateChartWidth(): void {
+	chartWidth.value = chartElement.value?.clientWidth || window.innerWidth;
+}
 </script>
 
 <style scoped lang="less">

src/components/TagSelector.vue

@@ -1,16 +1,19 @@
 <template>
-	<t-popup v-model="popupVisible" placement="bottom">
-		<div class="tag-selector bg-white">
-			<div class="title-bar">
-				<t-button variant="text" size="small" @click="cancelSelection">取消</t-button>
-				<h3 class="title">选择标签</h3>
-				<t-button theme="primary" variant="text" size="small" @click="confirmSelection">确定</t-button>
-			</div>
-			<div class="search-row">
+	<bottom-popup
+		v-model="popupVisible"
+		title="选择标签"
+		height="78vh"
+		left-button-text="取消"
+		right-button-text="确定"
+		@left-button-click="cancelSelection"
+		@right-button-click="confirmSelection"
+	>
+		<div class="tag-selector">
+			<div class="filters glass">
 				<t-input
 					class="input"
 					size="small"
-					v-model.trim="keyword"
+					v-model="keyword"
 					borderless
 					clearable
 					placeholder="搜索标签"
@@ -19,7 +22,7 @@
 					<t-input
 						class="input"
 						size="small"
-						v-model.trim="newTagName"
+						v-model="newTagName"
 						borderless
 						clearable
 						placeholder="新增标签名称"
@@ -29,10 +32,12 @@
 						size="small"
 						:loading="isCreating"
 						:disabled="isCreating"
+						content="新增"
 						@click="createTag"
-					>新增</t-button>
+					/>
 				</template>
 			</div>
+			<div class="list-wrap">
 				<div class="list">
 					<t-tag
 						v-for="(item, index) in visibleTagList"
@@ -46,13 +51,15 @@
 					>
 						<span v-text="getTagName(item)" />
 					</t-tag>
-				<div v-if="!visibleTagList.length" class="empty" v-text="emptyText" />
+					<div v-if="!visibleTagList.length" class="center-tips" v-text="emptyText" />
 				</div>
 			</div>
-	</t-popup>
+		</div>
+	</bottom-popup>
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
 import { Message } from "@/utils/message";
 import { useUserStore } from "timi-web-api";
 import TagAPI from "@/api/TagAPI";
@@ -198,33 +205,20 @@ watch(() => props.visible, async (value) => {
 
 <style scoped lang="less">
 .tag-selector {
-	display: flex;
-	height: 78vh;
-	padding-top: 1rem;
-	border-radius: 1.25rem 1.25rem 0 0;
-	flex-direction: column;
+	height: 100%;
+	overflow: auto;
+	min-height: 0;
 
-	.title-bar {
-		padding: 0 1rem;
-		display: grid;
-		grid-template-columns: 4rem 1fr 4rem;
-		align-items: center;
-	}
-
-	.title {
-		margin: 0;
-		font-size: 1rem;
-		text-align: center;
-	}
-
-	.search-row {
+	.filters {
 		gap: .5rem;
+		top: 0;
 		display: flex;
-		padding: 1rem;
+		padding: .5rem 1rem;
+		position: sticky;
 		align-items: center;
 
 		.input {
-			--td-input-vertical-padding: 6px;
+			--td-input-vertical-padding: .5rem 1rem;
 
 			border: 1px solid var(--td-component-border);
 			border-radius: .875rem;
@@ -233,13 +227,10 @@ watch(() => props.visible, async (value) => {
 
 	.list {
 		gap: .75rem;
-		flex: 1;
-		overflow: auto;
-		min-height: 0;
 		display: flex;
+		padding: 0 1rem 1rem;
 		flex-wrap: wrap;
 		align-content: flex-start;
-		padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0)) 1rem;
 
 		.item {
 			flex: 1 1 auto;
@@ -248,22 +239,10 @@ watch(() => props.visible, async (value) => {
 			max-width: 100%;
 			justify-content: center;
 		}
-
-		.empty {
-			color: #52607a;
-			padding: 2rem 1rem;
-			text-align: center;
-		}
 	}
 }
 
-:global(html.theme-dark) {
-	.tag-selector {
-		background: rgba(15, 23, 42, .96);
-
-		.empty {
-			color: #94a3b8;
-		}
-	}
+:global(.bottom-popup:has(.tag-selector) .body) {
+	overflow: hidden;
 }
 </style>

src/components/mediaSelector/MediaSelector.vue

@@ -37,6 +37,7 @@
 		v-model:visible="photoViewerVisible"
 		:images="photoViewerImages"
 		:items="photoViewerItems"
+		:viewer-z-index="props.viewerZIndex"
 		:show-actions="showViewerActions === true"
 		:submitting="isSubmitting"
 		@change-type="changePhotoType"
@@ -75,6 +76,7 @@ interface Props {
 	showTypeLabel?: boolean;
 	submit?: (photoItems: PhotoItem[]) => Promise<void>;
 	title?: string;
+	viewerZIndex?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {

src/components/mediaSelector/MediaSelectorViewer.vue

@@ -3,6 +3,7 @@
 	<t-image-viewer
 		v-model:visible="viewerVisible"
 		:images="images"
+		:style="{ zIndex: props.viewerZIndex }"
 		show-index
 		@close="handleClose"
 		@index-change="handleIndexChange"
@@ -103,6 +104,7 @@ interface Props {
 	showActions: boolean;
 	submitting: boolean;
 	visible: boolean;
+	viewerZIndex?: number;
 }
 
 const props = defineProps<Props>();

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/AiChatPanel.vue

@@ -342,7 +342,7 @@ onUnmounted(() => navBarStore.clearRight());
 
 <style scoped lang="less">
 .shared-panel {
-	padding-top: var(--app-nav-height);
+	--ai-msg-padding-top: calc(var(--app-nav-height) + 1rem);
 
 	:deep(.welcome) {
 		margin: auto 0;

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;
 		}
 	}
@@ -565,7 +561,6 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 		gap: 1rem;
 		display: flex;
 		flex-direction: column;
-		padding: 1rem 0;
 
 		.summary {
 			overflow: hidden;

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"
@@ -21,18 +21,18 @@
 				</template>
 			</t-input>
 			<t-dropdown-menu ref="dropdownMenuRef" class="menus">
-				<t-dropdown-item
-					v-model="statusFilter"
-					:label="statusFilterLabel"
-					:options="statusOptions"
-					@change="handleStatusChange"
-				/>
 				<t-dropdown-item
 					v-model="dateFilterType"
 					:label="dateFilterLabel"
 					:options="dateOptions"
 					@change="handleDateFilterChange"
 				/>
+				<t-dropdown-item
+					v-model="statusFilter"
+					:label="statusFilterLabel"
+					:options="statusOptions"
+					@change="handleStatusChange"
+				/>
 				<t-dropdown-item
 					:label="selectedResponsibleName"
 					:options="[]"
@@ -41,34 +41,17 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
-			class="list-wrap"
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
 			@refresh="refresh"
 			@scrolltolower="fetch"
 		>
+			<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="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 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
@@ -149,6 +132,7 @@
 					</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"
@@ -204,11 +188,7 @@ import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
 import type { ManagedUser } from "@/types/ManagedUser";
-import type {
-	FollowUpReminder,
-	FollowUpReminderPage,
-	FollowUpReminderStatus
-} from "@/types/FollowUpReminder";
+import type { FollowUpReminder, FollowUpReminderPage, FollowUpReminderStatus } from "@/types/FollowUpReminder";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { parseDateTime } from "@/utils/date";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
@@ -398,18 +378,6 @@ function openResponsibleSelector(): void {
 	responsibleSelectorVisible.value = true;
 }
 
-async function clearFilters(): Promise<void> {
-	statusFilter.value = "";
-	dateFilterType.value = "all";
-	dateRange.value = ["", ""];
-	selectedCustomerId.value = "";
-	selectedCustomer.value = undefined;
-	customerSearchKeyword.value = "";
-	selectedResponsibleId.value = "";
-	selectedResponsible.value = undefined;
-	await refresh();
-}
-
 // ---------- 列表 ----------
 
 const isRefreshing = ref(false);
@@ -676,7 +644,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 +652,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 +660,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 +669,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 +698,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">
+				<div class="time-actions">
 					<t-button
 						theme="primary"
 						variant="outline"
 						size="extra-small"
 						:content="deliveredAtText || '此刻'"
-					@click="pickerVisible = true"
+						@click="openDeliveredAtPicker"
 					/>
+					<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" />
@@ -114,7 +124,15 @@
 			</t-form-item>
 		</t-form>
 		<t-popup v-model="pickerVisible" placement="bottom">
-			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="履约时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
+			<t-date-time-picker
+				v-if="pickerVisible"
+				v-model="draftTime"
+				format="YYYY-MM-DD HH:mm"
+				:mode="['date', 'minute']"
+				title="履约时间"
+				@cancel="pickerVisible = false"
+				@confirm="confirmTime"
+			/>
 		</t-popup>
 		<t-popup v-model="unitPickerVisible" placement="bottom">
 			<t-picker v-model="unitPickerDraft" :columns="unitPickerOptions" title="选择实际履约单位" @cancel="unitPickerVisible = false" @confirm="confirmUnitPicker" />
@@ -126,6 +144,7 @@
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import ProductAPI from "@/api/ProductAPI";
+import { Time } from "timi-web";
 import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductSkuTags from "@/components/ProductSkuTags.vue";
 import ProductStockPreview from "@/components/ProductStockPreview.vue";
@@ -373,6 +392,16 @@ function confirmTime(value: string | number): void {
 	pickerVisible.value = false;
 }
 
+function openDeliveredAtPicker(): void {
+	draftTime.value = deliveredAtText.value || Time.formatDateTime(new Date());
+	pickerVisible.value = true;
+}
+
+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 +692,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"
@@ -31,13 +31,18 @@
 					</div>
 				</template>
 			</t-input>
-			<t-dropdown-menu class="menus">
+			<t-dropdown-menu ref="filterMenuRef" class="menus">
 				<t-dropdown-item
 					v-model="dateFilterType"
 					:label="dateFilterLabel"
 					:options="dateOptions"
 					@change="selectDateFilter"
 				/>
+				<t-dropdown-item
+					:label="skuFilterLabel"
+					:options="[]"
+					@open="openSkuFilter"
+				/>
 				<t-dropdown-item
 					v-model="status"
 					label="履约状态"
@@ -53,7 +58,8 @@
 			@scrolltolower="loadMore"
 		>
 			<div class="list-wrap">
-				<t-cell-group v-if="salesOrder" class="order-info" theme="card">
+				<t-cell-group v-if="salesOrder || selectedSkuOptionList.length" class="filter-info" theme="card">
+					<template v-if="salesOrder">
 						<t-cell title="订单号" :note="salesOrder.orderNo || salesOrder.id || '未知订单'" />
 						<t-cell title="订单类型" :note="getSalesOrderTypeText(salesOrder.orderType)" />
 						<t-cell title="订单状态">
@@ -65,6 +71,21 @@
 								/>
 							</template>
 						</t-cell>
+					</template>
+					<t-cell v-if="selectedSkuOptionList.length" class="sku-filter-cell" title="已筛选 SKU">
+						<template #note>
+							<div class="selected-sku-list">
+								<t-tag
+									v-for="sku in selectedSkuOptionList"
+									:key="sku.skuId"
+									size="small"
+									theme="primary"
+									variant="outline"
+									:content="formatSelectedSkuName(sku.productName, sku.skuName)"
+								/>
+							</div>
+						</template>
+					</t-cell>
 				</t-cell-group>
 				<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
 					<t-cell
@@ -96,6 +117,12 @@
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu v-if="canCreate" :actions="actions" />
+	<sku-filter-popup
+		v-model="skuFilterVisible"
+		:sku-id-list="selectedSkuIdList"
+		@options-loaded="handleSkuFilterOptionsLoaded"
+		@confirm="confirmSkuFilter"
+	/>
 	<customer-selector
 		v-model="customerId"
 		v-model:visible="customerSelectorVisible"
@@ -137,6 +164,7 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
 import OrderFulfillmentListCell from "@/pages/fulfillment/components/OrderFulfillmentListCell.vue";
+import SkuFilterPopup from "@/pages/fulfillment/components/SkuFilterPopup.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoFulfillmentStatus, OrderFulfillment } from "@/types/Fulfillment";
 import type { NavBarAction } from "@/types/NavBarAction";
@@ -152,6 +180,7 @@ defineOptions({ name: "OrderFulfillmentList" });
 
 const route = useRoute();
 const router = useRouter();
+const filterMenuRef = ref<{ collapseMenu: () => void }>();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
@@ -172,6 +201,7 @@ const actions = computed<NavBarAction[]>(() => [
 	}
 ]);
 type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type SkuFilterOption = { skuId: string; productName: string; skuName: string };
 const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
@@ -183,11 +213,14 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 ];
 
 const customerId = ref(getQueryText(route.query.customerId));
+const selectedSkuIdList = ref(getSkuIdList(route.query.skuIds));
 const selectedCustomer = ref<Customer>();
 const salesOrder = ref<SalesOrder>();
+const skuFilterOptionList = ref<SkuFilterOption[]>([]);
+const skuFilterVisible = ref(false);
 const customerSelectorVisible = ref(false);
 const customerSearchKeyword = ref("");
-const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "today"));
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "all"));
 const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
 const startDraft = ref("");
 const endDraft = ref("");
@@ -211,12 +244,27 @@ const statusOptions = [
 	{ label: "已冲正", value: "REVOKED" }
 ];
 const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const selectedSkuOptionList = computed(() => {
+	const optionMap = new Map(skuFilterOptionList.value.map(option => [option.skuId, option]));
+	return selectedSkuIdList.value
+		.map(skuId => optionMap.get(skuId))
+		.filter((option): option is SkuFilterOption => !!option);
+});
+const skuFilterLabel = computed(() => selectedSkuIdList.value.length ? `SKU (${selectedSkuIdList.value.length})` : "产品 SKU");
 const isCustomDate = computed(() => dateFilterType.value === "custom");
 
 function getQueryText(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }
 
+function getSkuIdList(value: unknown): string[] {
+	const queryValueList = Array.isArray(value) ? value : [value];
+	return [...new Set(queryValueList
+		.flatMap(item => typeof item === "string" ? item.split(",") : [])
+		.map(item => item.trim())
+		.filter(Boolean))];
+}
+
 function getInitialStatus(value: unknown): "ALL" | GaoFulfillmentStatus {
 	const statusValue = getQueryText(value);
 	if (["WAITING_STOCK", "PENDING", "VERIFIED", "REJECTED", "CANCELLED", "REVOKED"].includes(statusValue)) {
@@ -250,6 +298,7 @@ async function fetchList(reset: boolean): Promise<void> {
 			size: pageSize,
 			salesOrderId: getQueryText(route.query.salesOrderId) || undefined,
 			customerId: customerId.value || undefined,
+			skuIdList: selectedSkuIdList.value.length ? selectedSkuIdList.value : undefined,
 			beginAt,
 			endAt,
 			status: status.value === "ALL" ? undefined : status.value
@@ -297,6 +346,29 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	}
 }
 
+async function openSkuFilter(): Promise<void> {
+	skuFilterVisible.value = true;
+	await nextTick();
+	filterMenuRef.value?.collapseMenu();
+}
+
+function handleSkuFilterOptionsLoaded(optionList: SkuFilterOption[]): void {
+	skuFilterOptionList.value = optionList;
+}
+
+async function confirmSkuFilter(skuIdList: string[]): Promise<void> {
+	selectedSkuIdList.value = skuIdList;
+	await replaceFilterQuery();
+	await reloadList();
+}
+
+function formatSelectedSkuName(productName: string, skuName: string) {
+	if (productName === skuName) {
+		return productName;
+	}
+	return `${productName}（${skuName}）`;
+}
+
 async function handleCustomerChange(value: string | string[]): Promise<void> {
 	customerId.value = Array.isArray(value) ? String(value[0] || "") : value;
 	try {
@@ -417,6 +489,7 @@ function buildFilterQuery(transitionDepth = getQueryText(route.query.transitionD
 	const query = {
 		salesOrderId: getQueryText(route.query.salesOrderId),
 		customerId: customerId.value,
+		skuIds: selectedSkuIdList.value.join(","),
 		dateType: dateFilterType.value,
 		beginAt: dateRange.value[0] || "",
 		endAt: dateRange.value[1] || "",
@@ -517,8 +590,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 +597,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;
 
@@ -543,11 +614,9 @@ 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;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;
@@ -558,9 +627,44 @@ onUnmounted(() => navBarStore.clearRight());
 	.list-wrap {
 		gap: 1rem;
 		display: flex;
-		padding-top: 1rem;
 		flex-direction: column;
 
+		.filter-info {
+			.selected-sku-list {
+				gap: .4rem;
+				width: 100%;
+				display: flex;
+				min-width: 0;
+				max-width: 100%;
+				overflow-x: auto;
+				justify-content: flex-start;
+				white-space: nowrap;
+				touch-action: pan-x;
+				scrollbar-width: none;
+				-webkit-overflow-scrolling: touch;
+
+				&::-webkit-scrollbar {
+					display: none;
+				}
+
+				:deep(.t-tag) {
+					flex: none;
+				}
+			}
+
+			.sku-filter-cell {
+				:deep(.t-cell__title) {
+					flex: 0 0 5rem;
+				}
+
+				:deep(.t-cell__note) {
+					flex: 1 1 0;
+					min-width: 0;
+					overflow: hidden;
+				}
+			}
+		}
+
 		.date-summary {
 
 			:deep(.t-cell__title) {

src/pages/fulfillment/components/SkuFilterPopup.vue

@@ -0,0 +1,367 @@
+<template>
+	<bottom-popup
+		v-model="popupVisible"
+		title="筛选产品 SKU"
+		height="min(80vh, 48rem)"
+		left-button-text="重置"
+		right-button-text="确定"
+		@left-button-click="resetSelection"
+		@right-button-click="confirmSelection"
+	>
+		<div class="sku-filter-popup">
+			<div class="filters glass">
+				<t-input
+					class="search"
+					v-model="keyword"
+					borderless
+					clearable
+					placeholder="搜索产品名称、拼音、编码或 SKU"
+				/>
+			</div>
+			<div v-if="singleSkuProductList.length" class="single-list">
+				<t-cell-group theme="card">
+					<t-cell
+						class="sku-cell"
+						v-for="product in singleSkuProductList"
+						:key="product.id"
+						@click="toggleSkuSelected(getSkuId(getProductSkuList(product)[0]))"
+					>
+						<template #title>
+							<div @click.stop>
+								<t-checkbox
+									:model-value="draftSkuIdList.includes(getSkuId(getProductSkuList(product)[0]))"
+									icon="line"
+									:block="false"
+									borderless
+									@update:model-value="checked => setSkuSelected(getSkuId(getProductSkuList(product)[0]), checked)"
+								>
+									<span v-text="product.name || '未命名产品'" />
+								</t-checkbox>
+							</div>
+						</template>
+					</t-cell>
+				</t-cell-group>
+			</div>
+			<t-collapse
+				v-if="multiSkuProductList.length"
+				v-model="expandedProductIdList"
+				class="multi-list"
+				:expand-mutex="false"
+			>
+				<t-collapse-panel
+					v-for="product in multiSkuProductList"
+					:key="product.id"
+					:value="product.id || ''"
+					class="collapse-panel"
+				>
+					<template #header>
+						<div class="header">
+							<div class="group-checkbox" @click.stop>
+								<t-checkbox
+									:model-value="0 < getVisibleSelectedSkuCount(product)"
+									:indeterminate="isProductPartiallySelected(product)"
+									icon="line"
+									:block="false"
+									borderless
+									@update:model-value="toggleProductSkuSelection(product)"
+								/>
+							</div>
+							<span class="clip-text" v-text="product.name || '未命名产品'" />
+							<span
+								v-if="getSelectedSkuCount(product)"
+								class="tips"
+								v-text="`已选 ${getSelectedSkuCount(product)} 个`"
+							/>
+						</div>
+					</template>
+						<t-cell-group theme="card" class="sku-choice-list">
+						<t-cell
+							v-for="sku in getVisibleProductSkuList(product)"
+							:key="sku.id"
+							class="sku-cell"
+							@click="toggleSkuSelected(getSkuId(sku))"
+						>
+							<template #title>
+								<div class="title">
+									<div @click.stop>
+										<t-checkbox
+											:model-value="draftSkuIdList.includes(getSkuId(sku))"
+											icon="line"
+											:block="false"
+											borderless
+											@update:model-value="checked => setSkuSelected(getSkuId(sku), checked)"
+										/>
+									</div>
+									<span class="clip-text" v-text="getSkuText(sku)" />
+								</div>
+							</template>
+						</t-cell>
+					</t-cell-group>
+				</t-collapse-panel>
+			</t-collapse>
+			<div
+				v-if="!singleSkuProductList.length && !multiSkuProductList.length"
+				class="center-tips"
+				v-text="loadingProducts ? '正在加载产品 SKU' : keyword ? '没有匹配的产品或 SKU' : '暂无可筛选的产品 SKU'"
+			/>
+		</div>
+	</bottom-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import ProductAPI from "@/api/ProductAPI";
+import type { Product, ProductSku } from "@/types/Product";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "SkuFilterPopup" });
+
+type SkuFilterOption = { skuId: string; productName: string; skuName: string };
+
+const props = defineProps<{
+	modelValue: boolean;
+	skuIdList: string[];
+}>();
+const emit = defineEmits<{
+	"update:modelValue": [value: boolean];
+	"options-loaded": [optionList: SkuFilterOption[]];
+	confirm: [skuIdList: string[]];
+}>();
+
+const popupVisible = computed({
+	get: () => props.modelValue,
+	set: value => emit("update:modelValue", value)
+});
+const draftSkuIdList = ref<string[]>([...props.skuIdList]);
+const keyword = ref("");
+const productList = ref<Product[]>([]);
+const expandedProductIdList = ref<Array<string | number>>([]);
+const loadingProducts = ref(false);
+const normalizedKeyword = computed(() => keyword.value.trim().toLocaleLowerCase());
+const filterableProductList = computed(() => productList.value.filter(product => !!product.id && 0 < getProductSkuList(product).length));
+const singleSkuProductList = computed(() => filterableProductList.value.filter(product => getProductSkuList(product).length === 1 && matchesProductSearch(product)));
+const multiSkuProductList = computed(() => filterableProductList.value.filter(product => 1 < getProductSkuList(product).length && matchesProductSearch(product)));
+const skuFilterOptionList = computed<SkuFilterOption[]>(() => filterableProductList.value.flatMap(product => getProductSkuList(product).map(sku => ({
+	skuId: getSkuId(sku),
+	productName: product.name || "未命名产品",
+	skuName: getSkuText(sku)
+}))));
+
+watch(() => props.modelValue, visible => {
+	if (!visible) {
+		return;
+	}
+	draftSkuIdList.value = [...props.skuIdList];
+	expandSelectedProducts();
+});
+
+watch(() => props.skuIdList, skuIdList => {
+	if (!props.modelValue) {
+		draftSkuIdList.value = [...skuIdList];
+	}
+}, { deep: true });
+
+watch(normalizedKeyword, value => {
+	if (value) {
+		expandedProductIdList.value = multiSkuProductList.value.map(product => product.id || "");
+	}
+});
+
+function getProductSkuList(product: Product): ProductSku[] {
+	return (product.skuList || []).filter((sku): sku is ProductSku & { id: string } => !!sku.id);
+}
+
+function getSkuId(sku?: ProductSku): string {
+	return sku?.id || "";
+}
+
+function getSkuText(sku?: ProductSku): string {
+	return sku?.specSummary || sku?.name || "默认 SKU";
+}
+
+function matchesSearchText(value?: string | null): boolean {
+	return !!normalizedKeyword.value && !!value?.toLocaleLowerCase().includes(normalizedKeyword.value);
+}
+
+function matchesProductName(product: Product): boolean {
+	return [
+		product.name,
+		product.namePinyinFull,
+		product.namePinyinInitial,
+		product.namePinyinMixed,
+		product.code
+	].some(matchesSearchText);
+}
+
+function matchesSku(sku: ProductSku): boolean {
+	return [sku.name, sku.specSummary, sku.code, sku.barcode].some(matchesSearchText);
+}
+
+function matchesProductSearch(product: Product): boolean {
+	return !normalizedKeyword.value
+		|| matchesProductName(product)
+		|| getProductSkuList(product).some(matchesSku);
+}
+
+function getVisibleProductSkuList(product: Product): ProductSku[] {
+	const skuList = getProductSkuList(product);
+	if (!normalizedKeyword.value || matchesProductName(product)) {
+		return skuList;
+	}
+	return skuList.filter(matchesSku);
+}
+
+function getSelectedSkuCount(product: Product): number {
+	const skuIdSet = new Set(getProductSkuList(product).map(getSkuId));
+	return draftSkuIdList.value.filter(skuId => skuIdSet.has(skuId)).length;
+}
+
+function getVisibleSelectedSkuCount(product: Product): number {
+	const skuIdSet = new Set(getVisibleProductSkuList(product).map(getSkuId));
+	return draftSkuIdList.value.filter(skuId => skuIdSet.has(skuId)).length;
+}
+
+function isProductPartiallySelected(product: Product): boolean {
+	const selectedCount = getVisibleSelectedSkuCount(product);
+	return 0 < selectedCount && selectedCount < getVisibleProductSkuList(product).length;
+}
+
+function toggleProductSkuSelection(product: Product): void {
+	const skuIdList = getVisibleProductSkuList(product).map(getSkuId);
+	const skuIdSet = new Set(draftSkuIdList.value);
+	const shouldSelectAll = !skuIdList.every(skuId => skuIdSet.has(skuId));
+	for (const skuId of skuIdList) {
+		if (shouldSelectAll) {
+			skuIdSet.add(skuId);
+		} else {
+			skuIdSet.delete(skuId);
+		}
+	}
+	draftSkuIdList.value = [...skuIdSet];
+}
+
+function expandSelectedProducts(): void {
+	if (normalizedKeyword.value) {
+		expandedProductIdList.value = multiSkuProductList.value.map(product => product.id || "");
+		return;
+	}
+	expandedProductIdList.value = multiSkuProductList.value
+		.filter(product => getProductSkuList(product).some(sku => props.skuIdList.includes(getSkuId(sku))))
+		.map(product => product.id || "");
+}
+
+function setSkuSelected(skuId: string, checked: boolean): void {
+	if (!skuId) {
+		return;
+	}
+	const skuIdSet = new Set(draftSkuIdList.value);
+	if (checked) {
+		skuIdSet.add(skuId);
+	} else {
+		skuIdSet.delete(skuId);
+	}
+	draftSkuIdList.value = [...skuIdSet];
+}
+
+function toggleSkuSelected(skuId: string): void {
+	setSkuSelected(skuId, !draftSkuIdList.value.includes(skuId));
+}
+
+function resetSelection(): void {
+	draftSkuIdList.value = [];
+}
+
+function confirmSelection(): void {
+	emit("confirm", [...new Set(draftSkuIdList.value)]);
+	popupVisible.value = false;
+}
+
+async function loadFilterProducts(): Promise<void> {
+	loadingProducts.value = true;
+	try {
+		const result = await ProductAPI.list({ index: 0, size: 1000 });
+		productList.value = result.list || [];
+		emit("options-loaded", skuFilterOptionList.value);
+		expandSelectedProducts();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "产品 SKU 筛选项加载失败"));
+	} finally {
+		loadingProducts.value = false;
+	}
+}
+
+onMounted(loadFilterProducts);
+</script>
+
+<style scoped lang="less">
+.sku-filter-popup {
+	display: flex;
+	flex-direction: column;
+
+	:deep(.t-cell-group) {
+		margin: 0;
+	}
+
+	.filters {
+		top: 0;
+		z-index: 1;
+		padding: .5rem 1rem;
+		position: sticky;
+
+		.search {
+			border: 1px solid var(--td-component-border);
+			padding: .5rem 1rem;
+			border-radius: 1rem;
+		}
+	}
+
+	.single-list,
+	.multi-list {
+		margin: 0;
+	}
+
+	.multi-list {
+		border-top: 1px solid var(--td-component-stroke);
+
+		.collapse-panel {
+
+			:deep(.t-collapse-panel__content) {
+				padding: 0 0 0 1rem;
+			}
+
+			.header {
+				display: flex;
+				min-width: 0;
+				align-items: center;
+				justify-content: space-between;
+
+				.group-checkbox {
+					flex: 0 0 auto;
+				}
+			}
+		}
+	}
+
+	.sku-choice-list {
+		margin: 0;
+	}
+
+	.sku-cell,
+	:deep(.t-collapse-panel__title) {
+		padding: .5rem;
+
+		.title {
+			gap: .125rem;
+			display: flex;
+			min-width: 0;
+		}
+	}
+
+	.tips {
+		color: var(--td-text-color-secondary);
+		font-size: .75rem;
+		margin-left: .5rem;
+	}
+}
+</style>

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/permission/PermissionSettings.vue

@@ -92,12 +92,10 @@ const router = useRouter();
 const userStore = useUserStore();
 const permissionStore = usePermissionSettingsStore();
 const authorizationRoleList = ref<Role[]>([]);
-const directRoleIdSet = ref(new Set<string>());
-const manageableRoleIdSet = ref(new Set<string>());
 const isSystemAdmin = computed(() => userStore.hasRoles(coreRoleCodes.admin));
 const roleCount = computed(() => authorizationRoleList.value.length);
 const permissionCount = computed(() => permissionStore.permissionList.length);
-type RoleTreeItem = Pick<Role, "id" | "name" | "parentRoleId" | "protectedRole"> & { level: number };
+type RoleTreeItem = Pick<Role, "id" | "name" | "parentRoleId" | "protectedRole" | "ownerType"> & { level: number };
 
 const visibleRoleTree = computed<RoleTreeItem[]>(() => {
 	if (isSystemAdmin.value) {
@@ -147,36 +145,15 @@ function canAssignRole(role: Pick<Role, "protectedRole">): boolean {
 	return isSystemAdmin.value || role.protectedRole !== true;
 }
 
-function getRoleScopeLabel(role: Pick<Role, "id">): string {
-	const direct = directRoleIdSet.value.has(role.id);
-	const manageable = manageableRoleIdSet.value.has(role.id);
-	if (direct && manageable) {
-		return "直属且可管理";
-	}
-	return direct ? "直属角色" : "可管理角色";
+function getRoleScopeLabel(role: Pick<Role, "ownerType">): string {
+	return isSystemAdmin.value ? "系统角色" : role.ownerType === "STORE" ? "本店角色" : "可管理角色";
 }
 
 // ---------- 页面数据 ----------
 
 onMounted(async () => {
-	if (isSystemAdmin.value) {
 	await permissionStore.loadAll();
 	authorizationRoleList.value = permissionStore.roleList;
-		return;
-	}
-
-	await permissionStore.loadAll();
-	const [manageableRoleList, currentRoleList] = await Promise.all([
-		permissionStore.loadManageableRoles(),
-		permissionStore.loadCurrentRoleDetails()
-	]);
-	const roleMap = new Map<string, Role>();
-	for (const role of [...currentRoleList, ...manageableRoleList]) {
-		roleMap.set(role.id, role);
-	}
-	authorizationRoleList.value = Array.from(roleMap.values());
-	directRoleIdSet.value = new Set(currentRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
-	manageableRoleIdSet.value = new Set(manageableRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
 });
 </script>
 

src/pages/permission/RoleDelegationPermissionAssign.vue

@@ -186,7 +186,7 @@ function clearPermissionState(): void {
 // ---------- 授权范围 ----------
 
 async function loadAuthorizationScope(): Promise<void> {
-	candidateRoleList.value = isSystemAdmin.value ? permissionStore.roleList : await permissionStore.loadManageableRoles();
+	candidateRoleList.value = permissionStore.roleList;
 }
 
 onMounted(async () => {

src/pages/permission/RoleEdit.vue

@@ -330,7 +330,7 @@ async function fillForm(): Promise<void> {
 	await permissionStore.loadAll();
 	await loadAuthorizationScope();
 	if (isCreateMode.value) {
-		parentRoleOptions.value = await permissionStore.loadCreateParentGrantableRoles();
+		parentRoleOptions.value = filterStoreParentRoles(await permissionStore.loadCreateParentGrantableRoles());
 		formModel.parentRoleId = parentRoleOptions.value[0]?.id || "";
 		return;
 	}
@@ -355,30 +355,38 @@ async function reloadCurrentRole(): Promise<void> {
 		childRoleIdList
 	});
 	parentRoleOptions.value = canEditParentRole.value
-		? await permissionStore.loadParentGrantableRoles(current.id)
+		? filterStoreParentRoles(await permissionStore.loadParentGrantableRoles(current.id))
 		: [];
-	if (current.parentRole?.id && !parentRoleOptions.value.some(item => item.id === current.parentRoleId)) {
+	const currentParent = current.parentRole;
+	const canKeepCurrentParent = isSystemAdmin.value || Boolean(currentParent && (
+		currentParent.moduleCode === moduleCode && currentParent.code === "STORE_MANAGER"
+		|| permissionStore.roleList.some(item => item.id === currentParent.id)
+	));
+	if (currentParent?.id && canKeepCurrentParent && !parentRoleOptions.value.some(item => item.id === current.parentRoleId)) {
 		parentRoleOptions.value.unshift({
-			...current.parentRole,
-			id: current.parentRole.id,
-			permissionIdList: current.parentRole.permissionIdList || current.parentRole.permissionList?.map(item => item.id) || [],
-			childRoleIdList: current.parentRole.childRoleIdList || current.parentRole.childRoleList?.map(item => item.id).filter((id): id is string => Boolean(id)) || [],
-			delegationPermissionIdList: current.parentRole.delegationPermissionIdList || current.parentRole.delegationPermissionList?.map(item => item.id) || []
+			...currentParent,
+			id: currentParent.id,
+			permissionIdList: currentParent.permissionIdList || currentParent.permissionList?.map(item => item.id) || [],
+			childRoleIdList: currentParent.childRoleIdList || currentParent.childRoleList?.map(item => item.id).filter((id): id is string => Boolean(id)) || [],
+			delegationPermissionIdList: currentParent.delegationPermissionIdList || currentParent.delegationPermissionList?.map(item => item.id) || []
 		});
 	}
 }
 
-async function loadAuthorizationScope(): Promise<void> {
-	candidateRoleList.value = isSystemAdmin.value ? permissionStore.roleList : await permissionStore.loadManageableRoles();
-	inheritanceRoleList.value = mergeRoleList(permissionStore.roleList, candidateRoleList.value);
+/** 限制门店角色可选择的管理父级。 */
+function filterStoreParentRoles(roleList: Role[]): Role[] {
+	if (isSystemAdmin.value) {
+		return roleList;
 	}
 
-function mergeRoleList(...roleLists: Role[][]): Role[] {
-	const roleMap = new Map<string, Role>();
-	for (const role of roleLists.flat()) {
-		roleMap.set(role.id, role);
+	const storeRoleIdSet = new Set(permissionStore.roleList.map(item => item.id));
+	return roleList.filter(role => storeRoleIdSet.has(role.id)
+		|| (role.moduleCode === moduleCode && role.code === "STORE_MANAGER"));
 }
-	return Array.from(roleMap.values());
+
+async function loadAuthorizationScope(): Promise<void> {
+	candidateRoleList.value = permissionStore.roleList;
+	inheritanceRoleList.value = [...permissionStore.roleList];
 }
 
 // ---------- 保存 ----------

src/pages/permission/RoleList.vue

@@ -53,7 +53,6 @@ const permissionStore = usePermissionSettingsStore();
 const userStore = useUserStore();
 const isRefreshing = ref(false);
 const deletableRoleIdSet = ref(new Set<string>());
-const directRoleIdSet = ref(new Set<string>());
 
 // ---------- 顶部导航 ----------
 
@@ -80,9 +79,11 @@ const sortedRoles = computed<Array<Role & { level: number }>>(() => {
 async function removeRole(id: string): Promise<void> {
 	try {
 		await permissionStore.removeRole(id);
-	} catch (error) {
-		await refreshAuthorizationScope();
 		await permissionStore.loadAll(true);
+		await refreshAuthorizationScope();
+	} catch (error) {
+		await permissionStore.loadAll(true);
+		await refreshAuthorizationScope();
 		Message.error(getErrorMessage(error, "角色删除失败"));
 	}
 }
@@ -95,12 +96,7 @@ function canDeleteRole(role: Role): boolean {
 }
 
 function getRoleScopeLabel(role: Role): string {
-	const direct = directRoleIdSet.value.has(role.id);
-	const manageable = deletableRoleIdSet.value.has(role.id);
-	if (direct && manageable) {
-		return "直属且可管理";
-	}
-	return direct ? "直属角色" : "可管理角色";
+	return userStore.hasRoles(coreRoleCodes.admin) ? "系统角色" : role.ownerType === "STORE" ? "本店角色" : "可管理角色";
 }
 
 // ---------- 页面数据 ----------
@@ -121,9 +117,7 @@ onMounted(async () => {
 	if (canCreateRole.value) {
 		navBarStore.setRightText("添加", "var(--td-brand-color)", toCreate);
 	}
-	if (userStore.hasRoles(coreRoleCodes.admin)) {
 	await permissionStore.loadAll();
-	}
 	await refreshAuthorizationScope();
 	if (!displayRoleList.value.length) {
 		displayRoleList.value = getDisplayRoleList();
@@ -163,23 +157,8 @@ async function refreshAuthorizationScope(): Promise<void> {
 		deletableRoleIdSet.value = new Set(permissionStore.roleList.map(item => item.id));
 		return;
 	}
-
-	try {
-		const [manageableRoleList, currentRoleList] = await Promise.all([
-			permissionStore.loadManageableRoles(),
-			permissionStore.loadCurrentRoleDetails()
-		]);
-		const roleMap = new Map<string, Role>();
-		for (const role of [...currentRoleList, ...manageableRoleList]) {
-			roleMap.set(role.id, role);
-		}
-		displayRoleList.value = Array.from(roleMap.values());
-		directRoleIdSet.value = new Set(currentRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
-		deletableRoleIdSet.value = new Set(manageableRoleList.map(item => item.id).filter((id): id is string => Boolean(id)));
-	} catch {
-		directRoleIdSet.value = new Set<string>();
-		deletableRoleIdSet.value = new Set<string>();
-	}
+	displayRoleList.value = permissionStore.roleList;
+	deletableRoleIdSet.value = new Set(permissionStore.roleList.map(item => item.id));
 }
 
 </script>

src/pages/permission/RolePermissionAssign.vue

@@ -217,7 +217,7 @@ function clearPermissionState(): void {
 // ---------- 授权范围 ----------
 
 async function loadAuthorizationScope(): Promise<void> {
-	candidateRoleList.value = isSystemAdmin.value ? permissionStore.roleList : await permissionStore.loadManageableRoles();
+	candidateRoleList.value = permissionStore.roleList;
 }
 
 onMounted(async () => {

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;
@@ -462,7 +458,6 @@ onUnmounted(() => {
 		gap: 1rem;
 		display: flex;
 		min-height: 70vh;
-		padding-top: 1rem;
 		flex-direction: column;
 
 		.items {

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;
 		}
 
@@ -395,7 +392,6 @@ onUnmounted(() => {
 	}
 
 	.list {
-		padding-top: .75rem;
 
 		.item {
 

src/pages/product/ProductDetail.vue

@@ -184,6 +184,7 @@ const actionList = computed<NavBarAction[]>(() => {
 		if (product.value?.status === "ACTIVE") {
 			list.push({ key: "disable", text: "停用产品", icon: "close", theme: "danger", action: disable });
 		}
+		list.push({ key: "remove", text: "移除产品", icon: "delete", theme: "danger", action: remove });
 	}
 	return list;
 });
@@ -271,6 +272,32 @@ function disable(): void {
 	});
 }
 
+function remove(): void {
+	const id = product.value?.id;
+	if (!id) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "移除产品",
+		content: "仅可移除没有订单、履约、库存流水、配置引用和库存余额的产品。确定提交移除？",
+		cancelBtn: "取消",
+		confirmBtn: { content: "移除", theme: "danger" },
+		onConfirm: async () => {
+			try {
+				await ProductAPI.remove(id);
+				emitListDataChanged(listDataEventKeys.productChanged, id);
+				emitListDataChanged(listDataEventKeys.productStockChanged, id);
+				Message.success("产品已移除");
+				await router.replace("/management/products");
+			} catch (error) {
+				Message.error(getErrorMessage(error, "产品移除失败"));
+			} finally {
+				dialog.destroy();
+			}
+		}
+	});
+}
+
 onMounted(async () => {
 	navBarStore.clearRight();
 	navBarStore.setCustomRightVisible(actionList.value.length > 0);

src/pages/product/ProductEdit.vue

@@ -66,7 +66,6 @@
 							v-model="spec.name"
 							borderless
 							maxlength="32"
-							:readonly="!!spec.id"
 							placeholder="如 颜色、尺寸"
 						/>
 						<t-button
@@ -85,10 +84,11 @@
 								:key="value.clientKey"
 								class="tag"
 								variant="light-outline"
-								:content="value.name"
 								closable
 								@close="removeSpecValue(spec, spec.valueList.indexOf(value))"
-							/>
+							>
+								<t-input v-model.trim="value.name" class="value-name" borderless maxlength="32" />
+							</t-tag>
 						</div>
 					</t-form-item>
 					<t-form-item label="规格值" label-width="3.5rem">
@@ -185,6 +185,7 @@
 		<product-sku-unit-batch-editor
 			v-model="batchUnitEditorVisible"
 			v-model:unit-list="batchUnitList"
+			v-model:base-unit-migration-ratio-text="batchBaseUnitMigrationRatioText"
 			:product-type="form.productType"
 			:sku-count="form.skuList.length"
 			@apply="applyBatchUnitTemplate"
@@ -306,6 +307,7 @@ const unitEditorVisible = ref(false);
 const editingSku = ref<SkuForm>();
 const batchUnitEditorVisible = ref(false);
 const batchUnitList = ref<UnitForm[]>([]);
+const batchBaseUnitMigrationRatioText = ref("");
 const removedSkuKeySet = new Set<string>();
 const removedSkuMap = new Map<string, SkuForm>();
 
@@ -326,6 +328,7 @@ function createUnit(unit?: Partial<ProductSkuUnit>, defaultName = "件"): UnitFo
 
 function createSku(sku?: Partial<ProductSku>): SkuForm {
 	const sourceUnitList = sku?.unitList || [];
+	const originalBaseUnitId = sourceUnitList.find(unit => unit.isBase)?.id;
 	const photoItemList = (sku?.attachmentList || []).filter(item => !!item.id).map(item => ({
 		attachment: item,
 		attachType: item.attachType || "PHOTO",
@@ -344,6 +347,8 @@ function createSku(sku?: Partial<ProductSku>): SkuForm {
 		status: sku?.status || "ACTIVE",
 		minStockQuantityText: sku?.minStockQuantity === null || sku?.minStockQuantity === undefined ? "" : String(sku.minStockQuantity),
 		unitList: sourceUnitList.length ? sourceUnitList.map(unit => createUnit(unit)) : [createUnit({ isBase: true, baseQuantityPerUnit: "1" })],
+		originalBaseUnitId,
+		baseUnitMigrationRatioText: "",
 		photoItemList
 	};
 }
@@ -354,7 +359,17 @@ function createSpec(spec?: Partial<ProductSpec>): SpecForm {
 		id: spec?.id,
 		clientKey: window.crypto.randomUUID(),
 		name: spec?.name || "",
-		valueList: (spec?.valueList || []).map(value => ({ ...value, id: value.id, clientKey: window.crypto.randomUUID(), name: value.name || "", enabled: value.enabled ?? true }))
+		originalName: spec?.name || "",
+		originalSort: spec?.sort,
+		valueList: (spec?.valueList || []).map(value => ({
+			...value,
+			id: value.id,
+			clientKey: window.crypto.randomUUID(),
+			name: value.name || "",
+			originalName: value.name || "",
+			originalSort: value.sort,
+			enabled: value.enabled ?? true
+		}))
 	};
 }
 
@@ -385,7 +400,7 @@ function addSpecValue(spec: SpecForm): void {
 		Message.warning("同一规格项的规格值不能重复");
 		return;
 	}
-	spec.valueList.push({ clientKey: window.crypto.randomUUID(), name, enabled: true });
+	spec.valueList.push({ clientKey: window.crypto.randomUUID(), name, originalName: name, originalSort: spec.valueList.length, enabled: true });
 	specValueDraftMap[spec.clientKey] = "";
 }
 
@@ -417,6 +432,7 @@ function openBatchUnitEditor(): void {
 		return;
 	}
 	batchUnitList.value = sourceSku.unitList.map(unit => ({ ...unit, id: undefined, skuId: undefined, clientKey: window.crypto.randomUUID() }));
+	batchBaseUnitMigrationRatioText.value = "";
 	batchUnitEditorVisible.value = true;
 }
 
@@ -426,16 +442,10 @@ function closeBatchUnitEditor(): void {
 
 function applyBatchUnitTemplate(): void {
 	const templateList = batchUnitList.value;
-	for (const sku of form.skuList) {
-		const templateNameSet = new Set(templateList.map(unit => unit.name.trim()));
-		if (sku.unitList.some(unit => !!unit.id && !templateNameSet.has(unit.name.trim()))) {
-			Message.warning("统一配置不能删除或重命名已保存单位，请在 SKU 明细中停售");
-			return;
-		}
-	}
 	form.skuList.forEach(sku => {
 		const oldUnitList = sku.unitList;
 		const oldUnitMap = new Map(oldUnitList.filter(unit => !!unit.id).map(unit => [unit.name.trim(), unit]));
+		const oldBaseUnit = oldUnitList.find(unit => unit.isBase);
 		sku.unitList = templateList.map((unit, unitIndex) => ({
 			...unit,
 			id: oldUnitMap.get(unit.name.trim())?.id,
@@ -443,6 +453,10 @@ function applyBatchUnitTemplate(): void {
 			clientKey: window.crypto.randomUUID(),
 			sort: unitIndex
 		}));
+		const newBaseUnit = sku.unitList.find(unit => unit.isBase);
+		if (oldBaseUnit?.id && newBaseUnit && oldBaseUnit.id !== newBaseUnit.id) {
+			sku.baseUnitMigrationRatioText = batchBaseUnitMigrationRatioText.value;
+		}
 	});
 	Message.success(`已为 ${form.skuList.length} 个 SKU 统一配置销售单位`);
 }
@@ -452,7 +466,7 @@ function removeSku(index: number): void {
 	if (!sku) {
 		return;
 	}
-	if (form.skuList.length < 2) {
+	if (isCreateMode.value && form.skuList.length < 2) {
 		Message.warning("产品至少需要一个 SKU");
 		return;
 	}
@@ -463,7 +477,7 @@ function removeSku(index: number): void {
 	}
 	form.skuList.splice(index, 1);
 	if (sku.id) {
-		Message.success("SKU 已移除，保存后将停用");
+		Message.success("SKU 已移除，保存后由后端检查引用并处理");
 	}
 }
 
@@ -867,7 +881,7 @@ function validate(): boolean {
 			return false;
 		}
 	}
-	if (!form.skuList.length) {
+	if (isCreateMode.value && !form.skuList.length) {
 		Message.warning("至少需要一个 SKU");
 		return false;
 	}
@@ -929,6 +943,16 @@ function validate(): boolean {
 			Message.warning("每个 SKU 必须且只能有一个基础单位");
 			return false;
 		}
+		const selectedBaseUnit = sku.unitList.find(unit => unit.isBase);
+		const isBaseUnitChanged = !!sku.originalBaseUnitId && selectedBaseUnit?.id !== sku.originalBaseUnitId;
+		if (isBaseUnitChanged && !/^\d+(?:\.\d{1,6})?$/.test(sku.baseUnitMigrationRatioText.trim())) {
+			Message.warning("切换基础单位时，请填写有效的新旧基础单位换算比例，最多六位小数");
+			return false;
+		}
+		if (isBaseUnitChanged && !(0 < Number(sku.baseUnitMigrationRatioText))) {
+			Message.warning("新旧基础单位换算比例必须大于 0");
+			return false;
+		}
 	}
 	return true;
 }
@@ -958,7 +982,14 @@ function buildSkuPayload(sku: SkuForm, index: number): ProductSku {
 			allowPurchase: form.productType === "SERVICE" ? false : !!unit.allowPurchase,
 			allowSale: !!unit.allowSale,
 			sort: unitIndex
-		}))
+		})),
+		baseUnitMigrationRequest: sku.id && sku.originalBaseUnitId && sku.unitList.find(unit => unit.isBase)?.id !== sku.originalBaseUnitId
+			? {
+				targetUnitId: sku.unitList.find(unit => unit.isBase)?.id,
+				targetUnitName: sku.unitList.find(unit => unit.isBase)?.name.trim(),
+				oldToNewBaseRatio: sku.baseUnitMigrationRatioText.trim()
+			}
+			: undefined
 	};
 }
 
@@ -973,11 +1004,18 @@ function buildProductPayload(skuList?: ProductSku[], includeSpecList = false): P
 		status: form.status,
 		remark: form.remark?.trim() || null,
 		attachmentList: buildAttachmentList(),
-		specList: includeSpecList ? form.specList.map(spec => ({
-			...spec,
+		specList: includeSpecList ? form.specList.map((spec, specIndex) => ({
+			id: spec.id,
 			productId: form.id,
 			name: spec.name.trim(),
-			valueList: spec.valueList.map(value => ({ ...value, name: value.name.trim() }))
+			sort: specIndex,
+			valueList: spec.valueList.map((value, valueIndex) => ({
+				id: value.id,
+				specId: spec.id,
+				name: value.name.trim(),
+				enabled: value.enabled !== false,
+				sort: valueIndex
+			}))
 		})) : undefined,
 		skuList
 	};
@@ -987,11 +1025,23 @@ async function syncSpecs(productId: string): Promise<void> {
 	for (const [specIndex, spec] of form.specList.entries()) {
 		if (!spec.id) {
 			spec.id = await ProductAPI.specCreate({ productId, name: spec.name.trim(), sort: specIndex });
+			spec.originalName = spec.name.trim();
+			spec.originalSort = specIndex;
+		} else if (spec.name.trim() !== spec.originalName || specIndex !== spec.originalSort) {
+			await ProductAPI.specUpdate({ id: spec.id, productId, name: spec.name.trim(), sort: specIndex });
+			spec.originalName = spec.name.trim();
+			spec.originalSort = specIndex;
 		}
 		for (const [valueIndex, value] of spec.valueList.entries()) {
 			if (!value.id) {
 				value.specId = spec.id;
 				value.id = await ProductAPI.specValueCreate({ specId: spec.id, name: value.name.trim(), enabled: value.enabled !== false, sort: valueIndex });
+				value.originalName = value.name.trim();
+				value.originalSort = valueIndex;
+			} else if (value.name.trim() !== value.originalName || valueIndex !== value.originalSort) {
+				await ProductAPI.specValueUpdate({ id: value.id, specId: spec.id, name: value.name.trim(), enabled: value.enabled !== false, sort: valueIndex });
+				value.originalName = value.name.trim();
+				value.originalSort = valueIndex;
 			}
 		}
 	}
@@ -1018,23 +1068,17 @@ async function save(): Promise<void> {
 		await syncSpecs(productId!);
 		normalizeSkuSpecValueIds();
 		const latest = await ProductAPI.detail(productId!);
-		const previousSkuIdSet = new Set((latest.skuList || []).map(sku => sku.id).filter((id): id is string => !!id));
 		if (form.specList.length) {
 			const defaultSku = latest.skuList?.find(sku => !sku.specValueIdList?.length);
 			if (defaultSku?.id && form.skuList[0] && !form.skuList[0].id) {
 				form.skuList[0].id = defaultSku.id;
 			}
 			generateSkuList(latest.skuList || [], true);
-		} else if (!form.skuList.length) {
-			form.skuList = [createSku(latest.skuList?.[0])];
-		} else if (!form.skuList[0]?.id && latest.skuList?.[0]) {
+		} else if (form.skuList[0] && !form.skuList[0].id && latest.skuList?.[0]) {
 			form.skuList[0].id = latest.skuList[0].id;
 		}
 		const payload = buildProductPayload(form.skuList.map(buildSkuPayload));
 		await ProductAPI.update(payload);
-		const retainedSkuIdSet = new Set(form.skuList.map(sku => sku.id).filter((id): id is string => !!id));
-		const disabledSkuIdList = [...previousSkuIdSet].filter(id => !retainedSkuIdSet.has(id));
-		await Promise.all(disabledSkuIdList.map(async skuId => await ProductAPI.skuDisable(skuId)));
 		emitListDataChanged(listDataEventKeys.productChanged, productId);
 		emitListDataChanged(listDataEventKeys.productStockChanged, productId);
 		Message.success(isCreateMode.value ? "产品已创建" : "产品已保存");
@@ -1177,6 +1221,10 @@ onUnmounted(() => navBarStore.clearRight());
 			gap: .5rem;
 			display: flex;
 			flex-wrap: wrap;
+
+			.value-name {
+				width: 5rem;
+			}
 		}
 		}
 

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,31 +445,15 @@ 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;
-			}
 		}
 	}
 
 	.list {
-		padding-top: .75rem;
 
 		.item {
 			padding: 10px;

src/pages/product/ProductStockDetail.vue

@@ -55,8 +55,9 @@
 						</div>
 					</template>
 				</t-cell>
-				<t-cell v-if="0 < Number(stock.reservedQuantity || 0)" title="查看预占流水" arrow @click="openReservedRecordList" />
-				<t-cell title="查看该产品 SKU 流水" arrow @click="openRecordList" />
+				<product-stock-package-summary :sku="sku" :stock="stock" />
+				<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"
@@ -100,6 +101,7 @@ import { shallowRef } from "vue";
 import { useUserStore } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import ProductProfile from "@/pages/product/component/ProductProfile.vue";
+import ProductStockPackageSummary from "@/pages/product/component/ProductStockPackageSummary.vue";
 import ProductStockOperationPopup from "@/pages/product/ProductStockOperationPopup.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Product, ProductSku, ProductStock, ProductSkuUnit, StockOperationType } from "@/types/Product";
@@ -199,11 +201,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 +214,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;
 		}
 	}
@@ -342,7 +338,6 @@ onUnmounted(() => {
 		min-height: 70vh;
 
 		.list {
-			padding-top: .75rem;
 
 			.item {
 				padding: 10px;

src/pages/product/ProductStockRecordDetail.vue

@@ -44,7 +44,7 @@
 							<span v-text="getProductQuantityText(record.onHandBefore)" />
 							<t-icon name="arrow-right" />
 							<span :class="getDeltaClass(record.onHandDelta)" v-text="getProductQuantityText(record.onHandAfter)" />
-							<span class="unit">基础单位</span>
+							<span class="unit" v-text="baseUnitName || '基础单位'" />
 						</span>
 					</template>
 				</t-cell>
@@ -54,7 +54,7 @@
 							<span v-text="getProductQuantityText(record.reservedBefore)" />
 							<t-icon name="arrow-right" />
 							<span :class="getDeltaClass(record.reservedDelta)" v-text="getProductQuantityText(record.reservedAfter)" />
-							<span class="unit">基础单位</span>
+							<span class="unit" v-text="baseUnitName || '基础单位'" />
 						</span>
 					</template>
 				</t-cell>
@@ -157,6 +157,7 @@ const navBarStore = useNavBarStore();
 const router = useRouter();
 const userStore = useUserStore();
 const record = ref<StockRecord>();
+const baseUnitName = ref("");
 const isLoading = ref(false);
 const isOperating = ref(false);
 const revokeVisible = ref(false);
@@ -299,6 +300,15 @@ async function loadData(): Promise<void> {
 	try {
 		const result = await ProductAPI.recordDetail(id);
 		record.value = result;
+		baseUnitName.value = "";
+		if (result.skuId) {
+			try {
+				const sku = await ProductAPI.skuDetail(result.skuId);
+				baseUnitName.value = sku.unitList?.find(unit => unit.isBase)?.name || sku.unitList?.[0]?.name || "";
+			} catch {
+				baseUnitName.value = "";
+			}
+		}
 	} catch (error) {
 		Message.error(getErrorMessage(error, "库存流水加载失败"));
 	} finally {

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,8 +10,14 @@
 				placeholder="搜索产品名称（拼音）或编码"
 			/>
 			<t-dropdown-menu class="menus">
-				<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperationType" />
-				<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
+				<t-dropdown-item
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="selectDateFilter"
+				/>
+				<t-dropdown-item v-model="operationType" :label="operationFilterLabel" :options="operationOptions" @change="selectOperationType" />
+				<t-dropdown-item v-model="direction" :label="directionFilterLabel" :options="directionOptions" @change="selectDirection" />
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
@@ -20,6 +26,52 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
+			<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"
@@ -58,8 +110,13 @@
 							<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 || '未命名产品'" />
+								<strong class="operation" :class="getOperationClass(record.operationType)" v-text="getStockOperationText(record.operationType)" />
+								<strong class="product-name clip-text" v-text="record.productNameSnapshot || '未命名产品'" />
+								<t-tag
+									v-if="record.productNameSnapshot !== record.skuNameSnapshot"
+									size="small"
+									:content="record.skuNameSnapshot"
+								/>
 								<span
 									v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
 									class="quantity"
@@ -84,19 +141,45 @@
 				</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 +187,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 +202,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, "all"));
+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,12 +239,11 @@ 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 = [
 	{ label: "全部操作", value: "ALL" },
-	{ label: "期初入库", value: "INITIAL_IN" },
 	{ label: "手工入库", value: "MANUAL_IN" },
 	{ label: "手工出库", value: "MANUAL_OUT" },
 	{ label: "手工流水冲正", value: "MANUAL_REVOKE" },
@@ -153,15 +259,27 @@ const directionOptions = [
 	{ label: "入库", value: "IN" },
 	{ label: "出库", value: "OUT" }
 ];
+const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
+const directionFilterLabel = computed(() => directionOptions.find(item => item.value === direction.value)?.label || "出入库");
 
 function getQueryText(key: string): string {
 	const value = route.query[key];
 	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",
 		MANUAL_IN: "import",
 		MANUAL_OUT: "export",
 		MANUAL_REVOKE: "rollback",
@@ -174,6 +292,21 @@ function getOperationIcon(type?: StockOperationType): string {
 	} as Record<string, string>)[type || ""] || "history";
 }
 
+function getOperationClass(type?: StockOperationType): string {
+	return ({
+		INITIAL_IN: "initial-in",
+		MANUAL_IN: "manual-in",
+		MANUAL_OUT: "manual-out",
+		MANUAL_REVOKE: "manual-revoke",
+		ORDER_RESERVE: "order-reserve",
+		ORDER_RELEASE: "order-release",
+		ORDER_OUT: "order-out",
+		ORDER_REVOKE: "order-revoke",
+		STOCKTAKE_GAIN: "stocktake-gain",
+		STOCKTAKE_LOSS: "stocktake-loss"
+	} as Record<string, string>)[type || ""] || "unknown";
+}
+
 function getStockQuantityText(record: StockRecord): string {
 	if (record.quantity === undefined || record.quantity === null || record.quantity === "") {
 		return "";
@@ -233,12 +366,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 +394,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 +425,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 +541,7 @@ async function refresh(): Promise<void> {
 onMounted(async () => {
 	navBarStore.clearRight();
 	try {
-		await reload();
+		await Promise.all([loadSkuFilter(), reload()]);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "库存流水加载失败"));
 	}
@@ -318,7 +567,6 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .product-stock-record-list {
-	gap: .75rem;
 	display: flex;
 	padding: var(--app-nav-height) 0 1rem;
 	flex-direction: column;
@@ -331,8 +579,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -341,7 +587,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 2;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -352,23 +597,54 @@ 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) {
+	.list-wrap {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
+
+		.date-summary {
+
+			:deep(.t-cell__title) {
+				flex: 0 0 4.5rem;
+			}
+
+			:deep(.t-cell__note) {
+				flex: 1 1 0;
 				min-width: 0;
+				overflow: hidden;
+				text-align: right;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 		}
 
-			:deep(.t-dropdown-menu__title) {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
+		.sku {
+			--td-tag-square-border-radius: .5rem;
+
+			padding: 10px;
+
+			:deep(.t-cell__title) {
+				display: flex;
+				align-items: center;
 			}
+
+			.avatar {
+				width: 2rem;
+				height: 2rem;
+				border-radius: .5rem !important;
+			}
+
+			.title {
+				gap: .5rem;
+				display: flex;
+				min-width: 0;
+				align-items: center;
 			}
 		}
 
@@ -379,16 +655,6 @@ onUnmounted(() => {
 				padding: 10px;
 				min-width: 0;
 
-			: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;
@@ -405,7 +671,7 @@ onUnmounted(() => {
 				}
 
 				.title {
-				gap: .5rem;
+					gap: .25rem;
 					min-width: 0;
 					max-width: 100%;
 					flex: 1;
@@ -415,20 +681,59 @@ onUnmounted(() => {
 					white-space: nowrap;
 
 					.actor {
-					color: var(--td-text-color-secondary);
 						flex: 0 0 auto;
+						color: var(--td-text-color-brand);
 					}
 
 					.operation {
 						flex: 0 0 auto;
+						color: var(--operation-color, var(--td-text-color-secondary));
+						font-weight: 700;
+
+						&.initial-in {
+							--operation-color: #2563eb;
+						}
+
+						&.manual-in {
+							--operation-color: #15803d;
+						}
+
+						&.manual-out {
+							--operation-color: #c2410c;
+						}
+
+						&.manual-revoke {
+							--operation-color: #be123c;
+						}
+
+						&.order-reserve {
+							--operation-color: #7c3aed;
+						}
+
+						&.order-release {
+							--operation-color: #0891b2;
+						}
+
+						&.order-out {
+							--operation-color: #dc2626;
+						}
+
+						&.order-revoke {
+							--operation-color: #4f46e5;
+						}
+
+						&.stocktake-gain {
+							--operation-color: #0f766e;
+						}
+
+						&.stocktake-loss {
+							--operation-color: #a16207;
+						}
 					}
 
 					.product-name {
-					min-width: 0;
 						flex: 0 1 auto;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
+						color: var(--td-text-color-primary);
 					}
 
 					.quantity {
@@ -454,6 +759,7 @@ onUnmounted(() => {
 				}
 			}
 		}
+	}
 
 	.positive {
 		color: var(--td-success-color);
@@ -463,4 +769,46 @@ onUnmounted(() => {
 		color: var(--td-error-color);
 	}
 }
+
+:global(html.theme-dark) .product-stock-record-list .operation {
+	&.initial-in {
+		--operation-color: #93c5fd;
+	}
+
+	&.manual-in {
+		--operation-color: #86efac;
+	}
+
+	&.manual-out {
+		--operation-color: #fdba74;
+	}
+
+	&.manual-revoke {
+		--operation-color: #fda4af;
+	}
+
+	&.order-reserve {
+		--operation-color: #c4b5fd;
+	}
+
+	&.order-release {
+		--operation-color: #67e8f9;
+	}
+
+	&.order-out {
+		--operation-color: #fca5a5;
+	}
+
+	&.order-revoke {
+		--operation-color: #a5b4fc;
+	}
+
+	&.stocktake-gain {
+		--operation-color: #5eead4;
+	}
+
+	&.stocktake-loss {
+		--operation-color: #fcd34d;
+	}
+}
 </style>

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,25 +318,21 @@ 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;
 		}
 	}
 
 	.list-wrap {
 		min-height: 70vh;
-		padding-top: .75rem;
 
 		.content {
 			gap: 1rem;

src/pages/product/component/CustomerOrderRankChart.vue

@@ -4,7 +4,7 @@
 		caption="排除已取消订单，前 10"
 		:option="chartOption"
 		:loading="loading"
-		height="17rem"
+		height="14rem"
 	/>
 </template>
 
@@ -27,17 +27,18 @@ const chartOption = computed<EChartsOption>(() => {
 	const list = props.list.slice(0, 10);
 	return {
 		...buildHorizontalBarOption(list.map(getCustomerName)),
-		legend: { show: false },
+		grid: {
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			showLabel: false
+		},
 		xAxis: {
 			type: "value",
-			axisLabel: {
-				color: "#52607a",
-				formatter: (value: number) => `${formatChartYuan(value)} 元`
-			},
 			splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
 		},
 		series: [{
-			name: "净收款",
 			type: "bar",
 			tooltip: { valueFormatter: value => `${formatChartYuan(Number(value))} 元` },
 			data: list.map(item => getNumber(item.netPaidAmount) / 100)

src/pages/product/component/OrderDailyChart.vue

@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, formatChartYuan, formatQuantity, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 defineOptions({
 	name: "OrderDailyChart"
@@ -25,20 +26,24 @@ const props = defineProps<{
 	loading: boolean;
 }>();
 
-function buildOption(visibleDateTextList: string[]): EChartsOption {
+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
+function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
 		...buildAxisChartOption(labelList),
 		xAxis: {
 			type: "category",
 			data: labelList,
-			axisTick: { show: false },
+			axisTick: { show: true, length: 0, interval: 0 },
 			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
 		},
 		yAxis: [
 			{
 				type: "value",
 				name: "订单",
+				minInterval: 1,
 				axisLabel: { color: "#52607a" },
 				splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
 			},
@@ -57,6 +62,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "订单数",
 				type: "bar",
 				yAxisIndex: 0,
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
 				tooltip: { valueFormatter: value => formatQuantity(Number(value)) },
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
 			},

src/pages/product/component/OrderPaymentChart.vue

@@ -4,7 +4,7 @@
 		caption="当前订单快照"
 		:option="chartOption"
 		:loading="loading"
-		height="17rem"
+		height="6rem"
 	/>
 </template>
 
@@ -27,16 +27,35 @@ const chartOption = computed<EChartsOption>(() => {
 	const list = props.list;
 	return {
 		...buildHorizontalBarOption(list.map(item => getPaymentStatusText(item.paymentStatus))),
-		legend: { show: false },
+		grid: {
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			showLabel: false
+		},
 		series: [{
-			name: "订单数",
 			type: "bar",
-			data: list.map(item => getNumber(item.orderCount))
+			data: list.map(item => ({
+				value: getNumber(item.orderCount),
+				itemStyle: { color: getPaymentStatusColor(item.paymentStatus) }
+			}))
 		}]
 	};
 });
 
 function getPaymentStatusText(value?: string): string {
-	return ({ UNPAID: "未付款", PARTIALLY_PAID: "部分付款", PAID: "已付款" } as Record<string, string>)[value || ""] || "未知状态";
+	return ({
+		UNPAID: "未付款",
+		PARTIALLY_PAID: "部分付款",
+		PAID: "已付款"
+	} as Record<string, string>)[value || ""] || "未知状态";
+}
+function getPaymentStatusColor(value?: string): string {
+	return ({
+		UNPAID: "#F33434",
+		PARTIALLY_PAID: "#EB9C25",
+		PAID: "#0F766E"
+	} as Record<string, string>)[value || ""] || "#94A3B8";
 }
 </script>

src/pages/product/component/OrderReceivableCard.vue

@@ -2,25 +2,17 @@
 	<section class="receivable-section">
 		<div class="title-row">
 			<h2 v-text="'应收构成'" />
-			<span class="caption" v-text="'时间范围内创建订单的当前快照'" />
-		</div>
-		<div class="receivable-list">
-			<div v-for="item in detailList" :key="item.label" class="receivable-item">
-				<span v-text="item.label" />
-				<strong v-text="item.value" />
-			</div>
+			<span class="caption">成交金额拆分；待收余额已扣除待核销</span>
 		</div>
+		<div ref="chartElement" class="chart" />
 	</section>
 </template>
 
 <script setup lang="ts">
+import type { EChartsOption } from "echarts";
 import type { GaoSalesOrderReceivableStatView } from "@/types/GaoChart";
-import { formatMoney } from "@/pages/product/component/chartUtils";
-
-type DetailItem = {
-	label: string;
-	value: string;
-};
+import { buildPieChartOption, formatChartYuan, getNumber } from "@/pages/product/component/chartUtils";
+import { useStoreChart } from "@/pages/store/component/useStoreChart";
 
 defineOptions({
 	name: "OrderReceivableCard"
@@ -30,13 +22,40 @@ const props = defineProps<{
 	receivable: GaoSalesOrderReceivableStatView;
 }>();
 
-const detailList = computed<DetailItem[]>(() => [
-	{ label: "有效收款", value: formatMoney(props.receivable.paidAmount) },
-	{ label: "待核销", value: formatMoney(props.receivable.pendingPaidAmount) },
-	{ label: "未收", value: formatMoney(props.receivable.unpaidAmount) },
-	{ label: "有效退款", value: formatMoney(props.receivable.refundedAmount) },
-	{ label: "净收款", value: formatMoney(props.receivable.netPaidAmount) }
-]);
+const chartOption = computed<EChartsOption>(() => {
+	const pendingPaidAmount = getNumber(props.receivable.pendingPaidAmount);
+	const unpaidAmount = getNumber(props.receivable.unpaidAmount);
+	return {
+		...buildPieChartOption(),
+		tooltip: {
+			trigger: "item",
+			confine: true,
+			formatter: params => {
+				const item = Array.isArray(params) ? params[0] : params;
+				return item
+					? `${item.name}：${formatChartYuan(Number(item.value))} 元（${item.percent}%）`
+					: "";
+			}
+		},
+		series: [
+			{
+				name: "成交金额",
+				type: "pie",
+				radius: ["0%", "58%"],
+				center: ["50%", "44%"],
+				label: { color: "#52607a", formatter: "{b} {d}%" },
+				data: [
+					{ name: "净收款", value: getNumber(props.receivable.netPaidAmount) / 100 },
+					{ name: "有效退款", value: getNumber(props.receivable.refundedAmount) / 100 },
+					{ name: "待核销", value: pendingPaidAmount / 100 },
+					{ name: "待收余额", value: Math.max(0, unpaidAmount - pendingPaidAmount) / 100 }
+				]
+			}
+		]
+	};
+});
+
+const { chartElement } = useStoreChart(chartOption);
 </script>
 
 <style scoped lang="less">
@@ -65,30 +84,9 @@ const detailList = computed<DetailItem[]>(() => [
 		font-size: .6875rem;
 	}
 
-	.receivable-list {
-		gap: .5rem;
-		display: grid;
-		grid-template-columns: repeat(5, minmax(0, 1fr));
-	}
-
-	.receivable-item {
-		padding: .625rem .5rem;
-		background: rgba(241, 245, 249, .8);
-		border-radius: .75rem;
-
-		span {
-			color: #64748b;
-			display: block;
-			font-size: .6875rem;
-		}
-
-		strong {
-			color: #0f172a;
-			margin-top: .25rem;
-			display: block;
-			font-size: .8125rem;
-			font-weight: 700;
-		}
+	.chart {
+		width: 100%;
+		height: 15rem;
 	}
 }
 
@@ -101,23 +99,6 @@ const detailList = computed<DetailItem[]>(() => [
 			color: #e2e8f0;
 		}
 
-		.receivable-item {
-			background: rgba(30, 41, 59, .88);
-
-			span {
-				color: #94a3b8;
-			}
-
-			strong {
-				color: #e2e8f0;
-			}
-		}
-	}
-}
-
-@media (max-width: 42rem) {
-	.receivable-list {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 }
 </style>

src/pages/product/component/OrderStatusChart.vue

@@ -4,7 +4,7 @@
 		caption="当前订单快照"
 		:option="chartOption"
 		:loading="loading"
-		height="17rem"
+		height="6rem"
 	/>
 </template>
 
@@ -27,11 +27,19 @@ const chartOption = computed<EChartsOption>(() => {
 	const list = props.list;
 	return {
 		...buildHorizontalBarOption(list.map(item => getOrderStatusText(item.status))),
-		legend: { show: false },
+		grid: {
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			showLabel: false
+		},
 		series: [{
-			name: "订单数",
 			type: "bar",
-			data: list.map(item => getNumber(item.orderCount))
+			data: list.map(item => ({
+				value: getNumber(item.orderCount),
+				itemStyle: { color: getOrderStatusColor(item.status) }
+			}))
 		}]
 	};
 });
@@ -39,4 +47,12 @@ const chartOption = computed<EChartsOption>(() => {
 function getOrderStatusText(value?: string): string {
 	return ({ ACTIVE: "进行中", FULFILLED: "已完成", CANCELLED: "已取消" } as Record<string, string>)[value || ""] || "未知状态";
 }
+
+function getOrderStatusColor(value?: string): string {
+	return ({
+		ACTIVE: "#EB9C25",
+		FULFILLED: "#0F766E",
+		CANCELLED: "#F33434"
+	} as Record<string, string>)[value || ""] || "#94A3B8";
+}
 </script>

src/pages/product/component/OrderTypeChart.vue

@@ -4,7 +4,7 @@
 		caption="按订单数量"
 		:option="chartOption"
 		:loading="loading"
-		height="17rem"
+		height="10rem"
 	/>
 </template>
 

src/pages/product/component/ProductFulfillmentTrendChart.vue

@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductFulfillmentDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 defineOptions({
 	name: "ProductFulfillmentTrendChart"
@@ -25,14 +26,17 @@ const props = defineProps<{
 	loading: boolean;
 }>();
 
-function buildOption(visibleDateTextList: string[]): EChartsOption {
+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
+function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
 		...buildAxisChartOption(labelList),
 		xAxis: {
 			type: "category",
 			data: labelList,
-			axisTick: { show: false },
+			axisTick: { show: true, length: 0, interval: 0 },
 			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
 		},
 		series: [
@@ -40,6 +44,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "直接履约",
 				type: "bar",
 				stack: "fulfillment",
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
 			},
 			{

src/pages/product/component/ProductSalesTrendChart.vue

@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductSalesDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 defineOptions({
 	name: "ProductSalesTrendChart"
@@ -25,33 +26,57 @@ const props = defineProps<{
 	loading: boolean;
 }>();
 
-function buildOption(visibleDateTextList: string[]): EChartsOption {
+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
+function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
 		...buildAxisChartOption(labelList),
 		xAxis: {
 			type: "category",
 			data: labelList,
-			axisTick: { show: false },
+			axisTick: { show: true, length: 0, interval: 0 },
 			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
 		},
+		yAxis: [
+			{
+				type: "value",
+				name: "基础单位",
+				minInterval: 1,
+				axisLabel: { color: "#52607a" },
+				splitLine: { lineStyle: { color: "rgba(148, 163, 184, .2)" } }
+			},
+			{
+				type: "value",
+				name: "订单",
+				position: "right",
+				minInterval: 1,
+				axisLabel: { color: "#52607a" },
+				splitLine: { show: false }
+			}
+		],
 		series: [
 			{
 				name: "直接销量",
 				type: "bar",
 				stack: "quantity",
+				yAxisIndex: 0,
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
 			},
 			{
 				name: "套餐权益",
 				type: "bar",
 				stack: "quantity",
+				yAxisIndex: 0,
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.packageBaseQuantity))
 			},
 			{
 				name: "订单数",
 				type: "line",
 				smooth: true,
+				yAxisIndex: 1,
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
 			}
 		]

src/pages/product/component/ProductSkuEditor.vue

@@ -34,7 +34,7 @@
 		</t-cell>
 		<template #right>
 			<t-button class="delete-action swipe-cell-button" theme="danger" @click.stop="requestRemove">
-				停用
+				移除
 			</t-button>
 		</template>
 	</t-swipe-cell>
@@ -82,6 +82,7 @@
 						v-model:photo-items="sku.photoItemList"
 						title="SKU 图片（选填）"
 						:edit-mode="true"
+						:viewer-z-index="skuEditorZIndex + 1"
 						:upload="uploadPhotoList"
 					/>
 				</div>

src/pages/product/component/ProductSkuUnitBatchEditor.vue

@@ -14,6 +14,9 @@
 			<div class="editor-context">
 				<strong>批量配置销售单位</strong>
 				<span v-text="`以下单位将应用到全部 ${props.skuCount} 个 SKU 明细`" />
+				<t-form-item label="基础单位换算比例" help="切换已有 SKU 的基础单位时填写：1 个旧基础单位等于多少个新基础单位；最多六位小数">
+					<t-input v-model.trim="baseUnitMigrationRatioText" type="number" align="right" borderless placeholder="无需切换时留空" />
+				</t-form-item>
 			</div>
 
 			<div class="unit-list">
@@ -71,6 +74,7 @@ const props = defineProps<{
 }>();
 
 const unitList = defineModel<ProductSkuUnitForm[]>("unitList", { required: true });
+const baseUnitMigrationRatioText = defineModel<string>("baseUnitMigrationRatioText", { default: "" });
 const emit = defineEmits<{
 	"update:modelValue": [value: boolean];
 	apply: [];

src/pages/product/component/ProductSkuUnitEditor.vue

@@ -27,8 +27,7 @@
 					theme="danger"
 					variant="text"
 					size="extra-small"
-					:content="unit.id ? '停售' : '删除'"
-					:disabled="!!unit.id && unit.allowSale === false && unit.allowPurchase === false"
+					content="移除"
 					@click="removeUnit(unitIndex)"
 				/>
 				</div>
@@ -39,6 +38,9 @@
 					<t-form-item label="基础单位" content-align="right">
 						<t-switch v-model="unit.isBase" size="small" :disabled="sku.unitList.length === 1" @change="setBaseUnit(unitIndex)" />
 					</t-form-item>
+					<t-form-item v-if="isBaseUnitMigrationRequired" label="新旧基础单位比例" help="填写 1 个旧基础单位等于多少个新基础单位；最多六位小数" required-mark>
+						<t-input v-model.trim="sku.baseUnitMigrationRatioText" type="number" align="right" borderless placeholder="例如 30" />
+					</t-form-item>
 					<t-form-item label="换算数量" help="1 个当前单位对应的基础单位数量" required-mark>
 						<t-input v-model.trim="unit.baseQuantityPerUnit" type="number" align="right" borderless :disabled="unit.isBase" placeholder="1" />
 					</t-form-item>
@@ -91,6 +93,12 @@ const visible = computed({
 	set: value => handleVisibleChange(value)
 });
 const unitEditorZIndex = 12100;
+const isBaseUnitMigrationRequired = computed(() => {
+	if (!sku.value?.originalBaseUnitId) {
+		return false;
+	}
+	return sku.value.unitList.find(unit => unit.isBase)?.id !== sku.value.originalBaseUnitId;
+});
 
 function handleVisibleChange(value: boolean): void {
 	emit("update:modelValue", value);
@@ -135,10 +143,7 @@ function removeUnit(index: number): void {
 	}
 	const unit = sku.value.unitList[index];
 	if (unit?.id) {
-		unit.allowSale = false;
-		unit.allowPurchase = false;
-		Message.success("单位已停售并禁止采购，历史订单仍可履约");
-		return;
+		Message.info("已移除单位将在保存时由后端检查引用后处理");
 	}
 	const wasBase = sku.value.unitList[index]?.isBase;
 	sku.value.unitList.splice(index, 1);

src/pages/product/component/ProductStockHealthTable.vue

@@ -21,7 +21,6 @@
 					<tr v-for="item in sortedList" :key="item.productId">
 						<td>
 							<div class="product-name" v-text="item.productName || '未命名产品'" />
-							<div class="product-type" v-text="getProductTypeText(item.productType)" />
 							<div v-if="hasLowStockSku(item)" class="sku-list">
 								<div v-for="sku in getLowStockSkuList(item)" :key="`${sku.skuId}-${sku.skuCode}`" class="sku-item">
 									<span v-text="getSkuName(sku)" />
@@ -73,10 +72,6 @@ function getLowStockSkuList(item: GaoProductStockHealthView): GaoProductSkuStock
 function getSkuName(item: GaoProductSkuStockHealthView): string {
 	return [item.skuName || "未命名规格", item.specSummary].filter(Boolean).join(" · ");
 }
-
-function getProductTypeText(value?: string): string {
-	return ({ SERVICE: "服务", GOODS: "商品", CONSUMABLE: "耗材" } as Record<string, string>)[value || ""] || "未分类";
-}
 </script>
 
 <style scoped lang="less">
@@ -118,14 +113,14 @@ function getProductTypeText(value?: string): string {
 
 	th {
 		color: #94a3b8;
-		padding: .5rem .375rem;
+		padding: .25rem;
 		text-align: left;
 		font-weight: 500;
 	}
 
 	td {
 		color: #334155;
-		padding: .625rem .375rem;
+		padding: .25rem;
 		border-top: 1px solid rgba(148, 163, 184, .16);
 	}
 
@@ -135,7 +130,7 @@ function getProductTypeText(value?: string): string {
 	}
 
 	.product-name {
-		max-width: 7rem;
+		max-width: 6rem;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}

src/pages/product/component/ProductStockMovementChart.vue

@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductStockMovementDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 defineOptions({
 	name: "ProductStockMovementChart"
@@ -25,26 +26,33 @@ const props = defineProps<{
 	loading: boolean;
 }>();
 
-function buildOption(visibleDateTextList: string[]): EChartsOption {
+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
+function buildOption(visibleDateTextList: string[], chartWidth: number): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
 		...buildAxisChartOption(labelList),
 		xAxis: {
 			type: "category",
 			data: labelList,
-			axisTick: { show: false },
+			axisLine: { onZero: true },
+			axisTick: { show: true, length: 0, interval: 0 },
 			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
 		},
 		series: [
 			{
 				name: "入库",
 				type: "bar",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.inQuantity))
+				stack: "stock-movement",
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, chartWidth),
+				data: visibleDateTextList.map(dateText => Math.abs(getNumber(getDailyItem(props.list, dateText)?.inQuantity)))
 			},
 			{
 				name: "出库",
 				type: "bar",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.outQuantity))
+				stack: "stock-movement",
+				data: visibleDateTextList.map(dateText => -Math.abs(getNumber(getDailyItem(props.list, dateText)?.outQuantity)))
 			},
 			{
 				name: "库存净变化",
@@ -55,12 +63,12 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 			{
 				name: "新增预占",
 				type: "line",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.reserveQuantity))
+				data: visibleDateTextList.map(dateText => Math.abs(getNumber(getDailyItem(props.list, dateText)?.reserveQuantity)))
 			},
 			{
 				name: "释放预占",
 				type: "line",
-				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.releaseQuantity))
+				data: visibleDateTextList.map(dateText => -Math.abs(getNumber(getDailyItem(props.list, dateText)?.releaseQuantity)))
 			}
 		]
 	};

src/pages/product/component/ProductStockPackageSummary.vue

@@ -0,0 +1,78 @@
+<template>
+	<template v-if="packageUnits.length">
+		<t-cell class="packages" title="整包装换算">
+			<template #note>
+				<div class="options" role="group" aria-label="选择整包装换算单位">
+					<t-button
+						v-for="unit in packageUnits"
+						:key="unit.id"
+						size="extra-small"
+						:theme="selectedUnit?.id === unit.id ? 'primary' : 'default'"
+						:variant="selectedUnit?.id === unit.id ? 'base' : 'outline'"
+						:aria-label="`按${unit.name || '未命名单位'}换算`"
+						:aria-pressed="selectedUnit?.id === unit.id"
+						@click="selectedUnitId = unit.id || ''"
+					>
+						<span v-text="`按${unit.name || '未命名单位'}`" />
+					</t-button>
+				</div>
+			</template>
+		</t-cell>
+		<t-cell title="库存折合" :note="summary.onHand" />
+		<t-cell title="可用折合" :note="summary.available" />
+	</template>
+</template>
+
+<script setup lang="ts">
+import type { ProductSku, ProductStock } from "@/types/Product";
+import { splitBaseQuantityIntoPackages } from "@/utils/package";
+
+const props = defineProps<{ sku: ProductSku; stock: ProductStock }>();
+
+// ---------- 整包装换算 ----------
+
+const selectedUnitId = ref("");
+const baseUnits = computed(() => (props.sku.unitList || []).filter(unit => unit.isBase));
+const packageUnits = computed(() => (props.sku.unitList || [])
+	.filter(unit => unit.id && !unit.isBase && 1 < Number(unit.baseQuantityPerUnit))
+	.sort((left, right) => Number(right.baseQuantityPerUnit) - Number(left.baseQuantityPerUnit)));
+const selectedUnit = computed(() => packageUnits.value.find(unit => unit.id === selectedUnitId.value) || packageUnits.value[0]);
+const summary = computed(() => ({
+	onHand: getSummaryText(props.stock.onHandQuantity),
+	available: getSummaryText(props.stock.availableQuantity)
+}));
+
+/** 使用原始基础库存换算，保留基础单位余数，异常数据不按零库存展示。 */
+function getSummaryText(quantity?: number | string): string {
+	const baseUnit = baseUnits.value[0];
+	const unit = selectedUnit.value;
+	if (quantity === undefined || baseUnits.value.length !== 1 || !baseUnit?.name
+		|| Number(baseUnit.baseQuantityPerUnit) !== 1 || !unit?.name) {
+		return "无法换算";
+	}
+	const result = splitBaseQuantityIntoPackages(quantity, unit.baseQuantityPerUnit);
+	if (!result) {
+		return "无法换算";
+	}
+	const parts: string[] = [];
+	if (result.whole !== "0") {
+		parts.push(`${result.whole} ${unit.name}`);
+	}
+	if (result.remainder !== "0" || !parts.length) {
+		parts.push(`${result.remainder} ${baseUnit.name}`);
+	}
+	return parts.join(" ");
+}
+</script>
+
+<style scoped lang="less">
+.packages {
+	.options {
+		--td-button-border-radius: .5rem;
+
+		gap: .5rem;
+		display: flex;
+		flex-wrap: wrap;
+	}
+}
+</style>

src/pages/product/component/chartUtils.ts

@@ -56,10 +56,10 @@ export function buildHorizontalBarOption(categoryList: string[]): EChartsOption
 	return {
 		color: chartColorList,
 		grid: {
-			top: 12,
-			left: 8,
-			right: 18,
-			bottom: 12,
+			top: 32,
+			left: 0,
+			right: 0,
+			bottom: 0,
 			containLabel: true
 		},
 		legend: {

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,10 +32,16 @@
 				</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"
-					label="操作类型"
+					:label="operationFilterLabel"
 					:options="operationOptions"
 					@change="selectOperation"
 				/>
@@ -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"
@@ -69,9 +89,8 @@
 					</template>
 					<template #title>
 						<div class="title">
-							<span class="customer" v-text="getCustomerText(item)" />
-							<div class="operation">
-								<span v-text="getFundOperationText(item.operationType)" />
+							<span class="customer clip-text" v-text="getCustomerText(item)" />
+							<span class="type" :class="getOperationClass(item.operationType)" v-text="getFundOperationText(item.operationType)" />
 							<t-tag
 								size="small"
 								:content="getRecordStatusText(item)"
@@ -79,7 +98,6 @@
 								:theme="getRecordStatusTheme(item)"
 							/>
 						</div>
-						</div>
 					</template>
 					<template #description>
 						<div class="description">
@@ -124,10 +142,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 +178,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 +206,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, "all"));
+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]);
@@ -171,6 +231,7 @@ const operationOptions = [
 	{ label: "确认无需退款", value: "CONFIRM_NO_REFUND" },
 	{ label: "资金冲正", value: "REVOKE" }
 ];
+const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
 const statusOptions = [
 	{ label: "全部状态", value: "ALL" },
 	{ label: "待核销", value: "PENDING" },
@@ -179,24 +240,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 +356,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 || "未知";
 }
@@ -295,6 +461,15 @@ function getCustomerText(item: FundRecord): string {
 	return item.customer?.name || item.customer?.code || item.customerId || "未知客户";
 }
 
+function getOperationClass(type?: FundOperationType): string {
+	return ({
+		RECEIVE: "receive",
+		REFUND: "refund",
+		CONFIRM_NO_REFUND: "confirm-no-refund",
+		REVOKE: "revoke"
+	} as Record<string, string>)[type || ""] || "unknown";
+}
+
 function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
 	return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
 }
@@ -355,8 +530,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 +537,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,20 +553,14 @@ 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;
 		}
 	}
 
-	:deep(.t-pull-down-refresh) {
-		padding-top: .75rem;
-	}
-
 	.item {
 
 		.avatar {
@@ -403,25 +569,34 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 
 		.title {
-			gap: .5rem;
+			gap: .25rem;
 			display: flex;
 			font-size: .75rem;
 			align-items: center;
 			justify-content: space-between;
 
 			.customer {
-				min-width: 0;
-				overflow: hidden;
 				font-weight: 600;
-				white-space: nowrap;
-				text-overflow: ellipsis;
 			}
 
-			.operation {
-				gap: .5rem;
-				display: flex;
-				flex-shrink: 0;
-				align-items: center;
+			.type {
+				font-weight: 700;
+
+				&.receive {
+					color: #15803d;
+				}
+
+				&.refund {
+					color: #dc2626;
+				}
+
+				&.confirm-no-refund {
+					color: #2563eb;
+				}
+
+				&.revoke {
+					color: #7c3aed;
+				}
 			}
 		}
 
@@ -489,5 +664,23 @@ onUnmounted(() => navBarStore.clearRight());
 	.fallback {
 		background: #115e59;
 	}
+
+	.operation-type {
+		&.receive {
+			color: #86efac;
+		}
+
+		&.refund {
+			color: #fca5a5;
+		}
+
+		&.confirm-no-refund {
+			color: #93c5fd;
+		}
+
+		&.revoke {
+			color: #c4b5fd;
+		}
+	}
 }
 </style>

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"
@@ -577,7 +577,21 @@ async function handleCustomerChange(): Promise<void> {
 }
 
 async function toDetail(item: SalesOrder): Promise<void> {
-	if (item.id) await router.push(`/management/sales-orders/${item.id}`);
+	if (item.id) await router.push({
+		path: `/management/sales-orders/${item.id}`,
+		query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+	});
+}
+
+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
 }
 
 async function toPayment(item: SalesOrder): Promise<void> {
@@ -726,8 +740,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,18 +301,15 @@ onMounted(async () => {
 		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;
+			--td-input-vertical-padding: .5rem 1rem;
 
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 2;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 	}

src/pages/store/StoreDataCharts.vue

@@ -15,11 +15,17 @@
 			<store-event-structure-chart v-entrance-transition="280" :date-text-list="dateTextList" />
 		</template>
 		<template v-else>
+			<template v-if="chartMode === 'customer'">
 				<store-customer-growth-chart v-entrance-transition="70" :date-text-list="dateTextList" />
 				<store-customer-age-chart v-entrance-transition="140" />
 				<store-customer-disease-word-cloud-chart v-entrance-transition="210" />
 				<store-customer-gender-chart v-entrance-transition="280" />
 			</template>
+			<template v-else>
+				<store-point-daily-trend-chart v-entrance-transition="70" :date-text-list="dateTextList" />
+				<store-point-redemption-rank-chart v-entrance-transition="140" :date-text-list="dateTextList" />
+			</template>
+		</template>
 	</div>
 </template>
 
@@ -34,6 +40,8 @@ import StoreEventRecordCalendarSection from "@/pages/store/component/StoreEventR
 import StoreEventRecordTrendChart from "@/pages/store/component/StoreEventRecordTrendChart.vue";
 import StoreEventRecordNumberValueChart from "@/pages/store/component/StoreEventRecordNumberValueChart.vue";
 import StoreEventStructureChart from "@/pages/store/component/StoreEventStructureChart.vue";
+import StorePointDailyTrendChart from "@/pages/store/component/StorePointDailyTrendChart.vue";
+import StorePointRedemptionRankChart from "@/pages/store/component/StorePointRedemptionRankChart.vue";
 import { permissionCodes } from "@/utils/permission";
 import type { EventRecordCalendarListPayload } from "@/components/EventRecordCalendar.vue";
 
@@ -41,14 +49,15 @@ defineOptions({
 	name: "StoreDataCharts"
 });
 
-type ChartMode = "event" | "customer";
+type ChartMode = "event" | "customer" | "point";
 
 // ---------- 图表切换 ----------
 
 const chartMode = ref<ChartMode>("event");
 const chartModeOptions = [
 	{ value: "event" as ChartMode, label: "事件登记图表" },
-	{ value: "customer" as ChartMode, label: "客户分析图表" }
+	{ value: "customer" as ChartMode, label: "客户分析图表" },
+	{ value: "point" as ChartMode, label: "积分分析图表" }
 ];
 
 // ---------- 数据源 ----------

src/pages/store/component/StoreCustomerGrowthChart.vue

@@ -20,6 +20,7 @@ import StoreChartAPI from "@/api/StoreChartAPI";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { CustomerDailyStatCustomerView, CustomerDailyStatView } from "@/types/Customer";
 import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 const props = defineProps<{
 	dateTextList: string[];
@@ -31,6 +32,7 @@ const MAX_TOOLTIP_CUSTOMER_COUNT = 24;
 
 const statList = ref<CustomerDailyStatView[]>([]);
 let statRequestId = 0;
+const chartWidth = ref(window.innerWidth);
 
 // ---------- 图表窗口 ----------
 
@@ -43,8 +45,21 @@ const {
 	visibleDateTextList,
 	handleSliderChange
 } = useStoreChartWindow(dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(visibleDateTextList.value),
+	xAxis: {
+		type: "category",
+		data: visibleDateTextList.value.map(item => item.slice(5)),
+		axisTick: {
+			show: true,
+			length: 0,
+			interval: 0
+		},
+		axisLabel: {
+			color: "#52607a"
+		}
+	},
 	grid: {
 		top: 48,
 		left: 0,
@@ -90,6 +105,7 @@ const chartOption = computed<EChartsOption>(() => ({
 			name: "新客户量",
 			type: "bar",
 			yAxisIndex: 1,
+			markArea: buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, chartWidth.value),
 			data: visibleDateTextList.value.map(dateText => getDailyStat(dateText)?.newCustomerCount || 0)
 		}
 	],
@@ -101,6 +117,20 @@ const chartOption = computed<EChartsOption>(() => ({
 }));
 
 const { chartElement } = useStoreChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
+});
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
 
 watch(() => props.dateTextList, async () => {
 	await loadCustomerDailyStat();
@@ -125,6 +155,10 @@ async function loadCustomerDailyStat(): Promise<void> {
 	}
 }
 
+function updateChartWidth(): void {
+	chartWidth.value = chartElement.value?.clientWidth || window.innerWidth;
+}
+
 function getDailyStat(dateText: string): CustomerDailyStatView | undefined {
 	const dateValue = Number(dateText.replaceAll("-", ""));
 	return statList.value.find(item => item.dateValue === dateValue);

src/pages/store/component/StoreEventRecordTrendChart.vue

@@ -19,13 +19,13 @@
 
 <script setup lang="ts">
 import { Time } from "timi-web";
-import type { EChartsOption, MarkAreaComponentOption } from "echarts";
+import type { EChartsOption } from "echarts";
 import StoreChartAPI from "@/api/StoreChartAPI";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { EventItem } from "@/types/EventItem";
-import type { StoreBusinessDay, StoreEventRecordDailyStatView } from "@/types/Store";
-import { getCurrentStoreId } from "@/utils/store";
+import type { StoreEventRecordDailyStatView } from "@/types/Store";
 import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
 
 const props = defineProps<{
 	dateTextList: string[];
@@ -35,14 +35,13 @@ const props = defineProps<{
 
 const eventList = ref<EventItem[]>([]);
 const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
-const restDaySet = ref<Set<number>>(new Set());
 let statRequestId = 0;
-let restDayRequestId = 0;
 
 // ---------- 图表窗口 ----------
 
 const chartWidth = ref(window.innerWidth);
 const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
 const {
 	rangeText,
 	showSlider,
@@ -54,14 +53,6 @@ const {
 const legendRowCount = computed(() => countLegendRows(eventList.value.map(event => event.name || "未命名事件")));
 const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
 const legendBottom = computed(() => 20 + legendRowCount.value * 24);
-const showRestDayLabel = computed(() => {
-	const dateCount = visibleDateTextList.value.length;
-	if (!dateCount) {
-		return false;
-	}
-	const gridWidth = Math.max(0, chartWidth.value - 24);
-	return 24 <= gridWidth / dateCount;
-});
 const chartStyle = computed(() => ({
 	height: chartHeight.value
 }));
@@ -90,7 +81,7 @@ const chartOption = computed<EChartsOption>(() => ({
 		name: event.name || "未命名事件",
 		type: "bar",
 		stack: "record",
-		markArea: index < 1 ? buildRestDayMarkArea() : undefined,
+		markArea: index < 1 ? buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, chartWidth.value) : undefined,
 		itemStyle: getEventColor(event) ? {
 			color: getEventColor(event)
 		} : undefined,
@@ -102,10 +93,7 @@ const { chartElement } = useStoreChart(chartOption);
 let resizeObserver: ResizeObserver | undefined;
 
 watch(() => props.dateTextList, async () => {
-	await Promise.all([
-		loadDailyStat(),
-		loadRestDays()
-	]);
+	await loadDailyStat();
 }, {
 	deep: true
 });
@@ -117,10 +105,7 @@ onMounted(async () => {
 		updateChartWidth();
 	}
 	await loadEvents();
-	await Promise.all([
-		loadDailyStat(),
-		loadRestDays()
-	]);
+	await loadDailyStat();
 });
 
 onBeforeUnmount(() => {
@@ -164,60 +149,6 @@ function getRecordData(eventId: string, dateText: string): number | null {
 	return restDaySet.value.has(getDateValue(dateText)) ? null : countRecordByEventAndDate(eventId, dateText);
 }
 
-function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
-	const data: NonNullable<MarkAreaComponentOption["data"]> = [];
-	for (let dateIndex = 0; dateIndex < visibleDateTextList.value.length; dateIndex++) {
-		const dateText = visibleDateTextList.value[dateIndex];
-		if (restDaySet.value.has(getDateValue(dateText))) {
-			data.push([{ name: "休", xAxis: dateIndex }, { xAxis: dateIndex }]);
-		}
-	}
-	if (!data.length) {
-		return undefined;
-	}
-	return {
-		silent: true,
-		itemStyle: {
-			color: "rgba(148, 163, 184, .12)"
-		},
-		label: {
-			color: "#64748b",
-			fontSize: 12,
-			formatter: "休",
-			position: "insideBottom",
-			show: showRestDayLabel.value
-		},
-		data
-	};
-}
-
-async function loadRestDays(): Promise<void> {
-	const requestId = ++restDayRequestId;
-	const dateList = props.dateTextList;
-	const storeId = getCurrentStoreId();
-	if (!storeId || !dateList.length) {
-		restDaySet.value = new Set();
-		return;
-	}
-
-	try {
-		const list = await StoreChartAPI.businessDayCalendar(storeId, getDateValue(dateList[0]), getDateValue(dateList[dateList.length - 1]));
-		if (requestId === restDayRequestId) {
-			restDaySet.value = new Set(getRestDayList(list));
-		}
-	} catch {
-		if (requestId === restDayRequestId) {
-			restDaySet.value = new Set();
-		}
-	}
-}
-
-function getRestDayList(list: StoreBusinessDay[]): number[] {
-	return list
-		.filter(item => item.status === "CLOSED" && item.dateValue)
-		.map(item => item.dateValue as number);
-}
-
 function getEventColor(event: EventItem): string | undefined {
 	return event.color || undefined;
 }

src/pages/store/component/StorePointDailyTrendChart.vue

@@ -0,0 +1,225 @@
+<template>
+	<section class="chart-section">
+		<div class="title">
+			<h2>每日积分变动趋势</h2>
+		</div>
+		<div ref="chartElement" class="chart" />
+		<div v-if="loading" class="center-tips">
+			<t-loading size="1.5rem" text="加载中" />
+		</div>
+		<chart-range-slider
+			v-if="showSlider"
+			:model-value="sliderValue"
+			:max="maxSliderValue"
+			:min-range="5"
+			:label="rangeText"
+			@change="handleSliderChange"
+		/>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import type { EChartsOption } from "echarts";
+import GaoPointChartAPI from "@/api/GaoPointChartAPI";
+import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
+import type { GaoPointDailyStatView } from "@/types/GaoChart";
+import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
+
+defineOptions({
+	name: "StorePointDailyTrendChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+}>();
+
+const dateTextList = computed(() => props.dateTextList);
+const chartWidth = ref(window.innerWidth);
+const statList = ref<GaoPointDailyStatView[]>([]);
+const loading = ref(false);
+let statRequestId = 0;
+const { restDaySet } = useRestDayCalendar(dateTextList);
+const {
+	rangeText,
+	showSlider,
+	sliderValue,
+	maxSliderValue,
+	visibleDateTextList,
+	handleSliderChange
+} = useStoreChartWindow(dateTextList);
+const chartOption = computed<EChartsOption>(() => {
+	const labelList = visibleDateTextList.value.map(item => item.slice(5));
+	return {
+		...buildStoreBaseChartOption(visibleDateTextList.value),
+		grid: {
+			top: 32,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisLine: { onZero: true },
+			axisTick: { show: true, length: 0, interval: 0 },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		series: [
+			{
+				name: "获得积分",
+				type: "bar",
+				stack: "stock-movement",
+				markArea: buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, chartWidth.value),
+				data: visibleDateTextList.value.map(dateText => Math.abs(getNumber(getDailyItem(dateText)?.earnedPoints)))
+			},
+			{
+				name: "消耗积分",
+				type: "bar",
+				stack: "stock-movement",
+				data: visibleDateTextList.value.map(dateText => -Math.abs(getNumber(getDailyItem(dateText)?.consumedPoints)))
+			},
+			{
+				name: "获得与消耗差值",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.value.map(dateText => getNumber(getDailyItem(dateText)?.netChangePoints))
+			}
+		]
+	};
+});
+const { chartElement } = useStoreChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
+
+watch(() => props.dateTextList, async () => {
+	await loadDailyStat();
+}, {
+	deep: true,
+	immediate: true
+});
+
+onMounted(() => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
+});
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
+
+async function loadDailyStat(): Promise<void> {
+	if (!props.dateTextList.length) {
+		statRequestId++;
+		statList.value = [];
+		loading.value = false;
+		return;
+	}
+
+	const requestId = ++statRequestId;
+	loading.value = true;
+	try {
+		const list = await GaoPointChartAPI.dailyTrend({
+			beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+			endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
+		});
+		if (requestId === statRequestId) {
+			statList.value = list;
+		}
+	} finally {
+		if (requestId === statRequestId) {
+			loading.value = false;
+		}
+	}
+}
+
+function getDailyItem(dateText: string): GaoPointDailyStatView | undefined {
+	const dateValue = Number(dateText.replaceAll("-", ""));
+	return statList.value.find(item => item.dateValue === dateValue);
+}
+
+function getNumber(value?: number): number {
+	return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+
+function updateChartWidth(): void {
+	chartWidth.value = chartElement.value?.clientWidth || window.innerWidth;
+}
+
+function getDateStart(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 0, 0, 0, 0);
+}
+
+function getDateEnd(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 23, 59, 59, 999);
+}
+</script>
+
+<style scoped lang="less">
+.chart-section {
+	padding: 1rem;
+	position: relative;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: 1.25rem;
+
+	.title {
+		gap: .5rem;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+
+		h2 {
+			margin: 0 0 .875rem 0;
+			color: #0f172a;
+			font-size: 1rem;
+			font-weight: 700;
+		}
+
+		.caption {
+			color: #94a3b8;
+			font-size: .6875rem;
+		}
+	}
+
+	.chart {
+		width: 100%;
+		height: 17rem;
+	}
+
+	.center-tips {
+		top: 50%;
+		left: 0;
+		right: 0;
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+}
+
+:global(html.theme-dark) {
+	.chart-section {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		.title {
+			h2 {
+				color: #e2e8f0;
+			}
+
+			.caption {
+				color: #94a3b8;
+			}
+		}
+	}
+}
+</style>

src/pages/store/component/StorePointRedemptionRankChart.vue

@@ -0,0 +1,95 @@
+<template>
+	<date-range-chart-card
+		title="积分兑换排行"
+		:option="chartOption"
+		:loading="loading"
+		height="20rem"
+	/>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import type { EChartsOption } from "echarts";
+import GaoPointChartAPI from "@/api/GaoPointChartAPI";
+import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
+import type { GaoPointRedemptionProductRankView } from "@/types/GaoChart";
+import { buildHorizontalBarOption, getNumber } from "@/pages/product/component/chartUtils";
+
+defineOptions({
+	name: "StorePointRedemptionRankChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+}>();
+
+const rankList = ref<GaoPointRedemptionProductRankView[]>([]);
+const loading = ref(false);
+let rankRequestId = 0;
+const chartOption = computed<EChartsOption>(() => {
+	const list = rankList.value.slice(0, 10);
+	return {
+		...buildHorizontalBarOption(list.map(getProductName)),
+		series: [
+			{
+				name: "兑换积分",
+				type: "bar",
+				barMaxWidth: 20,
+				label: {
+					show: true,
+					position: "right",
+					color: "#52607a",
+					formatter: "{c}"
+				},
+				data: list.map(item => getNumber(item.pointCost))
+			}
+		]
+	};
+});
+
+watch(() => props.dateTextList, async () => {
+	await loadRankList();
+}, {
+	deep: true,
+	immediate: true
+});
+
+async function loadRankList(): Promise<void> {
+	if (!props.dateTextList.length) {
+		rankRequestId++;
+		rankList.value = [];
+		loading.value = false;
+		return;
+	}
+
+	const requestId = ++rankRequestId;
+	loading.value = true;
+	try {
+		const list = await GaoPointChartAPI.redemptionProductRank({
+			beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+			endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
+		});
+		if (requestId === rankRequestId) {
+			rankList.value = list.slice(0, 10);
+		}
+	} finally {
+		if (requestId === rankRequestId) {
+			loading.value = false;
+		}
+	}
+}
+
+function getProductName(item: GaoPointRedemptionProductRankView): string {
+	return item.productName || "未命名产品";
+}
+
+function getDateStart(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 0, 0, 0, 0);
+}
+
+function getDateEnd(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 23, 59, 59, 999);
+}
+</script>

src/pages/store/component/useRestDayCalendar.ts

@@ -0,0 +1,97 @@
+import { onMounted, watch } from "vue";
+import type { ComputedRef } from "vue";
+import type { MarkAreaComponentOption } from "echarts";
+import StoreChartAPI from "@/api/StoreChartAPI";
+import type { StoreBusinessDay } from "@/types/Store";
+import { getCurrentStoreId } from "@/utils/store";
+
+export function useRestDayCalendar(dateTextList: ComputedRef<string[]>) {
+	const restDaySet = ref<Set<number>>(new Set());
+	let requestId = 0;
+
+	watch(dateTextList, async () => {
+		await loadRestDays();
+	}, { deep: true });
+	onMounted(async () => {
+		await loadRestDays();
+	});
+
+	async function loadRestDays(): Promise<void> {
+		const currentRequestId = ++requestId;
+		const dateList = dateTextList.value;
+		const storeId = getCurrentStoreId();
+		if (!storeId || !dateList.length) {
+			restDaySet.value = new Set();
+			return;
+		}
+
+		try {
+			const businessDayList = await StoreChartAPI.businessDayCalendar(
+				storeId,
+				getDateValue(dateList[0]),
+				getDateValue(dateList[dateList.length - 1])
+			);
+			if (currentRequestId === requestId) {
+				restDaySet.value = new Set(getRestDayList(businessDayList));
+			}
+		} catch {
+			if (currentRequestId === requestId) {
+				restDaySet.value = new Set();
+			}
+		}
+	}
+
+	return {
+		restDaySet
+	};
+}
+
+export function buildRestDayMarkArea(
+	dateTextList: string[],
+	restDaySet: ReadonlySet<number>,
+	chartWidth: number
+): MarkAreaComponentOption | undefined {
+	const data: NonNullable<MarkAreaComponentOption["data"]> = [];
+	let restDayBeginIndex = -1;
+	for (let dateIndex = 0; dateIndex < dateTextList.length; dateIndex++) {
+		const dateText = dateTextList[dateIndex];
+		const isRestDay = Boolean(dateText && restDaySet.has(getDateValue(dateText)));
+		if (isRestDay && restDayBeginIndex < 0) {
+			restDayBeginIndex = dateIndex;
+		} else if (!isRestDay && 0 <= restDayBeginIndex) {
+			data.push([{ name: "休", xAxis: restDayBeginIndex }, { xAxis: dateIndex - 1 }]);
+			restDayBeginIndex = -1;
+		}
+	}
+	if (0 <= restDayBeginIndex) {
+		data.push([{ name: "休", xAxis: restDayBeginIndex }, { xAxis: dateTextList.length - 1 }]);
+	}
+	if (!data.length) {
+		return undefined;
+	}
+	return {
+		silent: true,
+		animation: false,
+		itemStyle: {
+			color: "rgba(148, 163, 184, .12)"
+		},
+		label: {
+			color: "#64748b",
+			fontSize: 12,
+			formatter: "休",
+			position: "insideBottom",
+			show: 0 < dateTextList.length && 24 <= Math.max(0, chartWidth - 24) / dateTextList.length
+		},
+		data
+	};
+}
+
+function getRestDayList(list: StoreBusinessDay[]): number[] {
+	return list
+		.filter(item => item.status === "CLOSED" && item.dateValue)
+		.map(item => item.dateValue as number);
+}
+
+function getDateValue(dateText: string): number {
+	return Number(dateText.replaceAll("-", ""));
+}

src/pages/tabs/ProductTab.vue

@@ -97,7 +97,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 			{
 				icon: "undertake-delivery",
 				path: "/management/order-fulfillments",
-				title: "统一履约",
+				title: "履约记录",
 				visible: userStore.hasPermissions(permissionCodes.orderFulfillment.read)
 			},
 			{

src/pages/tag/TagList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="corePermissionCodes.tag.read" class="tag-list">
-		<div class="header bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="search"
@@ -274,12 +274,11 @@ onUnmounted(() => {
 .tag-list {
 	padding: var(--app-nav-height) 0 2rem 0;
 
-	.header {
+	.filters {
 		top: var(--app-nav-height);
 		z-index: 10;
-		padding: .5rem;
+		padding: .5rem 1rem;
 		position: sticky;
-		box-shadow: var(--td-shadow-1);
 
 		.search {
 			border: 1px solid var(--td-component-border);

src/router/routes/fulfillmentRoutes.ts

@@ -5,7 +5,7 @@ function meta(title: string, depth = 3): RouteRecordRaw["meta"] {
 }
 
 export default [
-	{ path: "/management/order-fulfillments", name: "OrderFulfillmentList", component: () => import("@/pages/fulfillment/OrderFulfillmentList.vue"), meta: meta("统一履约") },
+	{ path: "/management/order-fulfillments", name: "OrderFulfillmentList", component: () => import("@/pages/fulfillment/OrderFulfillmentList.vue"), meta: meta("履约记录") },
 	{ path: "/management/order-fulfillments/create", name: "OrderFulfillmentCreate", component: () => import("@/pages/fulfillment/OrderFulfillmentCreate.vue"), meta: meta("创建履约单", 4) },
 	{ path: "/management/order-fulfillments/:id", name: "OrderFulfillmentDetail", component: () => import("@/pages/fulfillment/OrderFulfillmentDetail.vue"), meta: meta("履约单详情", 4) }
 ] as RouteRecordRaw[];

src/store/permissionSettingsStore.ts

@@ -1,6 +1,9 @@
 import { defineStore } from "pinia";
 import { PermissionAPI } from "timi-web-api/api/PermissionAPI";
 import { RoleAPI } from "timi-web-api/api/RoleAPI";
+import { useUserStore } from "timi-web-api";
+import { GaoRoleAPI } from "@/api/GaoRoleAPI";
+import { coreRoleCodes } from "@/utils/permission";
 import type { ModuleCode, PermissionPayload, Role as UserRole } from "timi-web-api/types";
 import type {
 	Permission,
@@ -58,6 +61,7 @@ function createEmptyPermission(): Permission {
 }
 
 export const usePermissionSettingsStore = defineStore("permission-settings", () => {
+	const userStore = useUserStore();
 	const roleList = ref<Role[]>([]);
 	const permissionList = ref<Permission[]>([]);
 	const manageableRoleList = ref<Role[]>([]);
@@ -72,6 +76,24 @@ export const usePermissionSettingsStore = defineStore("permission-settings", ()
 		return roots.flatMap(item => buildRoleTree(item.id, 0, new Set<string>()));
 	});
 
+	async function loadRoleList(): Promise<Role[]> {
+		if (!userStore.hasRoles(coreRoleCodes.admin)) {
+			return (await GaoRoleAPI.managementList()).map(normalizeRole);
+		}
+
+		const result = await RoleAPI.list({
+			index: 0,
+			size: pageSize,
+			equalsExample: {
+				moduleCode: moduleCode
+			},
+			orderMap: {
+				code: "ASC"
+			}
+		});
+		return result.list.map(normalizeRole);
+	}
+
 	// ---------- 基础数据 ----------
 
 	async function loadAll(force = false): Promise<void> {
@@ -87,16 +109,7 @@ export const usePermissionSettingsStore = defineStore("permission-settings", ()
 		loading.value = true;
 		loadTask = (async () => {
 			const [roleResult, permissionResult] = await Promise.all([
-				RoleAPI.list({
-					index: 0,
-					size: pageSize,
-					equalsExample: {
-						moduleCode: moduleCode
-					},
-					orderMap: {
-						code: "ASC"
-					}
-				}),
+				loadRoleList(),
 				PermissionAPI.list({
 					index: 0,
 					size: pageSize,
@@ -108,7 +121,10 @@ export const usePermissionSettingsStore = defineStore("permission-settings", ()
 					}
 				})
 			]);
-			roleList.value = roleResult.list.map(normalizeRole);
+			roleList.value = roleResult;
+			if (!userStore.hasRoles(coreRoleCodes.admin)) {
+				manageableRoleList.value = roleResult;
+			}
 			permissionList.value = permissionResult.list;
 			loaded.value = true;
 		})();
@@ -125,6 +141,9 @@ export const usePermissionSettingsStore = defineStore("permission-settings", ()
 		if (!id) {
 			return createEmptyRole();
 		}
+		if (!userStore.hasRoles(coreRoleCodes.admin) && !roleList.value.some(item => item.id === id)) {
+			throw new Error("角色不在本店可管理范围内");
+		}
 
 		const role = normalizeRole(await RoleAPI.detail(id));
 		upsertLocalRole(role);

src/types/Fulfillment.ts

@@ -52,6 +52,7 @@ export type FulfillmentPage = {
 	storeId?: string;
 	salesOrderId?: string;
 	customerId?: string;
+	skuIdList?: string[];
 	status?: GaoFulfillmentStatus;
 	beginAt?: number;
 	endAt?: number;

src/types/GaoChart.ts

@@ -11,6 +11,26 @@ export type GaoProductChartReq = {
 	topN?: number;
 };
 
+export type GaoPointChartReq = {
+	storeId?: string;
+	beginAt: number;
+	endAt: number;
+};
+
+export type GaoPointDailyStatView = {
+	dateValue?: number;
+	earnedPoints?: number;
+	consumedPoints?: number;
+	netChangePoints?: number;
+};
+
+export type GaoPointRedemptionProductRankView = {
+	productId?: string;
+	productName?: string;
+	redemptionCount?: number;
+	pointCost?: number;
+};
+
 export type GaoSalesOrderChartReq = {
 	storeId?: string;
 	customerId?: string;

src/types/Product.ts

@@ -51,6 +51,12 @@ export type ProductSkuUnit = {
 	sort?: number;
 } & Model;
 
+export type ProductSkuBaseUnitMigrationRequest = {
+	targetUnitId?: string;
+	targetUnitName?: string;
+	oldToNewBaseRatio: number | string;
+};
+
 export type ProductSku = {
 	storeId?: string;
 	productId?: string;
@@ -67,6 +73,7 @@ export type ProductSku = {
 	updatedBy?: string;
 	specValueIdList?: string[];
 	unitList?: ProductSkuUnit[];
+	baseUnitMigrationRequest?: ProductSkuBaseUnitMigrationRequest;
 	attachmentList?: Attachment[];
 } & Model;
 
@@ -82,6 +89,9 @@ export type Product = {
 	categoryId?: string;
 	code: string;
 	name: string;
+	namePinyinFull?: string;
+	namePinyinInitial?: string;
+	namePinyinMixed?: string;
 	productType: ProductType;
 	stockEnabled: boolean;
 	status?: ProductStatus;
@@ -192,6 +202,7 @@ export type StockRecord = {
 export type StockRecordPage = {
 	storeId?: string;
 	productId?: string;
+	skuId?: string;
 	keyword?: string;
 	bizType?: StockBizType;
 	bizId?: string;

src/types/ProductEditor.ts

@@ -4,10 +4,14 @@ import type { Product, ProductAttachmentType, ProductSku, ProductSkuUnit, Produc
 
 export type ProductSpecValueForm = ProductSpecValue & {
 	clientKey: string;
+	originalName: string;
+	originalSort?: number;
 };
 
 export type ProductSpecForm = Omit<ProductSpec, "valueList"> & {
 	clientKey: string;
+	originalName: string;
+	originalSort?: number;
 	valueList: ProductSpecValueForm[];
 };
 
@@ -21,6 +25,8 @@ export type ProductSkuForm = Omit<ProductSku, "unitList"> & {
 	unitList: ProductSkuUnitForm[];
 	minStockQuantityText: string;
 	photoItemList: PhotoItem[];
+	originalBaseUnitId?: string;
+	baseUnitMigrationRatioText: string;
 };
 
 export type ProductForm = Omit<Product, "specList" | "skuList"> & {

src/utils/package.ts

@@ -100,6 +100,29 @@ export function convertBaseQuantityToPackageQuantity(baseQuantity: number | stri
 	return formatDecimal(rounded, 3, 3);
 }
 
+/** 将非负基础数量精确拆分为整包装和基础单位余数，不对余数取整。 */
+export function splitBaseQuantityIntoPackages(baseQuantity: number | string, baseQuantityPerUnit: number | string): { whole: string; remainder: string } | undefined {
+	const quantityParts = toDecimalParts(baseQuantity, 3);
+	const unitParts = toDecimalParts(baseQuantityPerUnit, 6);
+	if (!quantityParts || !unitParts) {
+		return undefined;
+	}
+	const scale = Math.max(quantityParts.scale, unitParts.scale);
+	const factor = 10n ** BigInt(scale);
+	const quantity = quantityParts.value * 10n ** BigInt(scale - quantityParts.scale);
+	const unit = unitParts.value * 10n ** BigInt(scale - unitParts.scale);
+	if (unit <= factor) {
+		return undefined;
+	}
+	const remainder = quantity % unit;
+	const integer = (remainder / factor).toString();
+	const fraction = (remainder % factor).toString().padStart(scale, "0").replace(/0+$/, "");
+	return {
+		whole: (quantity / unit).toString(),
+		remainder: fraction ? `${integer}.${fraction}` : integer
+	};
+}
+
 /** 精确相加两个最多三位小数的数量。 */
 export function addPackageQuantity(left: number | string, right: number | string): string | undefined {
 	const leftParts = toQuantityParts(left);