add ProductStockPackageSummary.vue

.gitignore

@@ -136,3 +136,9 @@ auto-imports.d.ts
 components.d.ts
 .eslintrc-auto-import.json
 
+# ---> WorkBuddy 本地工作目录
+# 内含 AI 工作记忆与每日日志：写明本机绝对路径与调试上下文，且每次会话都在追加，
+# 提交只会污染 diff 与 blame，多人还会在同一文件上产生无意义的行级冲突。
+# 需要团队共享的结论请写入 AGENTS.md 或 .serena/memories/，不要放这里。
+/.workbuddy/
+

package.json

@@ -33,6 +33,7 @@
 		"timi-web": "link:E:/WebProject/timi-web",
 		"timi-web-api": "link:E:/WebProject/timi-web-api",
 		"ts-node": "^10.9.2",
+		"vconsole": "^3.15.1",
 		"vue": "^3.5.16",
 		"vue-draggable-next": "^2.3.0",
 		"vue-echarts": "^8.0.1",

pnpm-lock.yaml

@@ -44,6 +44,9 @@ importers:
       ts-node:
         specifier: ^10.9.2
         version: 10.9.2(@types/node@24.13.3)(typescript@5.8.3)
+      vconsole:
+        specifier: ^3.15.1
+        version: 3.15.1
       vue:
         specifier: ^3.5.16
         version: 3.5.40(typescript@5.8.3)
@@ -904,6 +907,13 @@ packages:
     resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
     engines: {node: '>=18'}
 
+  copy-text-to-clipboard@3.2.2:
+    resolution: {integrity: sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==}
+    engines: {node: '>=12'}
+
+  core-js@3.50.0:
+    resolution: {integrity: sha512-BRWgOLKkFeCgRudR6zrs8p9XJZcE14grzKMMssoYrk6krtuEZ7MTKPIY5RzOnqsEKIR9kst7wNzphttraT+Yqw==}
+
   cors@2.8.6:
     resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
     engines: {node: '>= 0.10'}
@@ -1439,6 +1449,9 @@ packages:
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
+  mutation-observer@1.0.3:
+    resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
+
   nanoid@3.3.16:
     resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1871,6 +1884,9 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vconsole@3.15.1:
+    resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
+
   vite@6.4.3:
     resolution: {integrity: sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -2763,6 +2779,10 @@ snapshots:
     dependencies:
       is-what: 5.5.0
 
+  copy-text-to-clipboard@3.2.2: {}
+
+  core-js@3.50.0: {}
+
   cors@2.8.6:
     dependencies:
       object-assign: 4.1.1
@@ -3333,6 +3353,8 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
+  mutation-observer@1.0.3: {}
+
   nanoid@3.3.16: {}
 
   natural-compare@1.4.0: {}
@@ -3818,6 +3840,13 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vconsole@3.15.1:
+    dependencies:
+      '@babel/runtime': 7.29.7
+      copy-text-to-clipboard: 3.2.2
+      core-js: 3.50.0
+      mutation-observer: 1.0.3
+
   vite@6.4.3(@types/node@24.13.3)(less@4.8.0)(terser@5.49.0):
     dependencies:
       esbuild: 0.25.12

public/.well-known/assetlinks.json

@@ -1,11 +1,14 @@
 [
 	{
-		"relation": ["delegate_permission/common.handle_all_urls"],
+		"relation": [
+			"delegate_permission/common.handle_all_urls",
+			"delegate_permission/common.use_as_origin"
+		],
 		"target": {
 			"namespace": "android_app",
 			"package_name": "com.imyeyu.gao.customer",
 			"sha256_cert_fingerprints": [
-				"EF:65:BA:62:7D:E3:1C:D3:BD:C7:D9:1D:6A:69:35:81:56:87:DF:03:0D:E7:76:27:94:90:5E:CC:F4:45:02:69"
+				"3E:9C:CC:8A:29:71:18:74:BB:56:AA:88:AD:62:E1:F3:AC:F2:70:07:C4:67:D9:32:B8:A2:4B:B7:E7:8E:06:34"
 			]
 		}
 	}

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

@@ -1,17 +0,0 @@
-<template>
-	<route-page :background="background" :component="component" />
-</template>
-
-<script setup lang="ts">
-import type { Component } from "vue";
-import RoutePage from "@/components/RoutePage.vue";
-
-defineOptions({
-	name: "CachedRoutePage"
-});
-
-defineProps<{
-	background: string;
-	component: Component;
-}>();
-</script>

src/components/CustomerProfileCard.vue

@@ -2,13 +2,13 @@
 	<div v-if="customer" class="customer-profile-card">
 		<div v-if="photoURL" class="avatar-trigger" @click="handlePhotoClick">
 			<t-image :src="photoURL" :alt="customerName" fit="cover" class="avatar" />
-			<div @click.stop>
+			<teleport to="body">
 				<t-image-viewer
 					v-model:visible="photoViewerVisible"
 					:images="photoViewerImages"
 					show-index
 				/>
-			</div>
+			</teleport>
 		</div>
 		<div v-else class="avatar fallback" v-text="avatarText" />
 		<div class="content">

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

@@ -60,6 +60,7 @@ import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
 import { compressUploadImageList } from "@/utils/imageCompression";
 import { Message } from "@/utils/message";
+import { saveCapturedFilesFromInput } from "@/utils/twaBridge";
 
 defineOptions({
 	name: "EventRecordVerifyDialog"
@@ -131,6 +132,7 @@ async function handlePhotoSelected(event: Event): Promise<void> {
 	if (!fileList.length) {
 		return;
 	}
+	saveCapturedFilesFromInput(input, fileList);
 
 	isPhotoUploading.value = true;
 	try {

src/components/PageTransition.vue

@@ -1,182 +0,0 @@
-<template>
-	<div class="page-transition">
-		<router-view v-slot="{ Component }">
-			<transition :name="transitionName">
-				<keep-alive :include="keepAlivePageNames">
-					<component
-						:is="isCachedPage ? CachedRoutePage : RoutePage"
-						:key="route.path"
-						:background="pageBackground"
-						:component="Component"
-					/>
-				</keep-alive>
-			</transition>
-		</router-view>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { RouteLocationNormalized } from "vue-router";
-import CachedRoutePage from "@/components/CachedRoutePage.vue";
-import RoutePage from "@/components/RoutePage.vue";
-import { useGlobalUIStore } from "@/store/globalUI";
-
-defineOptions({
-	name: "PageTransition"
-});
-
-const route = useRoute();
-const router = useRouter();
-const globalUIStore = useGlobalUIStore();
-// KeepAlive 直接缓存的是单根路由边界，列表页面位于该边界子树中，仍会收到 activated / deactivated 生命周期。
-const keepAlivePageNames = ["CachedRoutePage"];
-const cachedPageRouteNameSet = new Set(["SalesOrderList", "ProductList", "ProductStockList"]);
-const isCachedPage = computed(() => cachedPageRouteNameSet.has(String(route.name)));
-
-const transitionName = ref("push-left");
-const pageBackground = computed(() => globalUIStore.bodyBackground);
-
-// ---------- 路由深度计算 ----------
-
-const pathCache = new Map<string, number>();
-
-function calcDepth(sourceRoute: RouteLocationNormalized): number {
-	const queryDepth = parseTransitionDepth(sourceRoute.query.transitionDepth);
-	if (queryDepth !== undefined) {
-		return queryDepth;
-	}
-
-	if (!sourceRoute.meta.dynamicDepth) {
-		return Number(sourceRoute.meta.depth ?? 0);
-	}
-
-	const fullPath = sourceRoute.fullPath;
-	const cachedDepth = pathCache.get(fullPath);
-	if (cachedDepth !== undefined) {
-		return cachedDepth;
-	}
-
-	const baseDepth = Number(sourceRoute.meta.baseDepth ?? 0);
-	const pathSegments = fullPath.split("?")[0].split("/").filter(pathSegment => pathSegment !== "");
-	const depth = baseDepth + (pathSegments.length - 1);
-	pathCache.set(fullPath, depth);
-	return depth;
-}
-
-function parseTransitionDepth(value: unknown): number | undefined {
-	if (Array.isArray(value)) {
-		return parseTransitionDepth(value[0]);
-	}
-
-	if (typeof value !== "string") {
-		return undefined;
-	}
-
-	const text = value.trim();
-	if (!text) {
-		return undefined;
-	}
-
-	const depth = Number(text);
-	if (!Number.isInteger(depth) || depth < 0 || 20 < depth) {
-		return undefined;
-	}
-	return depth;
-}
-
-const unregisterGuard = router.beforeEach((to, from) => {
-	const toDepth = calcDepth(to);
-	const fromDepth = calcDepth(from);
-
-	if (fromDepth < toDepth) {
-		transitionName.value = "push-left";
-	} else if (toDepth < fromDepth) {
-		transitionName.value = "push-right";
-	} else {
-		transitionName.value = "";
-	}
-});
-
-onUnmounted(() => {
-	unregisterGuard();
-	pathCache.clear();
-});
-</script>
-
-<style scoped lang="less">
-@easing: cubic-bezier(.19, 1, .22, 1);
-@duration: 520ms;
-@brightness: .98;
-@shadow-intensity: .15;
-@page-offset: 25%;
-
-.page-transition {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	overflow-x: clip;
-	z-index: 0;
-
-	// ---------- push-left / push-right 公共激活状态 ----------
-
-	:deep(.push-left-enter-active),
-	:deep(.push-left-leave-active),
-	:deep(.push-right-enter-active),
-	:deep(.push-right-leave-active) {
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		transition: transform @duration @easing, opacity .2s linear;
-		backface-visibility: hidden;
-	}
-
-	// ---------- push-left：下一页从右滑入，当前页缩退到左侧 ----------
-
-	:deep(.push-left-enter-from) {
-		transform: translate3d(100%, 0, 0);
-		box-shadow: -4px 0 16px rgba(0, 0, 0, @shadow-intensity);
-	}
-
-	:deep(.push-left-enter-to) {
-		transform: translate3d(0, 0, 0);
-	}
-
-	:deep(.push-left-leave-active) {
-		transition: all @duration @easing, filter .3s;
-	}
-
-	:deep(.push-left-leave-to) {
-		filter: brightness(@brightness);
-		transform: translate3d(-@page-offset, 0, 0);
-	}
-
-	// ---------- push-right：当前页从右滑出，上一页从左侧复位 ----------
-
-	:deep(.push-right-enter-active) {
-		z-index: 0;
-		transition: transform @duration @easing, opacity .3s;
-	}
-
-	:deep(.push-right-enter-from) {
-		transform: translate3d(-@page-offset, 0, 0);
-	}
-
-	:deep(.push-right-enter-to) {
-		transform: translate3d(0, 0, 0);
-	}
-
-	:deep(.push-right-leave-active) {
-		z-index: 1;
-		transition: transform @duration @easing, box-shadow .3s;
-	}
-
-	:deep(.push-right-leave-from) {
-		transform: translate3d(0, 0, 0);
-	}
-
-	:deep(.push-right-leave-to) {
-		transform: translate3d(105%, 0, 0);
-		box-shadow: 4px 0 16px rgba(0, 0, 0, @shadow-intensity);
-	}
-}
-</style>

src/components/PhotoField.vue

@@ -34,11 +34,13 @@
 				<t-icon name="close" size="1rem" />
 			</t-button>
 		</div>
-		<t-image-viewer
-			v-model:visible="photoViewerVisible"
-			:images="photoViewerImages"
-			show-index
-		/>
+		<teleport to="body">
+			<t-image-viewer
+				v-model:visible="photoViewerVisible"
+				:images="photoViewerImages"
+				show-index
+			/>
+		</teleport>
 	</div>
 </template>
 

src/components/ProductSelector.vue

@@ -18,84 +18,75 @@
 		@left-button-click="close"
 	>
 		<div class="popup">
-			<div class="products">
-				<div class="search-wrap">
-					<t-input v-model="keyword" class="search" borderless placeholder="搜索产品名称或编码" />
-				</div>
-				<div class="items">
-					<t-collapse
-						v-if="visibleProductList.length"
-						v-model="expandedProductKeyList"
-						class="collapse"
-						theme="card"
-						:expand-mutex="true"
-						@change="handleProductChange"
+			<div class="search-wrap">
+				<t-input v-model="keyword" class="search" borderless placeholder="搜索产品名称或编码" />
+			</div>
+			<div class="items">
+				<t-collapse
+					v-if="visibleProductList.length"
+					v-model="expandedProductKeyList"
+					class="collapse"
+					theme="card"
+					:expand-mutex="true"
+					@change="handleProductChange"
+				>
+					<t-collapse-panel
+						class="item"
+						v-for="(product, productIndex) in visibleProductList"
+						:key="getProductKey(product, productIndex)"
+						:value="getProductKey(product, productIndex)"
+						placement="bottom"
 					>
-						<t-collapse-panel
-							v-for="(product, productIndex) in visibleProductList"
-							:key="getProductKey(product, productIndex)"
-							:value="getProductKey(product, productIndex)"
-							class="panel"
-							placement="bottom"
-						>
-							<template #header>
-								<div class="product-header">
-									<t-image
-										v-if="getProductPhotoURL(product)"
-										:src="getProductPhotoURL(product)"
-										:alt="product.name || '产品图片'"
-										fit="cover"
-										class="avatar"
-									/>
-									<div v-else class="avatar fallback" v-text="(product.name || product.code || '产').slice(0, 1)" />
-									<div class="product-info">
-										<strong v-text="product.name || '未命名产品'" />
-										<span v-text="`${product.code || '-'} · ${product.skuList?.length || 0} 个 SKU`" />
-									</div>
-								</div>
-							</template>
-							<div v-if="isExpandedProduct(product, productIndex)" class="selection">
-								<div v-if="specList.length" class="specs">
-									<div v-for="spec in specList" :key="spec.id || spec.name" class="spec">
-										<strong v-text="spec.name" />
-										<div class="values">
-											<t-button
-												v-for="value in enabledValues(spec)"
-												:key="value.id"
-												size="extra-small"
-												:theme="selectedSpecValueMap[spec.id || ''] === value.id ? 'primary' : 'default'"
-												:variant="selectedSpecValueMap[spec.id || ''] === value.id ? 'base' : 'outline'"
-												:content="value.name"
-												@click="selectSpecValue(spec.id || '', value.id || '')"
-											/>
-										</div>
-									</div>
-								</div>
-								<div v-if="matchedSku" class="sku-card">
-									<div class="sku-title">
-										<strong v-text="matchedSku.name || matchedSku.specSummary || '默认 SKU'" />
-										<span v-if="matchedSku.code" v-text="matchedSku.code" />
-									</div>
-									<div class="units">
-										<t-button
-											v-for="unit in saleableUnits(matchedSku)"
-											:key="unit.id"
-											size="small"
-											:theme="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'primary' : 'default'"
-											:variant="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'base' : 'outline'"
-											@click="selectUnit(matchedSku, unit.id || '')"
-										>
-											<span v-text="unit.name" />
-											<span v-if="unit.salePrice !== null && unit.salePrice !== undefined" class="price" v-text="`￥${formatProductAmount(unit.salePrice)}`" />
-										</t-button>
-									</div>
-								</div>
-								<div v-else class="empty" v-text="specList.length ? '请选择每个规格项的规格值' : '暂无可售 SKU'" />
+						<template #header>
+							<div class="header">
+								<t-image
+									v-if="getProductPhotoURL(product)"
+									:src="getProductPhotoURL(product)"
+									:alt="product.name || '产品图片'"
+									fit="cover"
+									class="avatar"
+								/>
+								<div v-else class="avatar fallback" v-text="(product.name || product.code || '产').slice(0, 1)" />
+								<strong class="clip-text" v-text="product.name || '未命名产品'" />
 							</div>
-						</t-collapse-panel>
-					</t-collapse>
-					<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
-				</div>
+						</template>
+						<div v-if="isExpandedProduct(product, productIndex)" class="selection">
+							<div v-if="specList.length" class="specs">
+								<div v-for="spec in specList" :key="spec.id || spec.name" class="spec">
+									<strong v-text="spec.name" />
+									<div class="values">
+										<t-button
+											v-for="value in enabledValues(spec)"
+											:key="value.id"
+											size="extra-small"
+											:theme="selectedSpecValueMap[spec.id || ''] === value.id ? 'primary' : 'default'"
+											:variant="selectedSpecValueMap[spec.id || ''] === value.id ? 'base' : 'outline'"
+											:content="value.name"
+											@click="selectSpecValue(spec.id || '', value.id || '')"
+										/>
+									</div>
+								</div>
+							</div>
+							<div v-if="matchedSku" class="sku-card">
+								<div class="units">
+									<t-button
+										v-for="unit in saleableUnits(matchedSku)"
+										:key="unit.id"
+										size="small"
+										:theme="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'primary' : 'default'"
+										:variant="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'base' : 'outline'"
+										@click="selectUnit(matchedSku, unit.id || '')"
+									>
+										<span v-text="unit.name" />
+										<span v-if="unit.salePrice !== null && unit.salePrice !== undefined" class="price" v-text="`￥${formatProductAmount(unit.salePrice)}`" />
+									</t-button>
+								</div>
+							</div>
+							<div v-else class="empty" v-text="specList.length ? '请选择每个规格项的规格值' : '暂无可售 SKU'" />
+						</div>
+					</t-collapse-panel>
+				</t-collapse>
+				<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
 			</div>
 		</div>
 	</bottom-popup>
@@ -253,128 +244,90 @@ function selectUnit(sku: ProductSku, skuUnitId: string): void {
 
 .popup {
 	height: 100%;
-	min-height: 0;
 	padding: 1rem 0;
-	overflow: hidden;
 	display: flex;
+	overflow: hidden;
+	min-height: 0;
 	flex-direction: column;
 
-	.selection {
-		overflow-y: auto;
+	.search-wrap {
+		z-index: 1;
+		padding: 0 0 .75rem;
 
-		.specs {
-			gap: 1rem;
-			display: flex;
-			flex-direction: column;
+		.search {
+			--td-input-vertical-padding: 8px 14px;
 
-			.spec {
-				gap: .5rem;
-				display: flex;
-				flex-direction: column;
-
-				.values,
-				.units {
-					gap: .5rem;
-					display: flex;
-					flex-wrap: wrap;
-				}
-			}
-		}
-
-		.sku-card {
-			padding: .75rem;
-			background: var(--td-bg-color-secondarycontainer);
+			margin: 0 1rem;
+			border: 1px solid var(--td-component-border);
 			border-radius: .875rem;
-
-			.sku-title {
-				gap: .5rem;
-				display: flex;
-				align-items: baseline;
-				justify-content: space-between;
-
-				span {
-					color: var(--td-text-color-secondary);
-					font-size: .75rem;
-				}
-			}
-
-			.units {
-				gap: .5rem;
-				display: flex;
-				margin-top: .75rem;
-				flex-wrap: wrap;
-
-				.price {
-					margin-left: .25rem;
-					font-size: .75rem;
-				}
-			}
 		}
 	}
 
-	.products {
-		height: 100%;
+	.items {
+		flex: 1;
 		min-height: 0;
-		display: flex;
-		flex-direction: column;
+		overflow-y: auto;
+		padding-bottom: env(safe-area-inset-bottom, 0);
 
-		.search-wrap {
-			z-index: 1;
-			padding: 0 0 .75rem;
+		.collapse {
+			margin: 0;
 
-			.search {
-				--td-input-vertical-padding: 8px 14px;
+			.item {
+				--td-collapse-content-padding: .25rem 1rem .75rem 1rem;
 
-				margin: 0 1rem;
-				border: 1px solid var(--td-component-border);
-				border-radius: .875rem;
-			}
-		}
-
-		.items {
-			flex: 1;
-			min-height: 0;
-			overflow-y: auto;
-			padding-bottom: env(safe-area-inset-bottom, 0);
-
-			.collapse {
-				margin: 0;
-			}
-
-			.product-header {
-				gap: .75rem;
-				display: flex;
-				min-width: 0;
-				align-items: center;
-
-				.avatar {
-					width: 3.5rem;
-					height: 3.5rem;
-					flex: 0 0 auto;
-				}
-
-				.product-info {
-					gap: .25rem;
+				.header {
+					gap: .75rem;
 					display: flex;
 					min-width: 0;
-					flex: 1;
-					flex-direction: column;
+					align-items: center;
 
-					strong,
-					span {
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-
-					span {
-						color: var(--td-text-color-secondary);
-						font-size: .75rem;
+					.avatar {
+						flex: 0 0 auto;
+						width: 2.5rem;
+						height: 2.5rem;
+						border-radius: .75rem !important;
 					}
 				}
 
-				&:active {
-					opacity: .7;
+				.selection {
+					overflow-y: auto;
+
+					.specs {
+						gap: .5rem;
+						display: flex;
+						flex-direction: column;
+
+						.spec {
+							gap: .5rem;
+							display: flex;
+							flex-direction: column;
+
+							.values,
+							.units {
+								gap: .5rem;
+								display: flex;
+								flex-wrap: wrap;
+							}
+						}
+					}
+
+					.sku-card {
+						padding: .5rem;
+						border: 1px dashed var(--td-brand-color);
+						margin-top: .5rem;
+						border-radius: .875rem;
+
+						.units {
+							gap: .5rem;
+							display: flex;
+							flex-wrap: wrap;
+
+							.price {
+								margin-left: .25rem;
+								font-size: .75rem;
+							}
+						}
+					}
 				}
 			}
 		}

src/components/RoutePage.vue

@@ -1,28 +0,0 @@
-<template>
-	<div class="page">
-		<component :is="component" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { Component } from "vue";
-
-defineOptions({
-	name: "RoutePage"
-});
-
-defineProps<{
-	component: Component;
-	background: string;
-}>();
-</script>
-
-<style scoped lang="less">
-.page {
-	width: 100%;
-	height: 100%;
-	overflow: auto;
-	overflow-x: clip;
-	background: v-bind(background);
-}
-</style>

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,30 +32,34 @@
 						size="small"
 						:loading="isCreating"
 						:disabled="isCreating"
+						content="新增"
 						@click="createTag"
-					>新增</t-button>
+					/>
 				</template>
 			</div>
-			<div class="list">
-				<t-tag
-					v-for="(item, index) in visibleTagList"
-					:key="item.id"
-					class="item"
-					:theme="isSelected(item) ? 'primary' : 'default'"
-					size="large"
-					:variant="isSelected(item) ? 'dark' : 'light-outline'"
-					v-entrance-transition="index * 10"
-					@click="toggleTag(item)"
-				>
-					<span v-text="getTagName(item)" />
-				</t-tag>
-				<div v-if="!visibleTagList.length" class="empty" v-text="emptyText" />
+			<div class="list-wrap">
+				<div class="list">
+					<t-tag
+						v-for="(item, index) in visibleTagList"
+						:key="item.id"
+						class="item"
+						:theme="isSelected(item) ? 'primary' : 'default'"
+						size="large"
+						:variant="isSelected(item) ? 'dark' : 'light-outline'"
+						v-entrance-transition="index * 10"
+						@click="toggleTag(item)"
+					>
+						<span v-text="getTagName(item)" />
+					</t-tag>
+					<div v-if="!visibleTagList.length" class="center-tips" v-text="emptyText" />
+				</div>
 			</div>
 		</div>
-	</t-popup>
+	</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"
@@ -52,6 +53,7 @@ import type { MediaSelectorAddAction, MediaSelectorViewerItem } from "./types";
 import { getMediaPreviewURL, normalizePhotoItem } from "./utils";
 import type { PhotoItem } from "@/types/Photo.ts";
 import { Message } from "@/utils/message.ts";
+import { saveCapturedFilesFromInput } from "@/utils/twaBridge";
 
 defineOptions({
 	inheritAttrs: false
@@ -74,6 +76,7 @@ interface Props {
 	showTypeLabel?: boolean;
 	submit?: (photoItems: PhotoItem[]) => Promise<void>;
 	title?: string;
+	viewerZIndex?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -86,7 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
 	required: false,
 	showAdd: true,
 	showRemove: true,
-	showTypeLabel: true,
+	showTypeLabel: false,
 	showViewerActions: true
 });
 
@@ -142,6 +145,7 @@ async function handleFileChange(event: Event): Promise<void> {
 	if (!fileList.length || !props.upload) {
 		return;
 	}
+	saveCapturedFilesFromInput(input, fileList);
 
 	isUploading.value = true;
 	try {

src/components/mediaSelector/MediaSelectorItem.vue

@@ -16,7 +16,7 @@
 					playsinline
 					preload="metadata"
 				/>
-				<span class="video-play" aria-hidden="true">▶</span>
+				<t-icon class="play" name="play-circle-filled" size="2rem" />
 			</div>
 			<t-image
 				v-else
@@ -101,18 +101,10 @@ const emit = defineEmits<{
 				object-fit: cover;
 			}
 
-			.video-play {
+			.play {
 				inset: 50% auto auto 50%;
-				width: 2rem;
-				height: 2rem;
-				color: #fff;
+				opacity: .7;
 				position: absolute;
-				display: flex;
-				font-size: 1.125rem;
-				align-items: center;
-				justify-content: center;
-				background: rgba(15, 23, 42, .68);
-				border-radius: 50%;
 				transform: translate(-50%, -50%);
 			}
 		}

src/components/mediaSelector/MediaSelectorViewer.vue

@@ -1,7 +1,9 @@
 <template>
+<teleport to="body">
 	<t-image-viewer
 		v-model:visible="viewerVisible"
 		:images="images"
+		:style="{ zIndex: props.viewerZIndex }"
 		show-index
 		@close="handleClose"
 		@index-change="handleIndexChange"
@@ -88,6 +90,7 @@
 			</div>
 		</template>
 	</t-image-viewer>
+</teleport>
 </template>
 
 <script setup lang="ts">
@@ -101,6 +104,7 @@ interface Props {
 	showActions: boolean;
 	submitting: boolean;
 	visible: boolean;
+	viewerZIndex?: number;
 }
 
 const props = defineProps<Props>();
@@ -201,12 +205,10 @@ function removeCurrentPhoto(): void {
 
 		.type {
 			display: flex;
-			justify-content: start;
+			align-items: start;
+			margin-left: 1.5rem;
 			flex-direction: column;
-
-			.button {
-				text-indent: 1.5em;
-			}
+			justify-content: start;
 		}
 
 		.button {

src/directives/entranceTransition.ts

@@ -1,105 +0,0 @@
-import type { ObjectDirective } from "vue";
-
-const ENTRANCE_DURATION = 400;
-const ACTIVE_CLASS = "entrance-fade-up-enter-active";
-const FROM_CLASS = "entrance-fade-up-enter-from";
-const TO_CLASS = "entrance-fade-up-enter-to";
-const STATE_KEY = Symbol("entrance-transition-state");
-
-type EntranceTransitionValue = number | string | { delay?: number | string } | undefined;
-
-interface EntranceTransitionState {
-	frameId?: number;
-	timerId?: number;
-	delay: number;
-}
-
-type EntranceTransitionElement = HTMLElement & {
-	[STATE_KEY]?: EntranceTransitionState;
-};
-
-function getDelay(value: EntranceTransitionValue): number {
-	const rawDelay = typeof value === "object" && value !== null ? value.delay : value;
-	const delay = Number(rawDelay ?? 0);
-	return Number.isFinite(delay) ? Math.max(0, delay) : 0;
-}
-
-function setDelay(element: EntranceTransitionElement, delay: number): void {
-	element.style.setProperty("--entrance-delay", `${delay}ms`);
-}
-
-function cleanup(element: EntranceTransitionElement): void {
-	const state = element[STATE_KEY];
-	if (!state) {
-		return;
-	}
-
-	if (state.frameId !== undefined) {
-		window.cancelAnimationFrame(state.frameId);
-	}
-	if (state.timerId !== undefined) {
-		window.clearTimeout(state.timerId);
-	}
-
-	element.classList.remove(ACTIVE_CLASS, FROM_CLASS, TO_CLASS);
-	element.style.removeProperty("--entrance-delay");
-	delete element[STATE_KEY];
-}
-
-const vEntranceTransition: ObjectDirective<HTMLElement, EntranceTransitionValue> = {
-	beforeMount(element, binding) {
-		if (!(element instanceof HTMLElement)) {
-			return;
-		}
-
-		const target = element as EntranceTransitionElement;
-		const delay = getDelay(binding.value);
-		target[STATE_KEY] = { delay };
-		setDelay(target, delay);
-		target.classList.add(ACTIVE_CLASS, FROM_CLASS);
-	},
-
-	mounted(element) {
-		if (!(element instanceof HTMLElement)) {
-			return;
-		}
-
-		const target = element as EntranceTransitionElement;
-		const state = target[STATE_KEY];
-		if (!state) {
-			return;
-		}
-
-		state.frameId = window.requestAnimationFrame(() => {
-			state.frameId = window.requestAnimationFrame(() => {
-				state.frameId = undefined;
-				target.classList.remove(FROM_CLASS);
-				target.classList.add(TO_CLASS);
-				state.timerId = window.setTimeout(() => cleanup(target), ENTRANCE_DURATION + state.delay);
-			});
-		});
-	},
-
-	updated(element, binding) {
-		if (!(element instanceof HTMLElement) || binding.value === binding.oldValue) {
-			return;
-		}
-
-		const target = element as EntranceTransitionElement;
-		const state = target[STATE_KEY];
-		if (!state) {
-			return;
-		}
-
-		state.delay = getDelay(binding.value);
-		setDelay(target, state.delay);
-	},
-
-	beforeUnmount(element) {
-		if (element instanceof HTMLElement) {
-			cleanup(element as EntranceTransitionElement);
-		}
-	}
-};
-
-export default vEntranceTransition;

src/layout/MainLayout.vue

@@ -2,7 +2,12 @@
 	<div class="main-layout">
 		<app-nav-bar @height-change="onChangeNavBarHeight" />
 		<div class="router-view">
-			<page-transition />
+			<page-transition
+				:keep-alive="shouldKeepAlive"
+				:page-background="globalUIStore.bodyBackground"
+				page-class="page"
+				:respect-reduced-motion="false"
+			/>
 		</div>
 		<t-tab-bar
 			v-model="tabVal"
@@ -33,16 +38,25 @@
 
 <script setup lang="ts">
 import AppNavBar from "@/components/navbar/index.vue";
-import PageTransition from "@/components/PageTransition.vue";
+import { useGlobalUIStore } from "@/store/globalUI";
 import { useTabBarStore } from "@/store/tabBarStore";
 import { permissionCodes } from "@/utils/permission";
+import { PageTransition } from "timi-tdesign-mobile";
 import { useUserStore } from "timi-web-api/store";
+import type { RouteLocationNormalizedLoaded } from "vue-router";
 
 const route = useRoute();
 const router = useRouter();
+const globalUIStore = useGlobalUIStore();
 const tabBarStore = useTabBarStore();
 const userStore = useUserStore();
 
+const cachedRouteNames = new Set(["SalesOrderList", "ProductList", "ProductStockList"]);
+
+function shouldKeepAlive(sourceRoute: RouteLocationNormalizedLoaded): boolean {
+	return cachedRouteNames.has(String(sourceRoute.name));
+}
+
 // ---------- 导航边距 ----------
 
 const navBarHeight = ref("0px");
@@ -183,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/main.ts

@@ -9,7 +9,8 @@ import Network from "timi-web-api/utils/Network";
 import { VCan, VRole } from "timi-web-api/utils/directives/Access";
 import type { ApiResponse } from "timi-web-api";
 import { Message } from "@/utils/message";
-import vEntranceTransition from "@/directives/entranceTransition";
+import { initializeTwaBridge } from "@/utils/twaBridge";
+import { VEntranceTransition } from "timi-tdesign-mobile";
 import timiWebStyle from "../../timi-web/src/assets/style/timi-web.less?inline";
 import tdesignCustomStyle from "../../timi-tdesign-mobile/src/assets/style/tdesign-custom.less?inline";
 
@@ -24,6 +25,8 @@ export const pinia = createPinia();
 const apiBaseURL = import.meta.env.VITE_API_BASE_URL as string | undefined;
 const libraryOverrideStyleId = "library-override-style";
 
+initializeTwaBridge();
+
 function mountLibraryOverrideStyle(): void {
 	const oldStyle = document.getElementById(libraryOverrideStyleId);
 	oldStyle?.remove();
@@ -64,7 +67,7 @@ async function bootstrap(): Promise<void> {
 	app.use(pinia);
 	app.directive("can", VCan);
 	app.directive("role", VRole);
-	app.directive("entrance-transition", vEntranceTransition);
+	app.directive("entrance-transition", VEntranceTransition);
 
 	const userStore = useUserStore(pinia);
 	const currentStoreStore = useCurrentStoreStore(pinia);

src/pages/ai/AiChatPage.vue

@@ -1,3 +1,14 @@
+<template>
+	<div v-if="canUseAi" class="ai-chat-page">
+		<ai-chat-panel
+			:store-name="currentStoreStore.currentStoreName"
+			:session-key="sessionKey"
+			:store-id="aiStoreId"
+			@new-conversation="startNewConversation"
+		/>
+	</div>
+	<t-empty v-else description="当前账号无权使用门店智能助手" />
+</template>
 <script setup lang="ts">
 import { useUserStore } from "timi-web-api/store";
 import AiChatPanel from "@/pages/ai/components/AiChatPanel.vue";
@@ -10,22 +21,16 @@ defineOptions({
 
 const userStore = useUserStore();
 const currentStoreStore = useCurrentStoreStore();
-const sessionKey = computed(() => `${userStore.loginUser.user?.id || userStore.loginUser.id || ""}:${currentStoreStore.currentStoreId}`);
+const conversationResetToken = ref(0);
+const sessionKey = computed(() => `${userStore.loginUser.user?.id || userStore.loginUser.id || ""}:${currentStoreStore.currentStoreId}:${conversationResetToken.value}`);
 const canUseAi = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager));
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
 const aiStoreId = computed(() => canUseAi.value && isGlobalManager.value ? currentStoreStore.currentStoreId : undefined);
-</script>
 
-<template>
-	<div v-if="canUseAi" class="ai-chat-page">
-		<ai-chat-panel
-			:store-name="currentStoreStore.currentStoreName"
-			:session-key="sessionKey"
-			:store-id="aiStoreId"
-		/>
-	</div>
-	<t-empty v-else description="当前账号无权使用门店智能助手" />
-</template>
+function startNewConversation(): void {
+	conversationResetToken.value += 1;
+}
+</script>
 
 <style scoped lang="less">
 .ai-chat-page {

src/pages/ai/components/AiChatPanel.vue

@@ -15,6 +15,7 @@
 		@send="submitMessage"
 		@stop="stopGeneration"
 		@retry="retryLastMessage"
+		@new-conversation="emit('new-conversation')"
 	>
 		<template #welcome>
 			<div class="welcome">
@@ -25,10 +26,9 @@
 				<p v-entrance-transition="140">我会根据当前门店的实时业务数据回答经营问题。</p>
 				<div class="quick-list" v-entrance-transition="210">
 					<t-button
+						class="quick-question bg-white"
 						v-for="question in aiQuickQuestionList"
 						:key="question"
-						class="quick-question"
-						variant="outline"
 						size="small"
 						@click="submitMessage(question)"
 					>
@@ -104,6 +104,9 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const emit = defineEmits<{
+	"new-conversation": [];
+}>();
 const userStore = useUserStore();
 const navBarStore = useNavBarStore();
 type MessageListExpose = {
@@ -339,9 +342,7 @@ onUnmounted(() => navBarStore.clearRight());
 
 <style scoped lang="less">
 .shared-panel {
-	:deep(.ai-chat-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

@@ -1,7 +1,13 @@
 <template>
-	<t-popup v-model="popupVisible" placement="right" destroy-on-close>
+	<t-popup
+		v-model="popupVisible"
+		placement="right"
+		destroy-on-close
+		:z-index="popupZIndex"
+		: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"
@@ -59,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"
@@ -98,6 +104,8 @@ const emit = defineEmits<{
 	delete: [conversationId: string];
 }>();
 
+const popupZIndex = 4000;
+const deleteDialogZIndex = 12000;
 const pageSize = 20;
 const popupVisible = computed({
 	get() {
@@ -203,6 +211,8 @@ async function confirmDelete(conversation: GaoAiConversation): Promise<void> {
 		content: "确定删除这段历史会话吗？删除后无法恢复。",
 		cancelBtn: "取消",
 		confirmBtn: "删除",
+		zIndex: deleteDialogZIndex,
+		overlayProps: { zIndex: deleteDialogZIndex },
 		onCancel() {
 			dialog.destroy();
 		},
@@ -272,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;
 
@@ -288,6 +297,7 @@ watch(() => props.sessionKey, async () => {
 	}
 
 	.items {
+		flex: 1;
 
 		.item {
 
@@ -330,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/CustomerDetail.vue

@@ -42,6 +42,7 @@
 				:show-add="false"
 				:show-remove="false"
 				:submit="submitPhotoItems"
+				show-type-label
 				title="照片列表"
 			/>
 		</card-container>

src/pages/customer/CustomerEdit.vue

@@ -80,6 +80,7 @@
 						:show-viewer-actions="!isCustomerBound"
 						:add-actions="photoAddActions"
 						:loading="isPhotoUploading"
+						show-type-label
 						@add="openPhotoPicker('OTHER')"
 						@action="handlePhotoAction"
 						@capture-photo="capturePhoto"
@@ -244,6 +245,7 @@ import { getAttachmentReadURL } from "@/utils/attachment";
 import { normalizeBodyAreaValue } from "@/utils/customer";
 import { corePermissionCodes, gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { compressUploadImage } from "@/utils/imageCompression";
+import { saveCapturedFilesFromInput } from "@/utils/twaBridge";
 
 defineOptions({
 	name: "CustomerEdit"
@@ -638,6 +640,7 @@ async function handlePhotoSelected(event: Event): Promise<void> {
 	if (!file) {
 		return;
 	}
+	saveCapturedFilesFromInput(input, [file]);
 	isPhotoUploading.value = true;
 	try {
 		const compressedFile = await compressUploadImage(file);

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"
@@ -175,7 +175,7 @@ defineOptions({
 	name: "CustomerList"
 });
 
-type DateFilterType = "today" | "yesterday" | "lastWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 
 const router = useRouter();
 const userStore = useUserStore();
@@ -201,7 +201,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "全部", value: "all" },
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "上个月", value: "lastMonth" },
 	{ label: "自定义范围", value: "custom" }
@@ -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"
@@ -153,7 +153,7 @@ import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/util
 import { permissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message.ts";
 
-type DateFilterType = "today" | "yesterday" | "lastWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 type VerificationFilter = "ALL" | VerificationStatus;
 
 defineOptions({
@@ -168,7 +168,7 @@ const userStore = useUserStore();
 const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "上个月", value: "lastMonth" },
 	{ label: "全部", value: "all" },
@@ -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/event/EventRecordRank.vue

@@ -138,7 +138,7 @@ import { formatEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message.ts";
 
-type DateFilterType = "all" | "today" | "yesterday" | "lastWeek" | "thisMonth" | "custom";
+type DateFilterType = "all" | "today" | "yesterday" | "thisWeek" | "thisMonth" | "custom";
 
 defineOptions({
 	name: "EventRecordRank"
@@ -157,7 +157,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "全部时间", value: "all" },
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "自定义范围", value: "custom" }
 ];

src/pages/event/component/useEventRecordPhoto.ts

@@ -3,6 +3,7 @@ import { AttachmentAPI, type Attachment } from "timi-web-api";
 import type { PhotoItem } from "@/types/Photo";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { compressUploadImageList } from "@/utils/imageCompression";
+import { saveCapturedFilesFromInput } from "@/utils/twaBridge";
 
 export function useEventRecordPhoto() {
 	const recordPhotoInputRef = ref<HTMLInputElement>();
@@ -38,6 +39,7 @@ export function useEventRecordPhoto() {
 		if (!fileList.length) {
 			return;
 		}
+		saveCapturedFilesFromInput(input, fileList);
 		isPhotoUploading.value = true;
 		try {
 			const compressedFileList = await compressUploadImageList(fileList);

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,114 +41,98 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
-			class="list-wrap"
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
 			@refresh="refresh"
 			@scrolltolower="fetch"
 		>
-			<t-cell-group class="summary" theme="card">
-				<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
-				<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
-				<t-cell v-if="selectedCustomer || selectedResponsibleId" title="筛选条件">
-					<template #note>
-						<div class="selected-filter">
-							<t-tag
-								v-if="selectedCustomer"
-								theme="primary"
-								variant="light-outline"
-								:content="`客户：${selectedCustomer.name || selectedCustomer.code || '未命名'}`"
-							/>
-							<t-tag
-								v-if="selectedResponsibleId"
-								theme="primary"
-								variant="light-outline"
-								:content="`负责人：${selectedResponsibleName}`"
-							/>
-							<t-button size="extra-small" variant="text" @click="clearFilters">清空筛选</t-button>
-						</div>
-					</template>
-				</t-cell>
-			</t-cell-group>
-			<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
-				<t-swipe-cell
-					v-for="(item, index) in pageResult.list"
-					:key="item.id || index"
-					class="item"
-				>
-					<t-cell
-						v-entrance-transition="index * 30"
-						class="cell"
-						arrow
-						@click="toDetail(item)"
+			<div class="list-wrap">
+				<customer-profile-card class="customer" :customer="selectedCustomer" />
+				<t-cell-group class="summary" theme="card">
+					<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
+					<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
+					<t-cell v-if="selectedResponsibleId" title="负责人" :note="selectedResponsibleName" />
+				</t-cell-group>
+				<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
+					<t-swipe-cell
+						v-for="(item, index) in pageResult.list"
+						:key="item.id || index"
+						class="item"
 					>
-						<template #leftIcon>
-							<t-image
-								v-if="getCustomerPhotoURL(item.customer, 64)"
-								:src="getCustomerPhotoURL(item.customer, 64)"
-								:alt="getCustomerName(item)"
-								fit="cover"
-								class="avatar"
-							/>
-							<div v-else class="avatar fallback" v-text="getCustomerName(item).slice(0, 1)" />
-						</template>
-						<template #title>
-							<div class="title">
-								<div class="name-channel">
-									<span class="text-bold" v-text="getCustomerName(item)" />
-									<t-tag
-										v-if="item.notifyChannelList?.includes('INTERNAL')"
-										size="small"
-										theme="primary"
-										variant="outline"
-										content="站内信"
-									/>
-									<t-tag
-										v-if="item.notifyChannelList?.includes('SMS')"
-										size="small"
-										theme="warning"
-										variant="outline"
-										content="短信"
-									/>
+						<t-cell
+							v-entrance-transition="index * 30"
+							class="cell"
+							arrow
+							@click="toDetail(item)"
+						>
+							<template #leftIcon>
+								<t-image
+									v-if="getCustomerPhotoURL(item.customer, 64)"
+									:src="getCustomerPhotoURL(item.customer, 64)"
+									:alt="getCustomerName(item)"
+									fit="cover"
+									class="avatar"
+								/>
+								<div v-else class="avatar fallback" v-text="getCustomerName(item).slice(0, 1)" />
+							</template>
+							<template #title>
+								<div class="title">
+									<div class="name-channel">
+										<span class="text-bold" v-text="getCustomerName(item)" />
+										<t-tag
+											v-if="item.notifyChannelList?.includes('INTERNAL')"
+											size="small"
+											theme="primary"
+											variant="outline"
+											content="站内信"
+										/>
+										<t-tag
+											v-if="item.notifyChannelList?.includes('SMS')"
+											size="small"
+											theme="warning"
+											variant="outline"
+											content="短信"
+										/>
+									</div>
+									<t-tag size="small" :theme="getStatusTheme(item.status)" :content="getStatusText(item.status)" />
 								</div>
-								<t-tag size="small" :theme="getStatusTheme(item.status)" :content="getStatusText(item.status)" />
-							</div>
-						</template>
-						<template #description>
-							<div class="description">
-								<div class="content clip-text" v-text="getContentSummary(item.content)" />
-								<div class="time-responsible">
+							</template>
+							<template #description>
+								<div class="description">
+									<div class="content clip-text" v-text="getContentSummary(item.content)" />
+									<div class="time-responsible">
 									<span
 										class="remind-time"
 										:class="getReminderTimeClass(item)"
 										v-text="getReminderTimeText(item.remindAt)"
 									/>
-									<span v-text="`负责人：${getResponsibleName(item)}`" />
+										<span v-text="`负责人：${getResponsibleName(item)}`" />
+									</div>
 								</div>
+							</template>
+						</t-cell>
+						<template #right>
+							<div class="swipe-actions">
+								<t-button
+									v-if="canComplete && item.status === 'PENDING'"
+									class="complete swipe-cell-button"
+									variant="text"
+									:loading="operatingId === item.id && operatingType === 'complete'"
+									@click.stop="confirmComplete(item)"
+								>完成</t-button>
+								<t-button
+									v-if="canDelete"
+									class="delete swipe-cell-button"
+									variant="text"
+									:loading="operatingId === item.id && operatingType === 'delete'"
+									@click.stop="confirmDelete(item)"
+								>删除</t-button>
 							</div>
 						</template>
-					</t-cell>
-					<template #right>
-						<div class="swipe-actions">
-							<t-button
-								v-if="canComplete && item.status === 'PENDING'"
-								class="complete swipe-cell-button"
-								variant="text"
-								:loading="operatingId === item.id && operatingType === 'complete'"
-								@click.stop="confirmComplete(item)"
-							>完成</t-button>
-							<t-button
-								v-if="canDelete"
-								class="delete swipe-cell-button"
-								variant="text"
-								:loading="operatingId === item.id && operatingType === 'delete'"
-								@click.stop="confirmDelete(item)"
-							>删除</t-button>
-						</div>
-					</template>
-				</t-swipe-cell>
-			</t-cell-group>
-			<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
+					</t-swipe-cell>
+				</t-cell-group>
+				<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
+			</div>
 		</t-pull-down-refresh>
 		<customer-selector
 			v-model="selectedCustomerId"
@@ -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">
-				<t-button
-					theme="primary"
-					variant="outline"
-					size="extra-small"
-					:content="deliveredAtText || '此刻'"
-					@click="pickerVisible = true"
-				/>
+				<div class="time-actions">
+					<t-button
+						theme="primary"
+						variant="outline"
+						size="extra-small"
+						:content="deliveredAtText || '此刻'"
+						@click="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";
@@ -145,6 +164,7 @@ import {
 	toPackageBaseQuantity
 } from "@/utils/package";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import type { ProductStockPreviewItem } from "@/utils/productStock";
@@ -372,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();
@@ -539,6 +569,8 @@ async function save(): Promise<void> {
 		const result = directVerify.value
 			? await FulfillmentAPI.createAndVerify(request)
 			: await FulfillmentAPI.create(request);
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, request.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		Message.success(directVerify.value ? "履约单创建并核销成功" : "履约单已提交");
 		await router.replace(`/management/order-fulfillments/${result.id}`);
 	} catch (error) {
@@ -660,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/OrderFulfillmentDetail.vue

@@ -14,24 +14,22 @@
 				<t-cell title="处理人" :note="fulfillment.verifier?.name || fulfillment.verifierUserId || '未处理'" />
 				<t-cell v-if="fulfillment.reason" title="原因" :note="fulfillment.reason" />
 				<t-cell v-if="fulfillment.remark" title="备注" :note="fulfillment.remark" />
+				<div class="photo-wrap bg-white">
+					<media-selector
+						:model-value="fulfillmentPhotoURLList"
+						:photo-items="fulfillmentPhotoItems"
+						:show-add="false"
+						:show-remove="false"
+						:show-viewer-actions="false"
+						title="履约照片"
+					/>
+				</div>
 			</t-cell-group>
-			<div class="photos" v-entrance-transition="35">
-				<media-selector
-					:model-value="fulfillmentPhotoURLList"
-					:photo-items="fulfillmentPhotoItems"
-					:show-add="false"
-					:show-remove="false"
-					:show-viewer-actions="false"
-					title="履约照片"
-				/>
-			</div>
 			<t-cell-group class="items" title="履约明细" theme="card" v-entrance-transition="70">
 				<t-cell
 					class="item"
 					v-for="item in fulfillment.itemList || []"
 					:key="item.id"
-					:title="item.productNameSnapshot || '未命名产品'"
-					:note="getFulfillmentQuantityText(item)"
 				>
 					<template #leftIcon>
 						<t-image
@@ -47,17 +45,21 @@
 							v-text="(item.productNameSnapshot || '产').slice(0, 1)"
 						/>
 					</template>
-					<template #description>
-						<div class="item-description">
+					<template #title>
+						<div class="title">
+							<span class="clip-text" v-text="item.productNameSnapshot || '未命名产品'" />
 							<t-tag v-if="isGiftedFulfillmentItem(item)" size="small" theme="success" content="赠送" />
 							<product-sku-tags
+								class="tags"
 								:product-name="item.productNameSnapshot"
 								:snapshot="item.skuSpecSnapshot"
 								:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
-								:unit="item.unitSnapshot"
 							/>
 						</div>
 					</template>
+					<template #note>
+						<span class="keep-text" v-text="getFulfillmentQuantityText(item)" />
+					</template>
 				</t-cell>
 				<t-cell v-if="!fulfillment.itemList?.length" title="暂无履约明细" />
 			</t-cell-group>
@@ -136,6 +138,7 @@ import type { PhotoItem } from "@/types/Photo";
 import { addPackageQuantity, getPackageQuantityText } from "@/utils/package";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { getProductPhotoURL } from "@/utils/product";
 import { getFulfillmentStatusText, getSalesOrderItemTypeText, getStatusTheme } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
@@ -300,6 +303,8 @@ async function prepareStock(): Promise<void> {
 	operating.value = true;
 	try {
 		fulfillment.value = await FulfillmentAPI.prepareStock({ fulfillmentId: fulfillment.value.id, reason: "库存已备齐" });
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, fulfillment.value.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		Message.success("库存准备已提交");
 		await loadData();
 	} catch (error) { Message.error(getErrorMessage(error, "库存准备失败")); }
@@ -311,6 +316,8 @@ async function verify(): Promise<void> {
 	operating.value = true;
 	try {
 		fulfillment.value = await FulfillmentAPI.verify({ fulfillmentId: fulfillment.value.id, reason: "" });
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, fulfillment.value.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		Message.success("履约已核销");
 		await loadData();
 	} catch (error) { Message.error(getErrorMessage(error, "履约核销失败")); }
@@ -325,6 +332,8 @@ async function submitReason(): Promise<void> {
 		fulfillment.value = reasonAction.value === "reject"
 			? await FulfillmentAPI.reject(payload)
 			: await FulfillmentAPI.cancel(payload);
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, fulfillment.value.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		reasonVisible.value = false;
 		Message.success(reasonAction.value === "reject" ? "履约已拒绝" : "履约已撤销");
 		await loadData();
@@ -342,6 +351,59 @@ onUnmounted(() => navBarStore.clearRight());
 	display: flex;
 	flex-direction: column;
 
+	.photo-wrap {
+		padding: .75rem 1rem;
+	}
+
+	.items {
+
+		.item {
+			padding: 10px;
+
+			:deep(.t-cell__title) {
+				display: flex;
+				align-items: center;
+			}
+
+			.avatar {
+				width: 2rem;
+				height: 2rem;
+				border-radius: .5rem !important;
+			}
+
+			.title {
+				gap: .375rem;
+				display: flex;
+				min-width: 0;
+				flex-wrap: nowrap;
+				align-items: center;
+
+				.tags {
+					flex-wrap: nowrap;
+				}
+			}
+		}
+	}
+
+	.stock-preview {
+		margin: 0 1rem;
+		padding: 1rem .5rem .75rem;
+		background: var(--td-bg-color-container, #fff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.title {
+			padding: 0 .5rem .5rem;
+			font-size: .875rem;
+			font-weight: 600;
+		}
+
+		:deep(.t-loading) {
+			justify-content: center;
+			padding: 1rem 0;
+		}
+	}
+
 	.actions {
 		--td-button-border-radius: 1rem;
 
@@ -364,52 +426,6 @@ onUnmounted(() => navBarStore.clearRight());
 
 		.t-button { flex: 1 1 auto; }
 	}
-
-	.photos {
-		margin: 0 1rem;
-		padding: 1rem;
-		background: var(--td-bg-color-container, #fff);
-		box-shadow: var(--td-shadow-1);
-		border-radius: 1.25rem;
-	}
-
-	.stock-preview {
-		margin: 0 1rem;
-		padding: 1rem .5rem .75rem;
-		background: var(--td-bg-color-container, #fff);
-		box-shadow: var(--td-shadow-1);
-		border-radius: 1.25rem;
-
-		.title {
-			padding: 0 .5rem .5rem;
-			font-size: .875rem;
-			font-weight: 600;
-		}
-
-		:deep(.t-loading) {
-			justify-content: center;
-			padding: 1rem 0;
-		}
-	}
-
-	.items {
-
-		.item {
-			padding: 10px;
-
-			.item-description {
-				gap: .375rem;
-				display: flex;
-				flex-wrap: wrap;
-				align-items: center;
-			}
-
-			.avatar {
-				width: 3rem;
-				height: 3rem;
-			}
-		}
-	}
 }
 
 </style>

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,16 +58,32 @@
 			@scrolltolower="loadMore"
 		>
 			<div class="list-wrap">
-				<t-cell-group v-if="salesOrder" class="order-info" theme="card">
-					<t-cell title="订单号" :note="salesOrder.orderNo || salesOrder.id || '未知订单'" />
-					<t-cell title="订单类型" :note="getSalesOrderTypeText(salesOrder.orderType)" />
-					<t-cell title="订单状态">
+				<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="订单状态">
+							<template #note>
+								<t-tag
+									:content="getSalesOrderStatusText(salesOrder.status)"
+									:theme="getStatusTheme(salesOrder.status)"
+									variant="light-outline"
+								/>
+							</template>
+						</t-cell>
+					</template>
+					<t-cell v-if="selectedSkuOptionList.length" class="sku-filter-cell" title="已筛选 SKU">
 						<template #note>
-							<t-tag
-								:content="getSalesOrderStatusText(salesOrder.status)"
-								:theme="getStatusTheme(salesOrder.status)"
-								variant="light-outline"
-							/>
+							<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>
@@ -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));
@@ -171,11 +200,12 @@ const actions = computed<NavBarAction[]>(() => [
 		action: toPackageOrderList
 	}
 ]);
-type DateFilterType = "today" | "yesterday" | "lastWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+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" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "上个月", value: "lastMonth" },
 	{ label: "全部", value: "all" },
@@ -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/OrderFulfillmentListCell.vue

@@ -107,7 +107,7 @@ function getUserName(user: OrderFulfillment["operator"], userId: string | undefi
 function getProductText(item: OrderFulfillmentItem): string {
 	const quantity = getPackageQuantityText(item.quantity);
 	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? `（${skuText}）` : " "}${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
 }
 </script>
 

src/pages/fulfillment/components/OrderFulfillmentRevoke.vue

@@ -66,6 +66,7 @@ import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import type { OrderFulfillment } from "@/types/Fulfillment";
 import type { PhotoItem } from "@/types/Photo";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { createPackageRequestNo } from "@/utils/package";
 import { Message } from "@/utils/message";
 import { uploadPhotoList } from "@/utils/photo";
@@ -157,6 +158,8 @@ async function submit(): Promise<void> {
 			attachmentList
 		});
 		visible.value = false;
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, props.fulfillment.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		Message.success("履约单已冲正");
 		emit("success");
 	} catch (error) {

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/home/QuickSignInPage.vue

@@ -183,6 +183,7 @@ import { resolveSelectedOptionGroupList, validateEventOptionSelection } from "@/
 import { permissionCodes } from "@/utils/permission";
 import { getEventRecordPhotoURL, hasPhotoAttachment } from "@/utils/eventRecord";
 import { compressUploadImageList } from "@/utils/imageCompression";
+import { saveCapturedFilesFromInput } from "@/utils/twaBridge";
 import { Storage, Time } from "timi-web";
 import { type Attachment, AttachmentAPI } from "timi-web-api";
 import EventSelector from "@/components/EventSelector.vue";
@@ -437,6 +438,7 @@ async function handleRecordPhotoSelected(event: Event): Promise<void> {
 	if (!fileList.length) {
 		return;
 	}
+	saveCapturedFilesFromInput(input, fileList);
 	recordPhotoUploading.value = true;
 	try {
 		const compressedFileList = await compressUploadImageList(fileList);

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"
@@ -193,7 +193,7 @@ function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning
 function getProductRightText(item: PackageConfigItem): string {
 	const quantity = getPackageQuantityText(item.defaultQuantity);
 	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? `（${skuText}）` : " "}${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
 }
 
 onMounted(async () => {
@@ -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"
@@ -180,7 +180,7 @@ function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning
 function getProductText(item: PackageConfigItem): string {
 	const quantity = getPackageQuantityText(item.defaultQuantity);
 	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? `（${skuText}）` : " "}${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
 }
 
 onMounted(async () => {
@@ -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/package/PackagePurchase.vue

@@ -65,13 +65,12 @@
 					<div class="description" v-text="config.description" />
 				</div>
 			</t-form-item>
-			<t-form-item label="成交价" label-width="6rem" required-mark>
+			<t-form-item v-if="canPriceOverride" label="成交价" label-width="6rem" required-mark>
 				<t-input
 					v-model.trim="saleAmountText"
 					type="number"
 					align="right"
 					borderless
-					:readonly="!canPriceOverride"
 					placeholder="请输入成交价"
 				/>
 			</t-form-item>
@@ -188,21 +187,21 @@
 					@update:model-value="paymentAmountText = String($event)"
 				/>
 			</t-form-item>
-			<t-form-item label="已全额收款和核销" content-align="right">
+			<t-form-item v-if="canReceiveImmediately" label="已全额收款和核销" content-align="right">
 				<t-switch
 					v-model="receiveFullPayment"
 					size="small"
 					:disabled="!canReceiveImmediately"
 				/>
 			</t-form-item>
-			<t-form-item label="已全部产品履约和核销" content-align="right">
+			<t-form-item v-if="canFulfillImmediately" label="已全部产品履约和核销" content-align="right">
 				<t-switch
 					v-model="fulfillAll"
 					size="small"
 					:disabled="!canFulfillImmediately || isStockChecking"
 				/>
 			</t-form-item>
-			<t-form-item label-width="0">
+			<t-form-item v-if="canFulfillImmediately" label-width="0">
 				<div class="stock-tips">
 					<div class="tips red">全部履约会同步启用全额收款；请先准备充足的库存，任意一步失败都会下单失败。</div>
 					<product-stock-preview v-if="stockPreviewList.length" :items="stockPreviewList" />
@@ -349,6 +348,7 @@ import type { PhotoItem } from "@/types/Photo";
 import type { GaoPackageConfig, PackageAttachment, PackageConfigItem, PackagePurchaseItem } from "@/types/Package";
 import type { Product, ProductSku, ProductSkuUnit } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import {
 	addPackageQuantity,
 	convertPackageQuantity,
@@ -603,7 +603,7 @@ const unitPickerOptions = computed(() => {
 function getConfigProductText(item: PackageConfigItem): string {
 	const quantity = getPackageQuantityText(item.defaultQuantity);
 	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? `（${skuText}）` : " "}${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
 }
 
 function getItemLabel(item: PackagePurchaseItem): string {
@@ -898,6 +898,8 @@ async function purchasePackage(): Promise<void> {
 			Message.error("套餐购买成功但未返回完整订单关联，请联系管理员");
 			return;
 		}
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, result.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		await settingStore.playRegisterSuccessSound();
 		Message.success(fulfillAll.value ? "套餐、收款及履约已完成" : paymentVerified.value ? "套餐及已核销收款已完成" : receiveFullPayment.value ? "套餐及全额收款已完成" : "套餐购买已提交");
 		await router.replace({

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)));
+	authorizationRoleList.value = permissionStore.roleList;
 });
 </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;
+	}
+
+	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"));
 }
 
-function mergeRoleList(...roleLists: Role[][]): Role[] {
-	const roleMap = new Map<string, Role>();
-	for (const role of roleLists.flat()) {
-		roleMap.set(role.id, role);
-	}
-	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 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"
@@ -171,11 +171,11 @@ const route = useRoute();
 const router = useRouter();
 const navBarStore = useNavBarStore();
 const result = reactive({ total: 0, list: [] as PointRedemption[] });
-type DateFilterType = "today" | "yesterday" | "lastWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "上个月", value: "lastMonth" },
 	{ label: "全部", value: "all" },
@@ -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

@@ -86,6 +86,8 @@
 		height="min(80vh, 48rem)"
 		left-button-text="关闭"
 		right-button-text=""
+		:z-index="skuDetailPopupZIndex"
+		:overlay-props="{ zIndex: skuDetailPopupZIndex - 1 }"
 		@left-button-click="closeSkuDetail"
 	>
 		<div v-if="selectedSku" class="sku-popup">
@@ -136,6 +138,7 @@ import type { PhotoItem } from "@/types/Photo";
 import type { Product, ProductSku } from "@/types/Product";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import {
 	getProductPhotoURL,
 	getProductQuantityText,
@@ -155,6 +158,7 @@ const product = ref<Product>();
 const isLoading = ref(false);
 const selectedSku = ref<ProductSku>();
 const skuDetailVisible = ref(false);
+const skuDetailPopupZIndex = 1000;
 const attachmentItemList = computed<PhotoItem[]>(() => (product.value?.attachmentList || [])
 	.filter(item => !!item.id)
 	.map(item => ({
@@ -180,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;
 });
@@ -254,6 +259,8 @@ function disable(): void {
 		onConfirm: async () => {
 			try {
 				await ProductAPI.disable(id);
+				emitListDataChanged(listDataEventKeys.productChanged, id);
+				emitListDataChanged(listDataEventKeys.productStockChanged, id);
 				await load();
 				Message.success("产品已停用");
 			} catch (error) {
@@ -265,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"
@@ -222,9 +223,11 @@ import type { ProductAttachmentItem, ProductForm, ProductSkuForm as SkuForm, Pro
 import { compressUploadImage } from "@/utils/imageCompression";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { formatProductAmount, getProductStatusText, getProductTypeText, normalizeProductQuantity, parseProductAmount } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { saveCapturedFilesFromInput } from "@/utils/twaBridge";
 
 type PickerValue = string | number;
 
@@ -304,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>();
 
@@ -324,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",
@@ -342,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
 	};
 }
@@ -352,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
+		}))
 	};
 }
 
@@ -383,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] = "";
 }
 
@@ -415,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;
 }
 
@@ -424,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,
@@ -441,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 统一配置销售单位`);
 }
@@ -450,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;
 	}
@@ -461,7 +477,7 @@ function removeSku(index: number): void {
 	}
 	form.skuList.splice(index, 1);
 	if (sku.id) {
-		Message.success("SKU 已移除，保存后将停用");
+		Message.success("SKU 已移除，保存后由后端检查引用并处理");
 	}
 }
 
@@ -646,6 +662,7 @@ async function handleAttachmentSelected(event: Event): Promise<void> {
 	if (!file) {
 		return;
 	}
+	saveCapturedFilesFromInput(input, [file]);
 	isAttachmentUploading.value = true;
 	try {
 		const tempFile = (await AttachmentAPI.upload(await compressUploadImage(file)))[0];
@@ -864,7 +881,7 @@ function validate(): boolean {
 			return false;
 		}
 	}
-	if (!form.skuList.length) {
+	if (isCreateMode.value && !form.skuList.length) {
 		Message.warning("至少需要一个 SKU");
 		return false;
 	}
@@ -926,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;
 }
@@ -955,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
 	};
 }
 
@@ -970,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
 	};
@@ -984,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;
 			}
 		}
 	}
@@ -1005,6 +1058,8 @@ async function save(): Promise<void> {
 				generateSkuList([], true);
 			}
 			const productId = await ProductAPI.create(buildProductPayload(form.skuList.map(buildSkuPayload), true));
+			emitListDataChanged(listDataEventKeys.productChanged, productId);
+			emitListDataChanged(listDataEventKeys.productStockChanged, productId);
 			Message.success("产品已创建");
 			await router.replace(`/management/products/${productId}`);
 			return;
@@ -1013,23 +1068,19 @@ 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 ? "产品已创建" : "产品已保存");
 		await router.replace(`/management/products/${productId}`);
 	} catch (error) {
@@ -1166,12 +1217,16 @@ onUnmounted(() => navBarStore.clearRight());
 				}
 			}
 
-			.tags {
-				gap: .5rem;
-				display: flex;
-				flex-wrap: wrap;
+		.tags {
+			gap: .5rem;
+			display: flex;
+			flex-wrap: wrap;
+
+			.value-name {
+				width: 5rem;
 			}
 		}
+		}
 
 		.add {
 			--td-button-border-radius: 1rem;

src/pages/product/ProductList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div ref="productListRef" v-can="permissionCodes.product.read" class="product-list">
-		<div class="filters bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="keyword"
 				class="keyword"
@@ -95,6 +95,7 @@ import type { NavBarAction } from "@/types/NavBarAction";
 import type { Product, ProductCategory, ProductStatus, ProductType } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { getProductPhotoURL, getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
+import { events, isCurrentStoreEvent, listDataEventKeys, type ListDataChangedPayload } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -128,6 +129,10 @@ const isNoMore = ref(false);
 let keywordTimer: number | undefined;
 let requestToken = 0;
 let savedPageScrollTop: number | undefined;
+let eventRefreshPromise: Promise<void> | undefined;
+let hasPendingEventRefresh = false;
+let unregisterProductListEvent: (() => void) | undefined;
+let isDisposed = false;
 
 function getProductListPage(): HTMLElement | null {
 	return productListRef.value?.closest<HTMLElement>(".page") || null;
@@ -186,36 +191,81 @@ async function loadCategories(): Promise<void> {
 	categoryList.value = result.list || [];
 }
 
-async function fetch(reset = false): Promise<void> {
+async function fetch(reset = false, preserveScroll = false): Promise<void> {
 	if (!reset && (isLoading.value || isNoMore.value)) {
 		return;
 	}
+	const loadedPageCount = reset && preserveScroll ? Math.max(pageIndex.value, 1) : 1;
+	const preserveScrollTop = preserveScroll ? getProductListPage()?.scrollTop : undefined;
 	if (reset) {
 		pageIndex.value = 0;
-		productList.value = [];
 		total.value = 0;
 		isNoMore.value = false;
+		if (!preserveScroll) {
+			const page = getProductListPage();
+			if (page) {
+				page.scrollTop = 0;
+			}
+		}
 	}
 	const token = ++requestToken;
 	isLoading.value = true;
 	try {
 		const pageSize = 15;
-		const result = await ProductAPI.list({
-			index: pageIndex.value,
-			size: pageSize,
-			keyword: keyword.value || undefined,
-			status: status.value === "ALL" ? undefined : status.value as ProductStatus,
-			productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
-			categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
-		});
-		if (token !== requestToken) {
-			return;
+		if (reset && preserveScroll) {
+			const nextList: Product[] = [];
+			let nextTotal = 0;
+			let nextPageIndex = 0;
+			for (let index = 0; index < loadedPageCount; index += 1) {
+				const result = await ProductAPI.list({
+					index,
+					size: pageSize,
+					keyword: keyword.value || undefined,
+					status: status.value === "ALL" ? undefined : status.value as ProductStatus,
+					productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
+					categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
+				});
+				if (token !== requestToken) {
+					return;
+				}
+				const list = result.list || [];
+				nextList.push(...list);
+				nextTotal = result.total || 0;
+				nextPageIndex += 1;
+				if (list.length < pageSize || nextTotal <= nextList.length) {
+					break;
+				}
+			}
+			productList.value = nextList;
+			total.value = nextTotal;
+			pageIndex.value = nextPageIndex;
+			isNoMore.value = nextList.length < pageSize || nextList.length === nextTotal || nextTotal < nextList.length;
+		} else {
+			const result = await ProductAPI.list({
+				index: pageIndex.value,
+				size: pageSize,
+				keyword: keyword.value || undefined,
+				status: status.value === "ALL" ? undefined : status.value as ProductStatus,
+				productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
+				categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
+			});
+			if (token !== requestToken) {
+				return;
+			}
+			const list = result.list || [];
+			productList.value = reset ? list : productList.value.concat(list);
+			total.value = result.total || 0;
+			pageIndex.value += 1;
+			isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
+		}
+		if (preserveScrollTop !== undefined) {
+			requestAnimationFrame(() => {
+				const page = getProductListPage();
+				if (page) {
+					page.scrollTop = preserveScrollTop;
+				}
+			});
 		}
-		const list = result.list || [];
-		productList.value = reset ? list : productList.value.concat(list);
-		total.value = result.total || 0;
-		pageIndex.value += 1;
-		isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
 	} finally {
 		if (token === requestToken) {
 			isLoading.value = false;
@@ -223,6 +273,32 @@ async function fetch(reset = false): Promise<void> {
 	}
 }
 
+function startEventRefresh(): void {
+	if (isDisposed) {
+		return;
+	}
+	eventRefreshPromise = fetch(true, true)
+		.catch(error => Message.error(getErrorMessage(error, "产品列表加载失败")))
+		.finally(() => {
+			eventRefreshPromise = undefined;
+			if (!isDisposed && hasPendingEventRefresh) {
+				hasPendingEventRefresh = false;
+				startEventRefresh();
+			}
+		});
+}
+
+function requestEventRefresh(payload?: ListDataChangedPayload): void {
+	if (!isCurrentStoreEvent(payload)) {
+		return;
+	}
+	if (eventRefreshPromise) {
+		hasPendingEventRefresh = true;
+		return;
+	}
+	startEventRefresh();
+}
+
 async function refresh(): Promise<void> {
 	try {
 		await fetch(true);
@@ -299,6 +375,7 @@ async function toDetail(item: Product): Promise<void> {
 }
 
 onMounted(async () => {
+	unregisterProductListEvent = events.register(listDataEventKeys.productChanged, (payload: ListDataChangedPayload) => requestEventRefresh(payload));
 	syncNavBar();
 	try {
 		await Promise.all([loadCategories(), fetch(true)]);
@@ -333,6 +410,9 @@ onBeforeRouteLeave(() => {
 });
 
 onUnmounted(() => {
+	isDisposed = true;
+	unregisterProductListEvent?.();
+	unregisterProductListEvent = undefined;
 	navBarStore.clearRight();
 	window.clearTimeout(keywordTimer);
 	requestToken += 1;
@@ -351,8 +431,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -360,7 +438,6 @@ onUnmounted(() => {
 
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -368,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,16 +1,15 @@
 <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"
 				type="search"
 				borderless
 				clearable
-				placeholder="搜索产品名称或编码"
+				placeholder="搜索产品名称（拼音）或编码"
 			/>
 		</div>
-
 		<t-pull-down-refresh
 			class="list-wrap empty-cell-title-margin"
 			v-model="isRefreshing"
@@ -70,6 +69,7 @@ import { useNavBarStore } from "@/store/navBarStore";
 import type { ProductStockProduct } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { getProductPhotoURL, getProductQuantityText } from "@/utils/product";
+import { events, isCurrentStoreEvent, listDataEventKeys, type ListDataChangedPayload } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -90,6 +90,10 @@ const isNoMore = ref(false);
 let keywordTimer: number | undefined;
 let requestToken = 0;
 let savedPageScrollTop: number | undefined;
+let eventRefreshPromise: Promise<void> | undefined;
+let hasPendingEventRefresh = false;
+let unregisterProductStockListEvent: (() => void) | undefined;
+let isDisposed = false;
 
 function getProductStockListPage(): HTMLElement | null {
 	return productStockListRef.value?.closest<HTMLElement>(".page") || null;
@@ -127,33 +131,75 @@ function getCurrentRouteDepth(): number {
 	return Number(route.meta.depth ?? 0);
 }
 
-async function fetch(reset = false): Promise<void> {
+async function fetch(reset = false, preserveScroll = false): Promise<void> {
 	if (!reset && (isLoading.value || isNoMore.value)) {
 		return;
 	}
+	const loadedPageCount = reset && preserveScroll ? Math.max(pageIndex.value, 1) : 1;
+	const preserveScrollTop = preserveScroll ? getProductStockListPage()?.scrollTop : undefined;
 	if (reset) {
 		pageIndex.value = 0;
-		productList.value = [];
 		total.value = 0;
 		isNoMore.value = false;
+		if (!preserveScroll) {
+			const page = getProductStockListPage();
+			if (page) {
+				page.scrollTop = 0;
+			}
+		}
 	}
 	const token = ++requestToken;
 	isLoading.value = true;
 	try {
 		const pageSize = 15;
-		const result = await ProductAPI.stockProductList({
-			index: pageIndex.value,
-			size: pageSize,
-			keyword: keyword.value || undefined
-		});
-		if (token !== requestToken) {
-			return;
+		if (reset && preserveScroll) {
+			const nextList: ProductStockProduct[] = [];
+			let nextTotal = 0;
+			let nextPageIndex = 0;
+			for (let index = 0; index < loadedPageCount; index += 1) {
+				const result = await ProductAPI.stockProductList({
+					index,
+					size: pageSize,
+					keyword: keyword.value.trim() || undefined
+				});
+				if (token !== requestToken) {
+					return;
+				}
+				const list = result.list || [];
+				nextList.push(...list);
+				nextTotal = result.total || 0;
+				nextPageIndex += 1;
+				if (list.length < pageSize || nextTotal <= nextList.length) {
+					break;
+				}
+			}
+			productList.value = nextList;
+			total.value = nextTotal;
+			pageIndex.value = nextPageIndex;
+			isNoMore.value = nextList.length < pageSize || nextList.length === nextTotal || nextTotal < nextList.length;
+		} else {
+			const result = await ProductAPI.stockProductList({
+				index: pageIndex.value,
+				size: pageSize,
+				keyword: keyword.value.trim() || undefined
+			});
+			if (token !== requestToken) {
+				return;
+			}
+			const list = result.list || [];
+			productList.value = reset ? list : productList.value.concat(list);
+			total.value = result.total || 0;
+			pageIndex.value += 1;
+			isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
+		}
+		if (preserveScrollTop !== undefined) {
+			requestAnimationFrame(() => {
+				const page = getProductStockListPage();
+				if (page) {
+					page.scrollTop = preserveScrollTop;
+				}
+			});
 		}
-		const list = result.list || [];
-		productList.value = reset ? list : productList.value.concat(list);
-		total.value = result.total || 0;
-		pageIndex.value += 1;
-		isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
 	} finally {
 		if (token === requestToken) {
 			isLoading.value = false;
@@ -161,6 +207,32 @@ async function fetch(reset = false): Promise<void> {
 	}
 }
 
+function startEventRefresh(): void {
+	if (isDisposed) {
+		return;
+	}
+	eventRefreshPromise = fetch(true, true)
+		.catch(error => Message.error(getErrorMessage(error, "产品列表加载失败")))
+		.finally(() => {
+			eventRefreshPromise = undefined;
+			if (!isDisposed && hasPendingEventRefresh) {
+				hasPendingEventRefresh = false;
+				startEventRefresh();
+			}
+		});
+}
+
+function requestEventRefresh(payload?: ListDataChangedPayload): void {
+	if (!isCurrentStoreEvent(payload)) {
+		return;
+	}
+	if (eventRefreshPromise) {
+		hasPendingEventRefresh = true;
+		return;
+	}
+	startEventRefresh();
+}
+
 async function refresh(): Promise<void> {
 	try {
 		await fetch(true);
@@ -183,6 +255,14 @@ async function toSkuList(item: ProductStockProduct): Promise<void> {
 	if (!item.productId) {
 		return;
 	}
+	if (item.skuCount === 1 && item.skuId) {
+		await router.push({
+			name: "ProductStockDetail",
+			params: { skuId: item.skuId },
+			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+		});
+		return;
+	}
 	await router.push({
 		name: "ProductStockSkuList",
 		params: { productId: item.productId },
@@ -191,6 +271,7 @@ async function toSkuList(item: ProductStockProduct): Promise<void> {
 }
 
 onMounted(async () => {
+	unregisterProductStockListEvent = events.register(listDataEventKeys.productStockChanged, (payload: ListDataChangedPayload) => requestEventRefresh(payload));
 	navBarStore.clearRight();
 	if (!userStore.hasPermissions(permissionCodes.productStock.read)) {
 		return;
@@ -227,6 +308,9 @@ onBeforeRouteLeave(() => {
 });
 
 onUnmounted(() => {
+	isDisposed = true;
+	unregisterProductStockListEvent?.();
+	unregisterProductStockListEvent = undefined;
 	navBarStore.clearRight();
 	window.clearTimeout(keywordTimer);
 	requestToken += 1;
@@ -237,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;
 		}
 	}
@@ -257,7 +338,6 @@ onUnmounted(() => {
 		min-height: 70vh;
 
 		.list {
-			padding-top: .75rem;
 
 			.item {
 				padding: 10px;

src/pages/product/ProductStockOperationPopup.vue

@@ -108,6 +108,7 @@ import type {
 	StockOperationType
 } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { createProductRequestNo, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import type { PhotoItem } from "@/types/Photo";
@@ -260,6 +261,7 @@ async function submit(): Promise<void> {
 				break;
 		}
 		visible.value = false;
+		emitListDataChanged(listDataEventKeys.productStockChanged, props.product.id);
 		Message.success("库存操作已提交");
 		emit("success");
 	} catch (error) {

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>
@@ -144,6 +144,7 @@ import type { PhotoItem } from "@/types/Photo";
 import type { StockBizType, StockRecord } from "@/types/Product";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { createProductRequestNo, getProductQuantityText, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
@@ -156,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);
@@ -279,6 +281,7 @@ async function submitManualRevoke(): Promise<void> {
 			attachmentList: buildAttachments()
 		});
 		revokeVisible.value = false;
+		emitListDataChanged(listDataEventKeys.productStockChanged, record.value.id);
 		Message.success("手工库存流水已冲正");
 		await loadData();
 	} catch (error) {
@@ -297,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,17 +1,23 @@
 <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.trim="keyword"
+				v-model="keyword"
 				class="keyword"
 				type="search"
 				borderless
 				clearable
-				placeholder="搜索产品名称或编码"
+				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,83 +26,160 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
-			<t-cell-group v-if="recordList.length" class="list empty-cell-title-margin" theme="card">
-				<t-cell
-					v-for="(record, index) in recordList"
-					:key="record.id || `${record.occurredAt}-${record.requestNo}-${index}`"
-					class="item"
-					:arrow="!!record.id"
-					:hover="!!record.id"
-					v-entrance-transition="index * 30"
-					@click="toDetail(record)"
-				>
-					<template #leftIcon>
-						<t-image
-							v-if="getCustomerPhotoURL(record.customer, 64)"
-							:src="getCustomerPhotoURL(record.customer, 64)"
-							:alt="getCustomerText(record)"
-							fit="cover"
-							class="avatar"
-						/>
-						<div
-							v-else-if="record.customer"
-							class="avatar fallback"
-							v-text="getCustomerText(record).slice(0, 1)"
-						/>
-						<t-image
-							v-else-if="record.operator"
-							:src="getOperatorAvatar(record)"
-							:alt="getOperatorText(record)"
-							fit="cover"
-							class="avatar"
-						/>
-						<span v-else class="icon" :class="getDeltaClass(record.onHandDelta)">
+			<div class="list-wrap">
+				<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
+					<t-cell
+						title="开始时间"
+						:note="dateRange[0] || '-'"
+						arrow
+						@click="openStartTime"
+					/>
+					<t-cell
+						title="结束时间"
+						:note="dateRange[1] || '-'"
+						arrow
+						@click="openEndTime"
+					/>
+				</t-cell-group>
+				<t-cell-group v-if="filteredProduct && filteredSku" theme="card">
+					<t-cell class="sku">
+						<template #leftIcon>
+							<t-image
+								v-if="filteredSkuPhotoURL"
+								class="avatar"
+								:src="filteredSkuPhotoURL"
+								:alt="filteredProduct.name || '产品图片'"
+								fit="cover"
+							/>
+							<div
+								v-else
+								class="fallback"
+								v-text="(filteredProduct.name || filteredProduct.code || '产').slice(0, 1)"
+							/>
+						</template>
+						<template #title>
+							<div class="title">
+								<strong class="text-bold clip-text" v-text="filteredProduct.name || '未命名产品'" />
+								<span class="clip-text" v-text="filteredSku.specSummary || filteredSku.name || '默认 SKU'" />
+							</div>
+						</template>
+						<template #note>
+							<t-tag
+								variant="light-outline"
+								theme="primary"
+								:content="getProductTypeText(filteredProduct.productType)"
+							/>
+						</template>
+					</t-cell>
+				</t-cell-group>
+				<t-cell-group v-if="recordList.length" class="list empty-cell-title-margin" theme="card">
+					<t-cell
+						v-for="(record, index) in recordList"
+						:key="record.id || `${record.occurredAt}-${record.requestNo}-${index}`"
+						class="item"
+						:arrow="!!record.id"
+						:hover="!!record.id"
+						v-entrance-transition="index * 30"
+						@click="toDetail(record)"
+					>
+						<template #leftIcon>
+							<t-image
+								v-if="getCustomerPhotoURL(record.customer, 64)"
+								:src="getCustomerPhotoURL(record.customer, 64)"
+								:alt="getCustomerText(record)"
+								fit="cover"
+								class="avatar"
+							/>
+							<div
+								v-else-if="record.customer"
+								class="avatar fallback"
+								v-text="getCustomerText(record).slice(0, 1)"
+							/>
+							<t-image
+								v-else-if="record.operator"
+								:src="getOperatorAvatar(record)"
+								:alt="getOperatorText(record)"
+								fit="cover"
+								class="avatar"
+							/>
+							<span v-else class="icon" :class="getDeltaClass(record.onHandDelta)">
 							<t-icon :name="getOperationIcon(record.operationType)" size="1.25rem" />
 						</span>
-					</template>
-					<template #title>
-						<div class="title">
-							<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
-							<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
-							<strong class="operation" v-text="getStockOperationText(record.operationType)" />
-							<strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" />
-							<span
-								v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
-								class="quantity"
-								v-text="getStockQuantityText(record)"
-							/>
-						</div>
-				    </template>
-					<template #description>
-						<div class="description">
-							<pass-time-label :timestamp="record.occurredAt" underline />
-							<div class="delta">
-								<span>库存：</span>
+						</template>
+						<template #title>
+							<div class="title">
+								<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
+								<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
+								<strong class="operation" :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
-									class="value"
-									:class="getDeltaClass(record.onHandDelta)"
-									v-text="getDeltaText(record.onHandDelta)"
+									v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
+									class="quantity"
+									v-text="getStockQuantityText(record)"
 								/>
 							</div>
-						</div>
-					</template>
-				</t-cell>
-			</t-cell-group>
-			<div v-else class="center-tips" v-text="emptyText" />
-			<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
+						</template>
+						<template #description>
+							<div class="description">
+								<pass-time-label :timestamp="record.occurredAt" underline />
+								<div class="delta">
+									<span>库存：</span>
+									<span
+										class="value"
+										:class="getDeltaClass(record.onHandDelta)"
+										v-text="getDeltaText(record.onHandDelta)"
+									/>
+								</div>
+							</div>
+						</template>
+					</t-cell>
+				</t-cell-group>
+				<div v-else class="center-tips" v-text="emptyText" />
+				<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
+			</div>
 		</t-pull-down-refresh>
 	</div>
+	<t-popup v-model="startVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="startVisible"
+			v-model="startDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="开始时间"
+			:default-value="dateRange[0]"
+			@cancel="cancelStartTime"
+			@confirm="confirmStartTime"
+		/>
+	</t-popup>
+	<t-popup v-model="endVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="endVisible"
+			v-model="endDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="结束时间"
+			:default-value="dateRange[1]"
+			@cancel="cancelEndTime"
+			@confirm="confirmEndTime"
+		/>
+	</t-popup>
 </template>
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
-import { PassTimeLabel } from "timi-web";
+import { PassTimeLabel, Time } from "timi-web";
 import { UserAPI } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
+import type { Product, ProductSku, StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
+import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
-import { getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { getProductPhotoURL, getProductQuantityText, getProductTypeText, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { getCustomerPhotoURL } from "@/utils/customer";
@@ -104,6 +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,103 +597,164 @@ onUnmounted(() => {
 			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
-			background: #fff;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;
-			&:after {
-				display: none;
-			}
-
-			:deep(.t-dropdown-menu__item) {
-				min-width: 0;
-			}
-
-			:deep(.t-dropdown-menu__title) {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
 		}
 	}
 
-	.list {
-		margin: 0;
+	.list-wrap {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
 
-		.item {
-			padding: 10px;
-			min-width: 0;
+		.date-summary {
 
 			:deep(.t-cell__title) {
-				min-width: 0;
-				width: 0;
+				flex: 0 0 4.5rem;
 			}
 
-			:deep(.t-cell__title-text) {
+			:deep(.t-cell__note) {
+				flex: 1 1 0;
 				min-width: 0;
-				width: 100%;
+				overflow: hidden;
+				text-align: right;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+
+		.sku {
+			--td-tag-square-border-radius: .5rem;
+
+			padding: 10px;
+
+			:deep(.t-cell__title) {
+				display: flex;
+				align-items: center;
 			}
 
 			.avatar {
-				width: 3.5rem;
-				height: 3.5rem;
-			}
-
-			.icon {
-				width: 2.25rem;
-				height: 2.25rem;
-				display: inline-flex;
-				background: var(--td-bg-color-secondarycontainer);
-				align-items: center;
-				border-radius: 50%;
-				justify-content: center;
+				width: 2rem;
+				height: 2rem;
+				border-radius: .5rem !important;
 			}
 
 			.title {
 				gap: .5rem;
+				display: flex;
 				min-width: 0;
-				max-width: 100%;
-				flex: 1;
-				display: flex;
-				font-size: .75rem;
 				align-items: center;
-				white-space: nowrap;
-
-				.actor {
-					color: var(--td-text-color-secondary);
-					flex: 0 0 auto;
-				}
-
-				.operation {
-					flex: 0 0 auto;
-				}
-
-				.product-name {
-					min-width: 0;
-					flex: 0 1 auto;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-
-				.quantity {
-					color: var(--td-text-color-secondary);
-					flex: 0 0 auto;
-					font-weight: 400;
-				}
 			}
+		}
 
-			.description {
-				gap: .5rem;
-				display: flex;
-				font-size: .75rem;
-				align-items: center;
-				justify-content: space-between;
+		.list {
+			margin: 0;
 
-				.delta {
+			.item {
+				padding: 10px;
+				min-width: 0;
 
-					.value {
-						font-size: 1.25rem;
+				.avatar {
+					width: 3.5rem;
+					height: 3.5rem;
+				}
+
+				.icon {
+					width: 2.25rem;
+					height: 2.25rem;
+					display: inline-flex;
+					background: var(--td-bg-color-secondarycontainer);
+					align-items: center;
+					border-radius: 50%;
+					justify-content: center;
+				}
+
+				.title {
+					gap: .25rem;
+					min-width: 0;
+					max-width: 100%;
+					flex: 1;
+					display: flex;
+					font-size: .75rem;
+					align-items: center;
+					white-space: nowrap;
+
+					.actor {
+						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 {
+						flex: 0 1 auto;
+						color: var(--td-text-color-primary);
+					}
+
+					.quantity {
+						color: var(--td-text-color-secondary);
+						flex: 0 0 auto;
+						font-weight: 400;
+					}
+				}
+
+				.description {
+					gap: .5rem;
+					display: flex;
+					font-size: .75rem;
+					align-items: center;
+					justify-content: space-between;
+
+					.delta {
+
+						.value {
+							font-size: 1.25rem;
+						}
 					}
 				}
 			}
@@ -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"
@@ -154,10 +154,6 @@ function getSelectedUnit(item: ProductStock): ProductSkuUnit | undefined {
 	return unitList.find(unit => unit.id === selectedUnitId) || unitList.find(unit => unit.isBase) || unitList[0];
 }
 
-function getSelectedUnitName(item: ProductStock): string {
-	return getSelectedUnit(item)?.name || "基础单位";
-}
-
 function getStockQuantityText(item: ProductStock, value?: number | string): string {
 	const quantity = convertBaseQuantityToPackageQuantity(value ?? "0", getSelectedUnit(item)?.baseQuantityPerUnit ?? "1");
 	return getProductQuantityText(quantity);
@@ -322,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>
@@ -69,7 +71,7 @@ import { BottomPopup } from "timi-tdesign-mobile";
 import type { ProductSkuUnit, ProductType } from "@/types/Product";
 import type { ProductSkuForm, ProductSkuUnitForm, ProductSpecForm } from "@/types/ProductEditor";
 import { Message } from "@/utils/message";
-import { formatProductAmount, getProductSkuSpecEntries } from "@/utils/product";
+import { formatProductAmount } from "@/utils/product";
 
 defineOptions({ name: "ProductSkuUnitEditor" });
 
@@ -91,7 +93,12 @@ const visible = computed({
 	set: value => handleVisibleChange(value)
 });
 const unitEditorZIndex = 12100;
-const skuSpecEntries = computed(() => sku.value ? getProductSkuSpecEntries(sku.value, props.specList) : []);
+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);
@@ -136,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"
@@ -196,7 +196,7 @@ import { permissionCodes } from "@/utils/permission";
 
 defineOptions({ name: "ConsumptionRecordList" });
 
-type DateFilterType = "today" | "yesterday" | "lastWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 
 const pageSize = 20;
 const route = useRoute();
@@ -207,7 +207,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "全部时间", value: "all" },
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "上个月", value: "lastMonth" },
 	{ label: "自定义范围", value: "custom" }
@@ -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/FundRecordDetail.vue

@@ -130,6 +130,7 @@ import type { FundRecord, FundRecordStatus } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { formatPackageAmount } from "@/utils/package";
 import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
@@ -262,6 +263,7 @@ async function verifyReceive(): Promise<void> {
 			isOperating.value = true;
 			try {
 				await SalesOrderAPI.verifyPayment(record.value!.id!);
+				emitListDataChanged(listDataEventKeys.salesOrderChanged, record.value?.bizId);
 				await refreshRelatedPackage();
 				Message.success("收款已核销");
 				await loadData();
@@ -304,6 +306,7 @@ async function submitReason(): Promise<void> {
 		} else {
 			await SalesOrderAPI.cancelPayment({ fundRecordId: record.value.id, reason: reasonText.value.trim() });
 		}
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, record.value.bizId);
 		reasonDialogVisible.value = false;
 		await refreshRelatedPackage();
 		Message.success(reasonAction.value === "reject" ? "收款已拒绝" : "收款已撤销");

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,16 +89,14 @@
 					</template>
 					<template #title>
 						<div class="title">
-							<span class="customer" v-text="getCustomerText(item)" />
-							<div class="operation">
-								<span v-text="getFundOperationText(item.operationType)" />
-								<t-tag
-									size="small"
-									:content="getRecordStatusText(item)"
-									variant="light-outline"
-									:theme="getRecordStatusTheme(item)"
-								/>
-							</div>
+							<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)"
+								variant="light-outline"
+								:theme="getRecordStatusTheme(item)"
+							/>
 						</div>
 					</template>
 					<template #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/FundRecordRevoke.vue

@@ -16,13 +16,21 @@
 		</t-cell-group>
 		<t-form v-if="record" class="form" v-entrance-transition="70">
 			<t-form-item label="冲正原因" required-mark>
-				<t-textarea
-					v-model="reason"
-					borderless
-					autosize
-					maxlength="500"
-					placeholder="请输入冲正原因"
-				/>
+				<div class="reason">
+					<t-textarea
+						v-model="reason"
+						borderless
+						autosize
+						maxlength="500"
+						placeholder="请输入或选择冲正原因"
+					/>
+					<t-button
+						size="extra-small"
+						theme="primary"
+						variant="outline"
+						@click="openReasonPicker"
+					>选择</t-button>
+				</div>
 			</t-form-item>
 			<t-form-item
 				label="冲正时间"
@@ -68,6 +76,16 @@
 			</div>
 		</t-form>
 		<t-empty v-if="!record" :description="isLoading ? '正在加载资金记录' : '资金记录不存在'" />
+		<t-popup v-model="reasonPickerVisible" placement="bottom">
+			<t-picker
+				v-if="reasonPickerVisible"
+				v-model="reasonPickerDraft"
+				:columns="reasonPickerColumns"
+				title="选择冲正原因"
+				@cancel="reasonPickerVisible = false"
+				@confirm="confirmReason"
+			/>
+		</t-popup>
 		<t-popup v-model="occurredAtPickerVisible" placement="bottom">
 			<t-date-time-picker
 				v-if="occurredAtPickerVisible"
@@ -94,6 +112,7 @@ import type { PhotoItem } from "@/types/Photo";
 import { createPackageRequestNo, formatPackageAmount } from "@/utils/package";
 import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { uploadPhotoList } from "@/utils/photo";
@@ -110,12 +129,23 @@ const remark = ref("");
 const occurredAtText = ref("");
 const occurredAtDraftText = ref("");
 const occurredAtPickerVisible = ref(false);
+const reasonPickerDraft = ref<string[]>([]);
+const reasonPickerVisible = ref(false);
 const photoItems = ref<PhotoItem[]>([]);
 const isLoading = ref(false);
 const isSaving = ref(false);
 const requestNo = ref("");
 const photoUrlList = computed(() => photoItems.value.map(item => item.url));
 const canReadSalesOrder = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.read));
+const reasonOptions = [
+	"客户申请撤销本次资金操作",
+	"收款金额填写有误",
+	"退款金额填写有误",
+	"资金操作重复",
+	"资金操作有误",
+	"订单信息有误"
+];
+const reasonPickerColumns = reasonOptions.map(item => ({ label: item, value: item }));
 
 const minimumDateTimeText = "1970-01-01 00:00";
 
@@ -134,6 +164,17 @@ function resetOccurredAt(): void {
 	occurredAtDraftText.value = "";
 }
 
+function openReasonPicker(): void {
+	const currentReason = reasonOptions.includes(reason.value.trim()) ? reason.value.trim() : reasonOptions[0];
+	reasonPickerDraft.value = [currentReason];
+	reasonPickerVisible.value = true;
+}
+
+function confirmReason(value: Array<string | number>): void {
+	reason.value = String(value[0] || reasonPickerDraft.value[0] || "");
+	reasonPickerVisible.value = false;
+}
+
 function buildOccurredAt(): number {
 	return Time.toTimestamp(parseDateTime(occurredAtText.value));
 }
@@ -224,6 +265,7 @@ async function save(): Promise<void> {
 			attachmentList: buildAttachments(),
 			remark: remark.value.trim() || null
 		});
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, record.value.bizId);
 		Message.success("资金记录已冲正");
 		if (record.value.bizId) {
 			await router.replace(`/management/sales-orders/${record.value.bizId}`);
@@ -254,6 +296,18 @@ onUnmounted(() => navBarStore.clearRight());
 	display: flex;
 	flex-direction: column;
 
+	.reason {
+		gap: .5rem;
+		flex: 1;
+		display: flex;
+		align-items: flex-start;
+
+		.t-textarea {
+			min-width: 0;
+			flex: 1;
+		}
+	}
+
 	.time-actions {
 		gap: .5rem;
 		display: flex;

src/pages/salesOrder/SalesOrderCancel.vue

@@ -60,6 +60,7 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { SalesOrder } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { getSalesOrderStatusText } from "@/utils/salesOrder";
@@ -131,6 +132,7 @@ async function save(): Promise<void> {
 	saving.value = true;
 	try {
 		await SalesOrderAPI.cancel({ salesOrderId: order.value.id, reason: reason.value.trim() });
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, order.value.id);
 		Message.success("订单已取消");
 		await router.replace(`/management/sales-orders/${order.value.id}`);
 	} catch (error) {

src/pages/salesOrder/SalesOrderCreate.vue

@@ -62,13 +62,12 @@
 								required-mark
 								@update:model-value="applyProduct(index, $event)"
 							/>
-							<t-form-item :label="canPriceOverride ? '成交单价' : '单价'">
+							<t-form-item v-if="canPriceOverride" label="成交单价">
 								<t-input
 									v-model.trim="item.unitPriceText"
 									type="number"
 									align="right"
 									borderless
-									:readonly="!canPriceOverride"
 									:placeholder="getItemUnitPricePlaceholder(item)"
 								/>
 								<template #help>
@@ -151,21 +150,21 @@
 					@update:model-value="paymentAmountText = String($event)"
 				/>
 			</t-form-item>
-			<t-form-item label="已全额收款和核销" content-align="right">
+			<t-form-item v-if="canReceiveImmediately" label="已全额收款和核销" content-align="right">
 				<t-switch
 					v-model="receiveFullPayment"
 					size="small"
 					:disabled="!canReceiveImmediately"
 				/>
 			</t-form-item>
-			<t-form-item label="已全部产品履约和核销" content-align="right">
+			<t-form-item v-if="canFulfillImmediately" label="已全部产品履约和核销" content-align="right">
 				<t-switch
 					v-model="fulfillAll"
 					size="small"
 					:disabled="!canFulfillImmediately || isStockChecking"
 				/>
 			</t-form-item>
-			<t-form-item label-width="0">
+			<t-form-item v-if="canFulfillImmediately" label-width="0">
 				<div class="stock-tips">
 					<div class="tips red">全部履约会同步启用全额收款；请先准备充足的库存，任意一步失败都会下单失败。</div>
 					<product-stock-preview v-if="stockPreviewList.length" :items="stockPreviewList" />
@@ -238,6 +237,7 @@ import type { DirectProductOrderItemRequest } from "@/types/SalesOrder";
 import { createPackageRequestNo, normalizePackageQuantity, parsePackageAmount, toPackageBaseQuantity } from "@/utils/package";
 import { formatProductAmount, getProductQuantityStep } from "@/utils/product";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { buildProductStockPreview, getProductStockShortageMessage, mergeProductStockRequirements } from "@/utils/productStock";
@@ -600,6 +600,8 @@ async function submitOrder(): Promise<void> {
 			} : undefined,
 			remark: remark.value.trim() || null
 		});
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, result.id);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		Message.success(fulfillAll.value ? "订单、收款及履约已完成" : paymentVerified.value ? "订单及已核销收款已完成" : receiveFullPayment.value ? "订单及全额收款已完成" : "销售订单已创建");
 		await router.replace(`/management/sales-orders/${result.id}`);
 	} catch (error) {

src/pages/salesOrder/SalesOrderDetail.vue

@@ -232,6 +232,7 @@ import type { PhotoItem } from "@/types/Photo";
 import { convertPackageQuantity, formatPackageAmount, getPackageQuantityText } from "@/utils/package";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { getProductPhotoURL } from "@/utils/product";
 import {
 	getSalesOrderStatusText,
@@ -418,6 +419,7 @@ async function saveEdit(): Promise<void> {
 			attachmentList: buildAttachmentList(),
 			remark: editRemark.value.trim() || null
 		});
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, orderId);
 		order.value = result;
 		editRemark.value = result.remark || "";
 		photoItems.value = toPhotoItems(result.attachmentList);

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"
@@ -132,6 +132,7 @@ import {
 } from "@/types/SalesOrderFilter";
 import { buildPresetDateRange, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
+import { events, isCurrentStoreEvent, listDataEventKeys, type ListDataChangedPayload } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
@@ -153,6 +154,10 @@ const canRefund = computed(() => userStore.hasPermissions(permissionCodes.fund.r
 const canStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager));
 let savedPageScrollTop: number | undefined;
 let shouldReloadOnActivate = false;
+let eventRefreshPromise: Promise<void> | undefined;
+let hasPendingEventRefresh = false;
+let unregisterSalesOrderListEvent: (() => void) | undefined;
+let isDisposed = false;
 
 function getSalesOrderPage(): HTMLElement | null {
 	return salesOrderListRef.value?.closest<HTMLElement>(".page") || null;
@@ -216,6 +221,7 @@ const selectedPackageName = computed(() => selectedPackage.value?.name || queryV
 const filterVisible = ref(false);
 const appliedFilter = ref<SalesOrderListFilter>(createDefaultSalesOrderFilter());
 const filterStorageKey = computed(() => `${SALES_ORDER_FILTER_STORAGE_KEY}:${currentStoreStore.currentStoreId || "default"}:${packageConfigId.value || "all"}`);
+let cachedPackageConfigId = "";
 const orderTypeOptions: Array<{ label: string; value: GaoSalesOrderType }> = [
 	{ label: "套餐订单", value: "PACKAGE" },
 	{ label: "产品订单", value: "DIRECT_PRODUCT" }
@@ -333,6 +339,12 @@ function applyRouteFilters(): void {
 	appliedFilter.value = nextFilter;
 }
 
+function syncCachedRouteContext(): void {
+	if (route.name === "SalesOrderList") {
+		cachedPackageConfigId = packageConfigId.value;
+	}
+}
+
 async function loadRoutePackage(): Promise<void> {
 	selectedPackage.value = undefined;
 	if (!packageConfigId.value) {
@@ -385,6 +397,7 @@ function resetForProductTab(): void {
 	refreshing.value = false;
 	noMore.value = false;
 	savedPageScrollTop = undefined;
+	cachedPackageConfigId = "";
 	localStorage.removeItem(filterStorageKey.value);
 	const page = getSalesOrderPage();
 	if (page) {
@@ -407,44 +420,83 @@ function getPaymentStatusValues(valueList: SalesOrderPaymentFilter[]): GaoSalesP
 	return paymentStatusValues.filter(value => valueSet.has(value));
 }
 
-function buildPageFilter(): SalesOrderPage {
+function buildPageFilter(index = pageIndex.value): SalesOrderPage {
 	const filter = appliedFilter.value;
 	const [beginText, endText] = filter.dateRange;
+	const currentPackageConfigId = cachedPackageConfigId || packageConfigId.value;
 	return {
 		customerId: customerId.value || undefined,
-		packageConfigId: packageConfigId.value || undefined,
+		packageConfigId: currentPackageConfigId || undefined,
 		keyword: keyword.value || undefined,
-		orderTypeList: packageConfigId.value ? ["PACKAGE"] : getEffectiveList(filter.orderTypeList, orderTypeOptions.map(item => item.value)),
+		orderTypeList: currentPackageConfigId ? ["PACKAGE"] : getEffectiveList(filter.orderTypeList, orderTypeOptions.map(item => item.value)),
 		statusList: getEffectiveList(filter.statusList, statusOptions.map(item => item.value)),
 		paymentStatusList: getEffectiveList(getPaymentStatusValues(filter.paymentStatusList), paymentStatusValues),
 		refundStatusList: getEffectiveList(filter.refundStatusList, refundOptions.map(item => item.value)),
 		beginAt: beginText ? parseDateTime(beginText, false).getTime() : undefined,
 		endAt: endText ? parseDateTime(endText, true).getTime() : undefined,
-		index: pageIndex.value,
+		index,
 		size: pageSize
 	};
 }
 
-async function fetchList(reset: boolean): Promise<void> {
-	if (loading.value || (!reset && noMore.value)) return;
+async function fetchList(reset: boolean, preserveScroll = false): Promise<void> {
+	if (!reset && (loading.value || noMore.value)) return;
+	const loadedPageCount = reset && preserveScroll ? Math.max(pageIndex.value, 1) : 1;
+	const preserveScrollTop = preserveScroll ? getSalesOrderPage()?.scrollTop : undefined;
 	if (reset) {
 		pageIndex.value = 0;
 		total.value = 0;
 		noMore.value = false;
-		list.value = [];
+		if (!preserveScroll) {
+			const page = getSalesOrderPage();
+			if (page) {
+				page.scrollTop = 0;
+			}
+		}
 	}
 	const requestId = ++listRequestId;
 	loading.value = true;
 	try {
-		const result = await SalesOrderAPI.list(buildPageFilter());
-		if (requestId !== listRequestId) {
-			return;
+		if (reset && preserveScroll) {
+			const nextList: SalesOrder[] = [];
+			let nextTotal = 0;
+			let nextPageIndex = 0;
+			for (let index = 0; index < loadedPageCount; index += 1) {
+				const result = await SalesOrderAPI.list(buildPageFilter(index));
+				if (requestId !== listRequestId) {
+					return;
+				}
+				const rows = result.list || [];
+				nextList.push(...rows);
+				nextTotal = result.total || 0;
+				nextPageIndex += 1;
+				if (rows.length < pageSize || nextTotal <= nextList.length) {
+					break;
+				}
+			}
+			list.value = nextList;
+			total.value = nextTotal;
+			pageIndex.value = nextPageIndex;
+			noMore.value = nextList.length < pageSize || nextTotal <= nextList.length;
+		} else {
+			const result = await SalesOrderAPI.list(buildPageFilter());
+			if (requestId !== listRequestId) {
+				return;
+			}
+			const rows = result.list || [];
+			list.value = reset ? rows : list.value.concat(rows);
+			total.value = result.total || 0;
+			pageIndex.value += 1;
+			noMore.value = rows.length < pageSize || total.value <= list.value.length;
+		}
+		if (preserveScrollTop !== undefined) {
+			requestAnimationFrame(() => {
+				const page = getSalesOrderPage();
+				if (page) {
+					page.scrollTop = preserveScrollTop;
+				}
+			});
 		}
-		const rows = result.list || [];
-		list.value = reset ? rows : list.value.concat(rows);
-		total.value = result.total || 0;
-		pageIndex.value += 1;
-		noMore.value = rows.length < pageSize || total.value <= list.value.length;
 	} finally {
 		if (requestId === listRequestId) {
 			loading.value = false;
@@ -452,9 +504,35 @@ async function fetchList(reset: boolean): Promise<void> {
 	}
 }
 
-async function reloadList(): Promise<void> {
+async function reloadList(preserveScroll = false): Promise<void> {
 	await customerOrderSummaryRef.value?.refresh();
-	await fetchList(true);
+	await fetchList(true, preserveScroll);
+}
+
+function startEventRefresh(): void {
+	if (isDisposed) {
+		return;
+	}
+	eventRefreshPromise = reloadList(true)
+		.catch(error => Message.error(getErrorMessage(error, "销售订单加载失败")))
+		.finally(() => {
+			eventRefreshPromise = undefined;
+			if (!isDisposed && hasPendingEventRefresh) {
+				hasPendingEventRefresh = false;
+				startEventRefresh();
+			}
+		});
+}
+
+function requestEventRefresh(payload?: ListDataChangedPayload): void {
+	if (!isCurrentStoreEvent(payload)) {
+		return;
+	}
+	if (eventRefreshPromise) {
+		hasPendingEventRefresh = true;
+		return;
+	}
+	startEventRefresh();
 }
 
 async function refresh(): Promise<void> {
@@ -499,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> {
@@ -550,6 +642,7 @@ watch(routeFilterKey, async value => {
 		return;
 	}
 	lastAppliedRouteFilterKey = value;
+	syncCachedRouteContext();
 	applyRouteFilters();
 	try {
 		await loadRouteCustomer();
@@ -574,6 +667,8 @@ watch(() => currentStoreStore.currentStoreId, async (value, oldValue) => {
 });
 
 onMounted(async () => {
+	unregisterSalesOrderListEvent = events.register(listDataEventKeys.salesOrderChanged, (payload: ListDataChangedPayload) => requestEventRefresh(payload));
+	syncCachedRouteContext();
 	navBarStore.clearRight();
 	navBarStore.setCustomRightVisible(!!actions.value.length);
 	applyRouteFilters();
@@ -589,6 +684,7 @@ onMounted(async () => {
 });
 
 onActivated(async () => {
+	syncCachedRouteContext();
 	if (shouldReloadOnActivate) {
 		shouldReloadOnActivate = false;
 		applyRouteFilters();
@@ -625,6 +721,9 @@ onBeforeRouteLeave(to => {
 });
 
 onUnmounted(() => {
+	isDisposed = true;
+	unregisterSalesOrderListEvent?.();
+	unregisterSalesOrderListEvent = undefined;
 	navBarStore.clearRight();
 	search.cancel();
 });
@@ -641,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/SalesOrderNoRefund.vue

@@ -14,6 +14,7 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { SalesOrder } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -33,6 +34,7 @@ async function save(): Promise<void> {
 	saving.value = true;
 	try {
 		await SalesOrderAPI.confirmNoRefund({ salesOrderId: order.value.id, reason: reason.value.trim() });
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, order.value.id);
 		Message.success("已确认无需退款");
 		await router.replace(`/management/sales-orders/${order.value.id}`);
 	} catch (error) { Message.error(getErrorMessage(error, "确认失败，请刷新后重试")); }

src/pages/salesOrder/SalesOrderPayment.vue

@@ -101,6 +101,7 @@ import type { SalesOrder } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
 import { createPackageRequestNo, formatPackageAmount, formatPackageAmountInput, parsePackageAmount } from "@/utils/package";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { uploadPhotoList } from "@/utils/photo";
@@ -201,6 +202,7 @@ async function save(): Promise<void> {
 		const record = directVerify.value
 			? await SalesOrderAPI.receivePaymentAndVerify(request)
 			: await SalesOrderAPI.receivePayment(request);
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, order.value.id);
 		Message.success(directVerify.value ? "收款登记并核销成功" : "收款登记已提交");
 		await router.replace(record.id && userStore.hasPermissions(permissionCodes.fundReceive.create)
 			? `/management/fund-records/${record.id}`

src/pages/salesOrder/SalesOrderRefund.vue

@@ -123,6 +123,7 @@ import type { SalesOrder } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
 import { createPackageRequestNo, formatPackageAmount, formatPackageAmountInput, parsePackageAmount } from "@/utils/package";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { uploadPhotoList } from "@/utils/photo";
@@ -239,6 +240,7 @@ async function save(): Promise<void> {
 			attachmentList,
 			remark: remark.value.trim() || null
 		});
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, order.value.id);
 		Message.success("退款登记已提交");
 		await router.replace(`/management/sales-orders/${order.value.id}`);
 	} catch (error) {

src/pages/salesOrder/components/SalesOrderListCell.vue

@@ -233,7 +233,7 @@ function getProductText(item: NonNullable<SalesOrder["itemList"]>[number]): stri
 	const quantity = getPackageQuantityText(item.quantity);
 	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
 	const giftText = item.gifted ? "赠送 · " : "";
-	return `${giftText}${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+	return `${giftText}${item.productNameSnapshot || "未命名产品"}${skuText ? `（${skuText}）` : " "}${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
 }
 </script>
 

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

@@ -1,7 +1,7 @@
 <template>
 	<div class="about-page">
 		<section class="brand" v-entrance-transition>
-			<logo />
+			<logo @click="handleLogoClick" />
 			<h1 v-text="appName" />
 			<p v-text="appDescription" />
 		</section>
@@ -37,6 +37,7 @@ import { SettingAPI } from "timi-web-api";
 import Logo from "@/pages/user/component/Logo.vue";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
+import { toggleVConsole } from "@/utils/vConsole";
 
 type AgreementItem = {
 	icon: string;
@@ -55,6 +56,30 @@ const router = useRouter();
 const agreementItemList = ref<AgreementItem[]>([]);
 const isLoading = ref(false);
 
+let debugClickCount = 0;
+let debugClickTimer: number | undefined;
+
+async function handleLogoClick(): Promise<void> {
+	debugClickCount++;
+	if (debugClickTimer !== undefined) {
+		window.clearTimeout(debugClickTimer);
+	}
+	debugClickTimer = window.setTimeout(() => {
+		debugClickCount = 0;
+		debugClickTimer = undefined;
+	}, 1_500);
+
+	if (debugClickCount < 5) {
+		return;
+	}
+
+	debugClickCount = 0;
+	window.clearTimeout(debugClickTimer);
+	debugClickTimer = undefined;
+
+	await toggleVConsole();
+}
+
 async function openAgreement(item: AgreementItem): Promise<void> {
 	await router.push({
 		name: "Agreement",

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,10 +15,16 @@
 			<store-event-structure-chart v-entrance-transition="280" :date-text-list="dateTextList" />
 		</template>
 		<template v-else>
-			<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 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/StoreDiaryEdit.vue

@@ -91,6 +91,7 @@ import { compressUploadImage, compressUploadImageList } from "@/utils/imageCompr
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { saveCapturedFilesFromInput } from "@/utils/twaBridge";
 
 defineOptions({
 	name: "StoreDiaryEdit"
@@ -180,6 +181,7 @@ async function handlePhotoSelected(event: Event): Promise<void> {
 	if (!fileList.length) {
 		return;
 	}
+	saveCapturedFilesFromInput(input, fileList);
 
 	isPhotoUploading.value = true;
 	try {

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>