add ProductStockPackageSummary.vue

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/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/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">
+	<bottom-popup
-		<div class="tag-selector bg-white">
+		v-model="popupVisible"
-			<div class="title-bar">
+		title="选择标签"
-				<t-button variant="text" size="small" @click="cancelSelection">取消</t-button>
+		height="78vh"
-				<h3 class="title">选择标签</h3>
+		left-button-text="取消"
-				<t-button theme="primary" variant="text" size="small" @click="confirmSelection">确定</t-button>
+		right-button-text="确定"
-			</div>
+		@left-button-click="cancelSelection"
-			<div class="search-row">
+		@right-button-click="confirmSelection"
+	>
+		<div class="tag-selector">
+			<div class="filters glass">
 				<t-input
 					class="input"
 					size="small"
-					v-model.trim="keyword"
+					v-model="keyword"
 					borderless
 					clearable
 					placeholder="搜索标签"
@@ -19,7 +22,7 @@
 					<t-input
 						class="input"
 						size="small"
-						v-model.trim="newTagName"
+						v-model="newTagName"
 						borderless
 						clearable
 						placeholder="新增标签名称"
@@ -29,10 +32,12 @@
 						size="small"
 						:loading="isCreating"
 						:disabled="isCreating"
+						content="新增"
 						@click="createTag"
-					>新增</t-button>
+					/>
 				</template>
 			</div>
+			<div class="list-wrap">
 				<div class="list">
 					<t-tag
 						v-for="(item, index) in visibleTagList"
@@ -46,13 +51,15 @@
 					>
 						<span v-text="getTagName(item)" />
 					</t-tag>
-				<div v-if="!visibleTagList.length" class="empty" v-text="emptyText" />
+					<div v-if="!visibleTagList.length" class="center-tips" v-text="emptyText" />
 				</div>
 			</div>
-	</t-popup>
+		</div>
+	</bottom-popup>
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
 import { Message } from "@/utils/message";
 import { useUserStore } from "timi-web-api";
 import TagAPI from "@/api/TagAPI";
@@ -198,33 +205,20 @@ watch(() => props.visible, async (value) => {
 
 <style scoped lang="less">
 .tag-selector {
-	display: flex;
+	height: 100%;
-	height: 78vh;
+	overflow: auto;
-	padding-top: 1rem;
+	min-height: 0;
-	border-radius: 1.25rem 1.25rem 0 0;
-	flex-direction: column;
 
-	.title-bar {
+	.filters {
-		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 {
 		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) {
+:global(.bottom-popup:has(.tag-selector) .body) {
-	.tag-selector {
+	overflow: hidden;
-		background: rgba(15, 23, 42, .96);
-
-		.empty {
-			color: #94a3b8;
-		}
-	}
 }
 </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/MediaSelectorViewer.vue

@@ -3,6 +3,7 @@
 	<t-image-viewer
 		v-model:visible="viewerVisible"
 		:images="images"
+		:style="{ zIndex: props.viewerZIndex }"
 		show-index
 		@close="handleClose"
 		@index-change="handleIndexChange"
@@ -103,6 +104,7 @@ interface Props {
 	showActions: boolean;
 	submitting: boolean;
 	visible: boolean;
+	viewerZIndex?: number;
 }
 
 const props = defineProps<Props>();
@@ -203,12 +205,10 @@ function removeCurrentPhoto(): void {
 
 		.type {
 			display: flex;
-			justify-content: start;
+			align-items: start;
+			margin-left: 1.5rem;
 			flex-direction: column;
-
+			justify-content: start;
-			.button {
-				text-indent: 1.5em;
-			}
 		}
 
 		.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>
+function startNewConversation(): void {
-	<div v-if="canUseAi" class="ai-chat-page">
+	conversationResetToken.value += 1;
-		<ai-chat-panel
+}
-			:store-name="currentStoreStore.currentStoreName"
+</script>
-			:session-key="sessionKey"
-			:store-id="aiStoreId"
-		/>
-	</div>
-	<t-empty v-else description="当前账号无权使用门店智能助手" />
-</template>
 
 <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) {
+	--ai-msg-padding-top: calc(var(--app-nav-height) + 1rem);
-		padding-top: var(--app-nav-height);
-	}
 
 	: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
+	<div v-can="permissionCodes.customer.read" class="customer-invite-rank">
-		v-can="permissionCodes.customer.read"
-		class="customer-invite-rank"
-	>
 		<t-pull-down-refresh
 			class="list-wrapper"
 			v-model="isRefreshing"

src/pages/customer/CustomerList.vue

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

src/pages/event/EventRecordList.vue

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

src/pages/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,34 +41,17 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
-			class="list-wrap"
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
 			@refresh="refresh"
 			@scrolltolower="fetch"
 		>
+			<div class="list-wrap">
+				<customer-profile-card class="customer" :customer="selectedCustomer" />
 				<t-cell-group class="summary" theme="card">
 					<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
 					<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
-				<t-cell v-if="selectedCustomer || selectedResponsibleId" title="筛选条件">
+					<t-cell v-if="selectedResponsibleId" title="负责人" :note="selectedResponsibleName" />
-					<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
@@ -149,6 +132,7 @@
 					</t-swipe-cell>
 				</t-cell-group>
 				<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
+			</div>
 		</t-pull-down-refresh>
 		<customer-selector
 			v-model="selectedCustomerId"
@@ -204,11 +188,7 @@ import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
 import type { ManagedUser } from "@/types/ManagedUser";
-import type {
+import type { FollowUpReminder, FollowUpReminderPage, FollowUpReminderStatus } from "@/types/FollowUpReminder";
-	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);
+			border: 1px solid var(--td-component-border);
-			z-index: -1;
 			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 {
+		.customer {
-			margin-bottom: 1rem;
+			margin: 0 1rem;
 		}
 
 		.items {

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -81,13 +81,23 @@
 		<div v-else class="empty" v-text="'暂无可履约明细，请返回订单详情检查'" />
 		<t-form class="form" label-width="7rem">
 			<t-form-item label="履约时间" content-align="right">
+				<div class="time-actions">
 					<t-button
 						theme="primary"
 						variant="outline"
 						size="extra-small"
 						:content="deliveredAtText || '此刻'"
-					@click="pickerVisible = true"
+						@click="openDeliveredAtPicker"
 					/>
+					<t-button
+						v-if="deliveredAtText"
+						theme="primary"
+						variant="text"
+						size="extra-small"
+						content="此刻"
+						@click="resetDeliveredAt"
+					/>
+				</div>
 			</t-form-item>
 			<t-form-item v-if="canDirectVerify" label="直接核销履约" content-align="right">
 				<t-switch v-model="directVerify" size="small" :disabled="isSaving || isStockChecking" />
@@ -114,7 +124,15 @@
 			</t-form-item>
 		</t-form>
 		<t-popup v-model="pickerVisible" placement="bottom">
-			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="履约时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
+			<t-date-time-picker
+				v-if="pickerVisible"
+				v-model="draftTime"
+				format="YYYY-MM-DD HH:mm"
+				:mode="['date', 'minute']"
+				title="履约时间"
+				@cancel="pickerVisible = false"
+				@confirm="confirmTime"
+			/>
 		</t-popup>
 		<t-popup v-model="unitPickerVisible" placement="bottom">
 			<t-picker v-model="unitPickerDraft" :columns="unitPickerOptions" title="选择实际履约单位" @cancel="unitPickerVisible = false" @confirm="confirmUnitPicker" />
@@ -126,6 +144,7 @@
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import ProductAPI from "@/api/ProductAPI";
+import { Time } from "timi-web";
 import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductSkuTags from "@/components/ProductSkuTags.vue";
 import ProductStockPreview from "@/components/ProductStockPreview.vue";
@@ -373,6 +392,16 @@ function confirmTime(value: string | number): void {
 	pickerVisible.value = false;
 }
 
+function openDeliveredAtPicker(): void {
+	draftTime.value = deliveredAtText.value || Time.formatDateTime(new Date());
+	pickerVisible.value = true;
+}
+
+function resetDeliveredAt(): void {
+	deliveredAtText.value = "";
+	draftTime.value = "";
+}
+
 function resolveTimestamp(value: string): number | undefined {
 	if (!value) return undefined;
 	const timestamp = new Date(value.replace(" ", "T")).getTime();
@@ -663,6 +692,13 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
+	.time-actions {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
 	.tips {
 		font-size: .875rem;
 	}

src/pages/fulfillment/OrderFulfillmentList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.orderFulfillment.read" class="fulfillment-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				class="customer"
 				v-model.trim="customerSearchKeyword"
@@ -31,13 +31,18 @@
 					</div>
 				</template>
 			</t-input>
-			<t-dropdown-menu class="menus">
+			<t-dropdown-menu ref="filterMenuRef" class="menus">
 				<t-dropdown-item
 					v-model="dateFilterType"
 					:label="dateFilterLabel"
 					:options="dateOptions"
 					@change="selectDateFilter"
 				/>
+				<t-dropdown-item
+					:label="skuFilterLabel"
+					:options="[]"
+					@open="openSkuFilter"
+				/>
 				<t-dropdown-item
 					v-model="status"
 					label="履约状态"
@@ -53,7 +58,8 @@
 			@scrolltolower="loadMore"
 		>
 			<div class="list-wrap">
-				<t-cell-group v-if="salesOrder" class="order-info" theme="card">
+				<t-cell-group v-if="salesOrder || selectedSkuOptionList.length" class="filter-info" theme="card">
+					<template v-if="salesOrder">
 						<t-cell title="订单号" :note="salesOrder.orderNo || salesOrder.id || '未知订单'" />
 						<t-cell title="订单类型" :note="getSalesOrderTypeText(salesOrder.orderType)" />
 						<t-cell title="订单状态">
@@ -65,6 +71,21 @@
 								/>
 							</template>
 						</t-cell>
+					</template>
+					<t-cell v-if="selectedSkuOptionList.length" class="sku-filter-cell" title="已筛选 SKU">
+						<template #note>
+							<div class="selected-sku-list">
+								<t-tag
+									v-for="sku in selectedSkuOptionList"
+									:key="sku.skuId"
+									size="small"
+									theme="primary"
+									variant="outline"
+									:content="formatSelectedSkuName(sku.productName, sku.skuName)"
+								/>
+							</div>
+						</template>
+					</t-cell>
 				</t-cell-group>
 				<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
 					<t-cell
@@ -96,6 +117,12 @@
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu v-if="canCreate" :actions="actions" />
+	<sku-filter-popup
+		v-model="skuFilterVisible"
+		:sku-id-list="selectedSkuIdList"
+		@options-loaded="handleSkuFilterOptionsLoaded"
+		@confirm="confirmSkuFilter"
+	/>
 	<customer-selector
 		v-model="customerId"
 		v-model:visible="customerSelectorVisible"
@@ -137,6 +164,7 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
 import OrderFulfillmentListCell from "@/pages/fulfillment/components/OrderFulfillmentListCell.vue";
+import SkuFilterPopup from "@/pages/fulfillment/components/SkuFilterPopup.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoFulfillmentStatus, OrderFulfillment } from "@/types/Fulfillment";
 import type { NavBarAction } from "@/types/NavBarAction";
@@ -152,6 +180,7 @@ defineOptions({ name: "OrderFulfillmentList" });
 
 const route = useRoute();
 const router = useRouter();
+const filterMenuRef = ref<{ collapseMenu: () => void }>();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
@@ -172,6 +201,7 @@ const actions = computed<NavBarAction[]>(() => [
 	}
 ]);
 type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type SkuFilterOption = { skuId: string; productName: string; skuName: string };
 const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
@@ -183,11 +213,14 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 ];
 
 const customerId = ref(getQueryText(route.query.customerId));
+const selectedSkuIdList = ref(getSkuIdList(route.query.skuIds));
 const selectedCustomer = ref<Customer>();
 const salesOrder = ref<SalesOrder>();
+const skuFilterOptionList = ref<SkuFilterOption[]>([]);
+const skuFilterVisible = ref(false);
 const customerSelectorVisible = ref(false);
 const customerSearchKeyword = ref("");
-const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "today"));
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "all"));
 const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
 const startDraft = ref("");
 const endDraft = ref("");
@@ -211,12 +244,27 @@ const statusOptions = [
 	{ label: "已冲正", value: "REVOKED" }
 ];
 const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const selectedSkuOptionList = computed(() => {
+	const optionMap = new Map(skuFilterOptionList.value.map(option => [option.skuId, option]));
+	return selectedSkuIdList.value
+		.map(skuId => optionMap.get(skuId))
+		.filter((option): option is SkuFilterOption => !!option);
+});
+const skuFilterLabel = computed(() => selectedSkuIdList.value.length ? `SKU (${selectedSkuIdList.value.length})` : "产品 SKU");
 const isCustomDate = computed(() => dateFilterType.value === "custom");
 
 function getQueryText(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }
 
+function getSkuIdList(value: unknown): string[] {
+	const queryValueList = Array.isArray(value) ? value : [value];
+	return [...new Set(queryValueList
+		.flatMap(item => typeof item === "string" ? item.split(",") : [])
+		.map(item => item.trim())
+		.filter(Boolean))];
+}
+
 function getInitialStatus(value: unknown): "ALL" | GaoFulfillmentStatus {
 	const statusValue = getQueryText(value);
 	if (["WAITING_STOCK", "PENDING", "VERIFIED", "REJECTED", "CANCELLED", "REVOKED"].includes(statusValue)) {
@@ -250,6 +298,7 @@ async function fetchList(reset: boolean): Promise<void> {
 			size: pageSize,
 			salesOrderId: getQueryText(route.query.salesOrderId) || undefined,
 			customerId: customerId.value || undefined,
+			skuIdList: selectedSkuIdList.value.length ? selectedSkuIdList.value : undefined,
 			beginAt,
 			endAt,
 			status: status.value === "ALL" ? undefined : status.value
@@ -297,6 +346,29 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	}
 }
 
+async function openSkuFilter(): Promise<void> {
+	skuFilterVisible.value = true;
+	await nextTick();
+	filterMenuRef.value?.collapseMenu();
+}
+
+function handleSkuFilterOptionsLoaded(optionList: SkuFilterOption[]): void {
+	skuFilterOptionList.value = optionList;
+}
+
+async function confirmSkuFilter(skuIdList: string[]): Promise<void> {
+	selectedSkuIdList.value = skuIdList;
+	await replaceFilterQuery();
+	await reloadList();
+}
+
+function formatSelectedSkuName(productName: string, skuName: string) {
+	if (productName === skuName) {
+		return productName;
+	}
+	return `${productName}（${skuName}）`;
+}
+
 async function handleCustomerChange(value: string | string[]): Promise<void> {
 	customerId.value = Array.isArray(value) ? String(value[0] || "") : value;
 	try {
@@ -417,6 +489,7 @@ function buildFilterQuery(transitionDepth = getQueryText(route.query.transitionD
 	const query = {
 		salesOrderId: getQueryText(route.query.salesOrderId),
 		customerId: customerId.value,
+		skuIds: selectedSkuIdList.value.join(","),
 		dateType: dateFilterType.value,
 		beginAt: dateRange.value[0] || "",
 		endAt: dateRange.value[1] || "",
@@ -517,8 +590,6 @@ onUnmounted(() => navBarStore.clearRight());
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -526,7 +597,7 @@ onUnmounted(() => navBarStore.clearRight());
 
 			width: 100%;
 			border: 1px solid var(--td-component-border);
-			background: var(--td-bg-color-container);
+			z-index: 1;
 			padding-right: .3rem;
 			border-radius: 1rem;
 
@@ -543,11 +614,9 @@ onUnmounted(() => navBarStore.clearRight());
 			--td-spacer-1: 6px;
 
 			width: 100%;
-			border: 1px solid rgba(148, 163, 184, .18);
+			border: 1px solid var(--td-component-border);
-			z-index: -1;
 			overflow: hidden;
 			margin-top: -1rem;
-			background: #fff;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;
@@ -558,9 +627,44 @@ onUnmounted(() => navBarStore.clearRight());
 	.list-wrap {
 		gap: 1rem;
 		display: flex;
-		padding-top: 1rem;
 		flex-direction: column;
 
+		.filter-info {
+			.selected-sku-list {
+				gap: .4rem;
+				width: 100%;
+				display: flex;
+				min-width: 0;
+				max-width: 100%;
+				overflow-x: auto;
+				justify-content: flex-start;
+				white-space: nowrap;
+				touch-action: pan-x;
+				scrollbar-width: none;
+				-webkit-overflow-scrolling: touch;
+
+				&::-webkit-scrollbar {
+					display: none;
+				}
+
+				:deep(.t-tag) {
+					flex: none;
+				}
+			}
+
+			.sku-filter-cell {
+				:deep(.t-cell__title) {
+					flex: 0 0 5rem;
+				}
+
+				:deep(.t-cell__note) {
+					flex: 1 1 0;
+					min-width: 0;
+					overflow: hidden;
+				}
+			}
+		}
+
 		.date-summary {
 
 			:deep(.t-cell__title) {

src/pages/fulfillment/components/SkuFilterPopup.vue

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

src/pages/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"
@@ -217,16 +217,14 @@ onUnmounted(() => {
 	padding: var(--app-nav-height) 0 1rem;
 
 	.filters {
+		gap: .5rem;
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
 		z-index: 10;
-		gap: .5rem;
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.keyword {
 			--td-input-vertical-padding: .25rem 1rem;
@@ -234,7 +232,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -246,10 +243,6 @@ onUnmounted(() => {
 			margin-left: -2rem;
 			padding-left: 2rem;
 			border-radius: 1rem;
-
-			&:after {
-				display: none;
-			}
 		}
 	}
 

src/pages/package/PackageOrderConfigList.vue

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

src/pages/permission/PermissionSettings.vue

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

src/pages/permission/RoleDelegationPermissionAssign.vue

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

src/pages/permission/RoleEdit.vue

@@ -330,7 +330,7 @@ async function fillForm(): Promise<void> {
 	await permissionStore.loadAll();
 	await loadAuthorizationScope();
 	if (isCreateMode.value) {
-		parentRoleOptions.value = await permissionStore.loadCreateParentGrantableRoles();
+		parentRoleOptions.value = filterStoreParentRoles(await permissionStore.loadCreateParentGrantableRoles());
 		formModel.parentRoleId = parentRoleOptions.value[0]?.id || "";
 		return;
 	}
@@ -355,30 +355,38 @@ async function reloadCurrentRole(): Promise<void> {
 		childRoleIdList
 	});
 	parentRoleOptions.value = canEditParentRole.value
-		? await permissionStore.loadParentGrantableRoles(current.id)
+		? filterStoreParentRoles(await permissionStore.loadParentGrantableRoles(current.id))
 		: [];
-	if (current.parentRole?.id && !parentRoleOptions.value.some(item => item.id === current.parentRoleId)) {
+	const currentParent = current.parentRole;
+	const canKeepCurrentParent = isSystemAdmin.value || Boolean(currentParent && (
+		currentParent.moduleCode === moduleCode && currentParent.code === "STORE_MANAGER"
+		|| permissionStore.roleList.some(item => item.id === currentParent.id)
+	));
+	if (currentParent?.id && canKeepCurrentParent && !parentRoleOptions.value.some(item => item.id === current.parentRoleId)) {
 		parentRoleOptions.value.unshift({
-			...current.parentRole,
+			...currentParent,
-			id: current.parentRole.id,
+			id: currentParent.id,
-			permissionIdList: current.parentRole.permissionIdList || current.parentRole.permissionList?.map(item => item.id) || [],
+			permissionIdList: currentParent.permissionIdList || currentParent.permissionList?.map(item => item.id) || [],
-			childRoleIdList: current.parentRole.childRoleIdList || current.parentRole.childRoleList?.map(item => item.id).filter((id): id is string => Boolean(id)) || [],
+			childRoleIdList: currentParent.childRoleIdList || currentParent.childRoleList?.map(item => item.id).filter((id): id is string => Boolean(id)) || [],
-			delegationPermissionIdList: current.parentRole.delegationPermissionIdList || current.parentRole.delegationPermissionList?.map(item => item.id) || []
+			delegationPermissionIdList: currentParent.delegationPermissionIdList || currentParent.delegationPermissionList?.map(item => item.id) || []
 		});
 	}
 }
 
-async function loadAuthorizationScope(): Promise<void> {
+/** 限制门店角色可选择的管理父级。 */
-	candidateRoleList.value = isSystemAdmin.value ? permissionStore.roleList : await permissionStore.loadManageableRoles();
+function filterStoreParentRoles(roleList: Role[]): Role[] {
-	inheritanceRoleList.value = mergeRoleList(permissionStore.roleList, candidateRoleList.value);
+	if (isSystemAdmin.value) {
+		return roleList;
 	}
 
-function mergeRoleList(...roleLists: Role[][]): Role[] {
+	const storeRoleIdSet = new Set(permissionStore.roleList.map(item => item.id));
-	const roleMap = new Map<string, Role>();
+	return roleList.filter(role => storeRoleIdSet.has(role.id)
-	for (const role of roleLists.flat()) {
+		|| (role.moduleCode === moduleCode && role.code === "STORE_MANAGER"));
-		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);
+	return userStore.hasRoles(coreRoleCodes.admin) ? "系统角色" : role.ownerType === "STORE" ? "本店角色" : "可管理角色";
-	const manageable = deletableRoleIdSet.value.has(role.id);
-	if (direct && manageable) {
-		return "直属且可管理";
-	}
-	return direct ? "直属角色" : "可管理角色";
 }
 
 // ---------- 页面数据 ----------
@@ -121,9 +117,7 @@ onMounted(async () => {
 	if (canCreateRole.value) {
 		navBarStore.setRightText("添加", "var(--td-brand-color)", toCreate);
 	}
-	if (userStore.hasRoles(coreRoleCodes.admin)) {
 	await permissionStore.loadAll();
-	}
 	await refreshAuthorizationScope();
 	if (!displayRoleList.value.length) {
 		displayRoleList.value = getDisplayRoleList();
@@ -163,23 +157,8 @@ async function refreshAuthorizationScope(): Promise<void> {
 		deletableRoleIdSet.value = new Set(permissionStore.roleList.map(item => item.id));
 		return;
 	}
-
+	displayRoleList.value = permissionStore.roleList;
-	try {
+	deletableRoleIdSet.value = new Set(permissionStore.roleList.map(item => item.id));
-		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>();
-	}
 }
 
 </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);
+			border: 1px solid var(--td-component-border);
-			z-index: -1;
 			overflow: hidden;
 			margin-top: -1rem;
 			border-top: none;

src/pages/point/PointRedeemSkuList.vue

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

src/pages/point/PointRedemptionList.vue

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

src/pages/product/ProductCategoryList.vue

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

src/pages/product/ProductDetail.vue

@@ -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">
@@ -156,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 => ({
@@ -181,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;
 });
@@ -268,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"
@@ -226,6 +227,7 @@ 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;
 
@@ -305,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>();
 
@@ -325,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",
@@ -343,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
 	};
 }
@@ -353,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
+		}))
 	};
 }
 
@@ -384,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] = "";
 }
 
@@ -416,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;
 }
 
@@ -425,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,
@@ -442,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 统一配置销售单位`);
 }
@@ -451,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;
 	}
@@ -462,7 +477,7 @@ function removeSku(index: number): void {
 	}
 	form.skuList.splice(index, 1);
 	if (sku.id) {
-		Message.success("SKU 已移除，保存后将停用");
+		Message.success("SKU 已移除，保存后由后端检查引用并处理");
 	}
 }
 
@@ -647,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];
@@ -865,7 +881,7 @@ function validate(): boolean {
 			return false;
 		}
 	}
-	if (!form.skuList.length) {
+	if (isCreateMode.value && !form.skuList.length) {
 		Message.warning("至少需要一个 SKU");
 		return false;
 	}
@@ -927,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;
 }
@@ -956,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
 	};
 }
 
@@ -971,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 => ({
+		specList: includeSpecList ? form.specList.map((spec, specIndex) => ({
-			...spec,
+			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
 	};
@@ -985,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;
 			}
 		}
 	}
@@ -1016,23 +1068,17 @@ async function save(): Promise<void> {
 		await syncSpecs(productId!);
 		normalizeSkuSpecValueIds();
 		const latest = await ProductAPI.detail(productId!);
-		const previousSkuIdSet = new Set((latest.skuList || []).map(sku => sku.id).filter((id): id is string => !!id));
 		if (form.specList.length) {
 			const defaultSku = latest.skuList?.find(sku => !sku.specValueIdList?.length);
 			if (defaultSku?.id && form.skuList[0] && !form.skuList[0].id) {
 				form.skuList[0].id = defaultSku.id;
 			}
 			generateSkuList(latest.skuList || [], true);
-		} else if (!form.skuList.length) {
+		} else if (form.skuList[0] && !form.skuList[0].id && latest.skuList?.[0]) {
-			form.skuList = [createSku(latest.skuList?.[0])];
-		} else if (!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 ? "产品已创建" : "产品已保存");
@@ -1175,6 +1221,10 @@ onUnmounted(() => navBarStore.clearRight());
 			gap: .5rem;
 			display: flex;
 			flex-wrap: wrap;
+
+			.value-name {
+				width: 5rem;
+			}
 		}
 		}
 

src/pages/product/ProductList.vue

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

src/pages/product/ProductStockDetail.vue

@@ -55,8 +55,9 @@
 						</div>
 					</template>
 				</t-cell>
-				<t-cell v-if="0 < Number(stock.reservedQuantity || 0)" title="查看预占流水" arrow @click="openReservedRecordList" />
+				<product-stock-package-summary :sku="sku" :stock="stock" />
-				<t-cell title="查看该产品 SKU 流水" arrow @click="openRecordList" />
+				<t-cell title="查看库存流水" arrow @click="openRecordList" />
+				<t-cell v-if="0 < Number(stock.reservedQuantity || 0)" title="查看库存预占流水" arrow @click="openReservedRecordList" />
 			</t-cell-group>
 			<card-container
 				v-if="canOperate && sku?.status === 'ACTIVE' && sku.stockEnabled"
@@ -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"
@@ -161,7 +160,7 @@ async function fetch(reset = false, preserveScroll = false): Promise<void> {
 				const result = await ProductAPI.stockProductList({
 					index,
 					size: pageSize,
-					keyword: keyword.value || undefined
+					keyword: keyword.value.trim() || undefined
 				});
 				if (token !== requestToken) {
 					return;
@@ -182,7 +181,7 @@ async function fetch(reset = false, preserveScroll = false): Promise<void> {
 			const result = await ProductAPI.stockProductList({
 				index: pageIndex.value,
 				size: pageSize,
-				keyword: keyword.value || undefined
+				keyword: keyword.value.trim() || undefined
 			});
 			if (token !== requestToken) {
 				return;
@@ -256,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 },
@@ -314,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;
 		}
 	}
@@ -334,7 +338,6 @@ onUnmounted(() => {
 		min-height: 70vh;
 
 		.list {
-			padding-top: .75rem;
 
 			.item {
 				padding: 10px;

src/pages/product/ProductStockRecordDetail.vue

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

src/pages/product/ProductStockRecordList.vue

@@ -1,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
-				<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="selectDateFilter"
+				/>
+				<t-dropdown-item v-model="operationType" :label="operationFilterLabel" :options="operationOptions" @change="selectOperationType" />
+				<t-dropdown-item v-model="direction" :label="directionFilterLabel" :options="directionOptions" @change="selectDirection" />
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
@@ -20,6 +26,52 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
+			<div class="list-wrap">
+				<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
+					<t-cell
+						title="开始时间"
+						:note="dateRange[0] || '-'"
+						arrow
+						@click="openStartTime"
+					/>
+					<t-cell
+						title="结束时间"
+						:note="dateRange[1] || '-'"
+						arrow
+						@click="openEndTime"
+					/>
+				</t-cell-group>
+				<t-cell-group v-if="filteredProduct && filteredSku" theme="card">
+					<t-cell class="sku">
+						<template #leftIcon>
+							<t-image
+								v-if="filteredSkuPhotoURL"
+								class="avatar"
+								:src="filteredSkuPhotoURL"
+								:alt="filteredProduct.name || '产品图片'"
+								fit="cover"
+							/>
+							<div
+								v-else
+								class="fallback"
+								v-text="(filteredProduct.name || filteredProduct.code || '产').slice(0, 1)"
+							/>
+						</template>
+						<template #title>
+							<div class="title">
+								<strong class="text-bold clip-text" v-text="filteredProduct.name || '未命名产品'" />
+								<span class="clip-text" v-text="filteredSku.specSummary || filteredSku.name || '默认 SKU'" />
+							</div>
+						</template>
+						<template #note>
+							<t-tag
+								variant="light-outline"
+								theme="primary"
+								:content="getProductTypeText(filteredProduct.productType)"
+							/>
+						</template>
+					</t-cell>
+				</t-cell-group>
 				<t-cell-group v-if="recordList.length" class="list empty-cell-title-margin" theme="card">
 					<t-cell
 						v-for="(record, index) in recordList"
@@ -58,8 +110,13 @@
 							<div class="title">
 								<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
 								<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
-							<strong class="operation" v-text="getStockOperationText(record.operationType)" />
+								<strong class="operation" :class="getOperationClass(record.operationType)" v-text="getStockOperationText(record.operationType)" />
-							<strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" />
+								<strong class="product-name clip-text" v-text="record.productNameSnapshot || '未命名产品'" />
+								<t-tag
+									v-if="record.productNameSnapshot !== record.skuNameSnapshot"
+									size="small"
+									:content="record.skuNameSnapshot"
+								/>
 								<span
 									v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
 									class="quantity"
@@ -84,19 +141,45 @@
 				</t-cell-group>
 				<div v-else class="center-tips" v-text="emptyText" />
 				<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
+			</div>
 		</t-pull-down-refresh>
 	</div>
+	<t-popup v-model="startVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="startVisible"
+			v-model="startDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="开始时间"
+			:default-value="dateRange[0]"
+			@cancel="cancelStartTime"
+			@confirm="confirmStartTime"
+		/>
+	</t-popup>
+	<t-popup v-model="endVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="endVisible"
+			v-model="endDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="结束时间"
+			:default-value="dateRange[1]"
+			@cancel="cancelEndTime"
+			@confirm="confirmEndTime"
+		/>
+	</t-popup>
 </template>
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
-import { PassTimeLabel } from "timi-web";
+import { PassTimeLabel, Time } from "timi-web";
 import { UserAPI } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
+import type { Product, ProductSku, StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
+import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
-import { getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { getProductPhotoURL, getProductQuantityText, getProductTypeText, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { getCustomerPhotoURL } from "@/utils/customer";
@@ -104,6 +187,7 @@ import { buildFallbackAvatar } from "@/utils/avatar";
 
 defineOptions({ name: "ProductStockRecordList" });
 
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 type OperationFilter = "ALL" | StockOperationType;
 type DirectionFilter = "ALL" | StockRecordDirection;
 
@@ -118,13 +202,36 @@ const loading = ref(false);
 const isRefreshing = ref(false);
 const noMore = ref(false);
 const productId = computed(() => getQueryText("productId"));
+const skuId = computed(() => getQueryText("skuId"));
+const filteredProduct = ref<Product>();
+const filteredSku = ref<ProductSku>();
+const filteredSkuUnitId = ref("");
+const filteredSkuUnitList = computed(() => (filteredSku.value?.unitList || []).filter(unit => !!unit.id));
+const filteredSkuPhotoURL = computed(() => filteredSku.value ? getProductPhotoURL(filteredSku.value) || (filteredProduct.value ? getProductPhotoURL(filteredProduct.value) : "") : "");
 const activeReservationRequested = getQueryText("activeReservationOnly") === "true";
 const operationType = ref<OperationFilter>(getQueryText("operationType") as OperationFilter || (activeReservationRequested ? "ORDER_RESERVE" : "ALL"));
 const direction = ref<DirectionFilter>(getQueryText("direction") as DirectionFilter || "ALL");
 const keyword = ref(getQueryText("keyword"));
+const dateOptions: Array<{ label: string; value: DateFilterType }> = [
+	{ label: "今天", value: "today" },
+	{ label: "昨天", value: "yesterday" },
+	{ label: "本周", value: "thisWeek" },
+	{ label: "本月", value: "thisMonth" },
+	{ label: "上个月", value: "lastMonth" },
+	{ label: "全部", value: "all" },
+	{ label: "自定义范围", value: "custom" }
+];
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "all"));
+const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
+const startDraft = ref("");
+const endDraft = ref("");
+const startVisible = ref(false);
+const endVisible = ref(false);
 const activeReservationOnly = computed(() => activeReservationRequested && operationType.value === "ORDER_RESERVE");
 let keywordTimer: number | undefined;
 let requestToken = 0;
+const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const isCustomDate = computed(() => dateFilterType.value === "custom");
 const emptyText = computed(() => {
 	if (loading.value) {
 		return "正在加载库存流水";
@@ -132,12 +239,11 @@ const emptyText = computed(() => {
 	if (activeReservationOnly.value) {
 		return "暂无有效的预占流水";
 	}
-	return keyword.value.trim() || productId.value || operationType.value !== "ALL" || direction.value !== "ALL" ? "未找到匹配的库存流水" : "暂无库存流水";
+	return keyword.value.trim() || productId.value || skuId.value || operationType.value !== "ALL" || direction.value !== "ALL" ? "未找到匹配的库存流水" : "暂无库存流水";
 });
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
 const operationOptions = [
 	{ label: "全部操作", value: "ALL" },
-	{ label: "期初入库", value: "INITIAL_IN" },
 	{ label: "手工入库", value: "MANUAL_IN" },
 	{ label: "手工出库", value: "MANUAL_OUT" },
 	{ label: "手工流水冲正", value: "MANUAL_REVOKE" },
@@ -153,15 +259,27 @@ const directionOptions = [
 	{ label: "入库", value: "IN" },
 	{ label: "出库", value: "OUT" }
 ];
+const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
+const directionFilterLabel = computed(() => directionOptions.find(item => item.value === direction.value)?.label || "出入库");
 
 function getQueryText(key: string): string {
 	const value = route.query[key];
 	return Array.isArray(value) ? String(value[0] || "") : String(value || "");
 }
 
+function parseDateRange(type: DateFilterType): [string, string] {
+	if (type !== "custom") {
+		return buildPresetDateRange(type);
+	}
+	return [getQueryText("beginAt"), getQueryText("endAt")];
+}
+
+function getDefaultFilteredSkuUnitId(): string {
+	return filteredSkuUnitList.value.find(unit => unit.isBase)?.id || filteredSkuUnitList.value[0]?.id || "";
+}
+
 function getOperationIcon(type?: StockOperationType): string {
 	return ({
-		INITIAL_IN: "import",
 		MANUAL_IN: "import",
 		MANUAL_OUT: "export",
 		MANUAL_REVOKE: "rollback",
@@ -174,6 +292,21 @@ function getOperationIcon(type?: StockOperationType): string {
 	} as Record<string, string>)[type || ""] || "history";
 }
 
+function getOperationClass(type?: StockOperationType): string {
+	return ({
+		INITIAL_IN: "initial-in",
+		MANUAL_IN: "manual-in",
+		MANUAL_OUT: "manual-out",
+		MANUAL_REVOKE: "manual-revoke",
+		ORDER_RESERVE: "order-reserve",
+		ORDER_RELEASE: "order-release",
+		ORDER_OUT: "order-out",
+		ORDER_REVOKE: "order-revoke",
+		STOCKTAKE_GAIN: "stocktake-gain",
+		STOCKTAKE_LOSS: "stocktake-loss"
+	} as Record<string, string>)[type || ""] || "unknown";
+}
+
 function getStockQuantityText(record: StockRecord): string {
 	if (record.quantity === undefined || record.quantity === null || record.quantity === "") {
 		return "";
@@ -233,12 +366,16 @@ async function loadMore(force = false): Promise<void> {
 	const token = ++requestToken;
 	loading.value = true;
 	try {
+		const [beginAt, endAt] = buildUnixRange();
 		const result = await ProductAPI.recordList({
 			productId: productId.value || undefined,
+			skuId: skuId.value || undefined,
 			keyword: keyword.value.trim() || undefined,
 			operationType: operationType.value === "ALL" ? undefined : operationType.value,
 			activeReservationOnly: activeReservationOnly.value || undefined,
 			direction: direction.value === "ALL" ? undefined : direction.value,
+			beginAt,
+			endAt,
 			index: pageIndex.value,
 			size: pageSize
 		});
@@ -257,6 +394,23 @@ async function loadMore(force = false): Promise<void> {
 	}
 }
 
+async function loadSkuFilter(): Promise<void> {
+	if (!skuId.value) {
+		filteredProduct.value = undefined;
+		filteredSku.value = undefined;
+		filteredSkuUnitId.value = "";
+		return;
+	}
+	const sku = await ProductAPI.skuDetail(skuId.value);
+	const product = sku.productId ? await ProductAPI.detail(sku.productId) : undefined;
+	if (skuId.value !== getQueryText("skuId")) {
+		return;
+	}
+	filteredSku.value = sku;
+	filteredProduct.value = product;
+	filteredSkuUnitId.value = getDefaultFilteredSkuUnitId();
+}
+
 async function selectOperationType(value: DropdownValue): Promise<void> {
 	if (!Array.isArray(value)) {
 		operationType.value = String(value) as OperationFilter;
@@ -271,6 +425,101 @@ async function selectDirection(value: DropdownValue): Promise<void> {
 	}
 }
 
+async function selectDateFilter(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	dateFilterType.value = String(value) as DateFilterType;
+	if (dateFilterType.value !== "custom") {
+		dateRange.value = buildPresetDateRange(dateFilterType.value);
+		await replaceFilterQuery();
+		await reload();
+	} else {
+		await replaceFilterQuery();
+	}
+}
+
+function openStartTime(): void {
+	startDraft.value = dateRange.value[0];
+	startVisible.value = true;
+}
+
+function openEndTime(): void {
+	endDraft.value = dateRange.value[1];
+	endVisible.value = true;
+}
+
+function cancelStartTime(): void {
+	startVisible.value = false;
+	startDraft.value = dateRange.value[0];
+}
+
+function cancelEndTime(): void {
+	endVisible.value = false;
+	endDraft.value = dateRange.value[1];
+}
+
+async function confirmStartTime(value?: string | number): Promise<void> {
+	startVisible.value = false;
+	dateRange.value = [String(value || startDraft.value), dateRange.value[1]];
+	await confirmCustomRange();
+}
+
+async function confirmEndTime(value?: string | number): Promise<void> {
+	endVisible.value = false;
+	dateRange.value = [dateRange.value[0], String(value || endDraft.value)];
+	await confirmCustomRange();
+}
+
+async function confirmCustomRange(): Promise<void> {
+	if (dateRange.value[0] && dateRange.value[1] && dateRange.value[1] < dateRange.value[0]) {
+		dateRange.value = [dateRange.value[1], dateRange.value[0]];
+	}
+	dateFilterType.value = "custom";
+	await replaceFilterQuery();
+	await reload();
+}
+
+function buildFilterQuery(transitionDepth = getQueryText("transitionDepth")): Record<string, string> {
+	const query = {
+		productId: productId.value,
+		skuId: skuId.value,
+		keyword: keyword.value.trim(),
+		operationType: operationType.value === "ALL" ? "" : operationType.value,
+		direction: direction.value === "ALL" ? "" : direction.value,
+		activeReservationOnly: activeReservationRequested ? "true" : "",
+		dateType: dateFilterType.value,
+		beginAt: dateRange.value[0] || "",
+		endAt: dateRange.value[1] || ""
+	};
+	if (isValidTransitionDepth(transitionDepth)) {
+		return { ...query, transitionDepth };
+	}
+	return query;
+}
+
+async function replaceFilterQuery(): Promise<void> {
+	await router.replace({
+		name: "ProductStockRecordList",
+		query: buildFilterQuery()
+	});
+}
+
+function isValidTransitionDepth(value: string): boolean {
+	const depth = Number(value);
+	return value !== "" && Number.isInteger(depth) && 0 <= depth && depth <= 20;
+}
+
+function buildUnixRange(): [number | undefined, number | undefined] {
+	if (dateFilterType.value === "all") {
+		return [0, Time.toTimestamp(new Date())];
+	}
+	return [
+		Time.toTimestamp(parseDateTime(dateRange.value[0], false)),
+		Time.toTimestamp(parseDateTime(dateRange.value[1], true))
+	];
+}
+
 async function reload(): Promise<void> {
 	pageIndex.value = 0;
 	recordList.value = [];
@@ -292,7 +541,7 @@ async function refresh(): Promise<void> {
 onMounted(async () => {
 	navBarStore.clearRight();
 	try {
-		await reload();
+		await Promise.all([loadSkuFilter(), reload()]);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "库存流水加载失败"));
 	}
@@ -318,7 +567,6 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .product-stock-record-list {
-	gap: .75rem;
 	display: flex;
 	padding: var(--app-nav-height) 0 1rem;
 	flex-direction: column;
@@ -331,8 +579,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -341,7 +587,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 2;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -352,23 +597,54 @@ onUnmounted(() => {
 			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
-			background: #fff;
 			border-top: none;
 			padding-top: .8rem;
 			border-radius: 0 0 1rem 1rem;
-			&:after {
+		}
-				display: none;
 	}
 
-			:deep(.t-dropdown-menu__item) {
+	.list-wrap {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
+
+		.date-summary {
+
+			:deep(.t-cell__title) {
+				flex: 0 0 4.5rem;
+			}
+
+			:deep(.t-cell__note) {
+				flex: 1 1 0;
 				min-width: 0;
+				overflow: hidden;
+				text-align: right;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 		}
 
-			:deep(.t-dropdown-menu__title) {
+		.sku {
-				overflow: hidden;
+			--td-tag-square-border-radius: .5rem;
-				white-space: nowrap;
+
-				text-overflow: ellipsis;
+			padding: 10px;
+
+			:deep(.t-cell__title) {
+				display: flex;
+				align-items: center;
 			}
+
+			.avatar {
+				width: 2rem;
+				height: 2rem;
+				border-radius: .5rem !important;
+			}
+
+			.title {
+				gap: .5rem;
+				display: flex;
+				min-width: 0;
+				align-items: center;
 			}
 		}
 
@@ -379,16 +655,6 @@ onUnmounted(() => {
 				padding: 10px;
 				min-width: 0;
 
-			:deep(.t-cell__title) {
-				min-width: 0;
-				width: 0;
-			}
-
-			:deep(.t-cell__title-text) {
-				min-width: 0;
-				width: 100%;
-			}
-
 				.avatar {
 					width: 3.5rem;
 					height: 3.5rem;
@@ -405,7 +671,7 @@ onUnmounted(() => {
 				}
 
 				.title {
-				gap: .5rem;
+					gap: .25rem;
 					min-width: 0;
 					max-width: 100%;
 					flex: 1;
@@ -415,20 +681,59 @@ onUnmounted(() => {
 					white-space: nowrap;
 
 					.actor {
-					color: var(--td-text-color-secondary);
 						flex: 0 0 auto;
+						color: var(--td-text-color-brand);
 					}
 
 					.operation {
 						flex: 0 0 auto;
+						color: var(--operation-color, var(--td-text-color-secondary));
+						font-weight: 700;
+
+						&.initial-in {
+							--operation-color: #2563eb;
+						}
+
+						&.manual-in {
+							--operation-color: #15803d;
+						}
+
+						&.manual-out {
+							--operation-color: #c2410c;
+						}
+
+						&.manual-revoke {
+							--operation-color: #be123c;
+						}
+
+						&.order-reserve {
+							--operation-color: #7c3aed;
+						}
+
+						&.order-release {
+							--operation-color: #0891b2;
+						}
+
+						&.order-out {
+							--operation-color: #dc2626;
+						}
+
+						&.order-revoke {
+							--operation-color: #4f46e5;
+						}
+
+						&.stocktake-gain {
+							--operation-color: #0f766e;
+						}
+
+						&.stocktake-loss {
+							--operation-color: #a16207;
+						}
 					}
 
 					.product-name {
-					min-width: 0;
 						flex: 0 1 auto;
-					overflow: hidden;
+						color: var(--td-text-color-primary);
-					text-overflow: ellipsis;
-					white-space: nowrap;
 					}
 
 					.quantity {
@@ -454,6 +759,7 @@ onUnmounted(() => {
 				}
 			}
 		}
+	}
 
 	.positive {
 		color: var(--td-success-color);
@@ -463,4 +769,46 @@ onUnmounted(() => {
 		color: var(--td-error-color);
 	}
 }
+
+:global(html.theme-dark) .product-stock-record-list .operation {
+	&.initial-in {
+		--operation-color: #93c5fd;
+	}
+
+	&.manual-in {
+		--operation-color: #86efac;
+	}
+
+	&.manual-out {
+		--operation-color: #fdba74;
+	}
+
+	&.manual-revoke {
+		--operation-color: #fda4af;
+	}
+
+	&.order-reserve {
+		--operation-color: #c4b5fd;
+	}
+
+	&.order-release {
+		--operation-color: #67e8f9;
+	}
+
+	&.order-out {
+		--operation-color: #fca5a5;
+	}
+
+	&.order-revoke {
+		--operation-color: #a5b4fc;
+	}
+
+	&.stocktake-gain {
+		--operation-color: #5eead4;
+	}
+
+	&.stocktake-loss {
+		--operation-color: #fcd34d;
+	}
+}
 </style>

src/pages/product/ProductStockSkuList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.productStock.read" class="product-stock-sku-list">
-		<div class="search bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="keyword"
 				class="keyword"
@@ -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="'时间范围内创建订单的当前快照'" />
+			<span class="caption">成交金额拆分；待收余额已扣除待核销</span>
-		</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>
 		</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";
+import { buildPieChartOption, formatChartYuan, getNumber } from "@/pages/product/component/chartUtils";
-
+import { useStoreChart } from "@/pages/store/component/useStoreChart";
-type DetailItem = {
-	label: string;
-	value: string;
-};
 
 defineOptions({
 	name: "OrderReceivableCard"
@@ -30,13 +22,40 @@ const props = defineProps<{
 	receivable: GaoSalesOrderReceivableStatView;
 }>();
 
-const detailList = computed<DetailItem[]>(() => [
+const chartOption = computed<EChartsOption>(() => {
-	{ label: "有效收款", value: formatMoney(props.receivable.paidAmount) },
+	const pendingPaidAmount = getNumber(props.receivable.pendingPaidAmount);
-	{ label: "待核销", value: formatMoney(props.receivable.pendingPaidAmount) },
+	const unpaidAmount = getNumber(props.receivable.unpaidAmount);
-	{ label: "未收", value: formatMoney(props.receivable.unpaidAmount) },
+	return {
-	{ label: "有效退款", value: formatMoney(props.receivable.refundedAmount) },
+		...buildPieChartOption(),
-	{ label: "净收款", value: formatMoney(props.receivable.netPaidAmount) }
+		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 {
+	.chart {
-		gap: .5rem;
+		width: 100%;
-		display: grid;
+		height: 15rem;
-		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;
-		}
 	}
 }
 
@@ -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 ? '停售' : '删除'"
+					content="移除"
-					:disabled="!!unit.id && unit.allowSale === false && unit.allowPurchase === false"
 					@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;
+		Message.info("已移除单位将在保存时由后端检查引用后处理");
-		unit.allowPurchase = false;
-		Message.success("单位已停售并禁止采购，历史订单仍可履约");
-		return;
 	}
 	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,
+			top: 32,
-			left: 8,
+			left: 0,
-			right: 18,
+			right: 0,
-			bottom: 12,
+			bottom: 0,
 			containLabel: true
 		},
 		legend: {

src/pages/salesOrder/ConsumptionRecordList.vue

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

src/pages/salesOrder/FundRecordList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="pageAccess" class="sales-order-record-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				class="customer"
 				v-model.trim="customerSearchKeyword"
@@ -32,10 +32,16 @@
 				</template>
 			</t-input>
 			<t-dropdown-menu class="menus">
+				<t-dropdown-item
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="selectDateFilter"
+				/>
 				<t-dropdown-item
 					v-if="!isSelfReceiveOnly"
 					v-model="operationType"
-					label="操作类型"
+					:label="operationFilterLabel"
 					:options="operationOptions"
 					@change="selectOperation"
 				/>
@@ -48,6 +54,20 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
+			<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
+				<t-cell
+					title="开始时间"
+					:note="dateRange[0] || '-'"
+					arrow
+					@click="openStartTime"
+				/>
+				<t-cell
+					title="结束时间"
+					:note="dateRange[1] || '-'"
+					arrow
+					@click="openEndTime"
+				/>
+			</t-cell-group>
 			<t-cell-group v-if="recordList.length" class="empty-cell-title-margin" theme="card">
 				<t-cell
 					class="item"
@@ -69,9 +89,8 @@
 					</template>
 					<template #title>
 						<div class="title">
-							<span class="customer" v-text="getCustomerText(item)" />
+							<span class="customer clip-text" v-text="getCustomerText(item)" />
-							<div class="operation">
+							<span class="type" :class="getOperationClass(item.operationType)" v-text="getFundOperationText(item.operationType)" />
-								<span v-text="getFundOperationText(item.operationType)" />
 							<t-tag
 								size="small"
 								:content="getRecordStatusText(item)"
@@ -79,7 +98,6 @@
 								:theme="getRecordStatusTheme(item)"
 							/>
 						</div>
-						</div>
 					</template>
 					<template #description>
 						<div class="description">
@@ -124,10 +142,35 @@
 		v-model:visible="customerSelectorVisible"
 		@change="handleCustomerChange"
 	/>
+	<t-popup v-model="startVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="startVisible"
+			v-model="startDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="开始时间"
+			:default-value="dateRange[0]"
+			@cancel="cancelStartTime"
+			@confirm="confirmStartTime"
+		/>
+	</t-popup>
+	<t-popup v-model="endVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="endVisible"
+			v-model="endDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="结束时间"
+			:default-value="dateRange[1]"
+			@cancel="cancelEndTime"
+			@confirm="confirmEndTime"
+		/>
+	</t-popup>
 </template>
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
+import { PassTimeLabel, Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
@@ -135,16 +178,18 @@ import CustomerSelector from "@/components/CustomerSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
 import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
+import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount } from "@/utils/package";
 import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { getCustomerPhotoURL } from "@/utils/customer";
-import { PassTimeLabel } from "timi-web";
 
 defineOptions({ name: "FundRecordList" });
 
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+
 const route = useRoute();
 const router = useRouter();
 const navBarStore = useNavBarStore();
@@ -161,6 +206,21 @@ const customerId = ref(getQueryText(route.query.customerId));
 const selectedCustomer = ref<Customer>();
 const customerSelectorVisible = ref(false);
 const customerSearchKeyword = ref("");
+const dateOptions: Array<{ label: string; value: DateFilterType }> = [
+	{ label: "今天", value: "today" },
+	{ label: "昨天", value: "yesterday" },
+	{ label: "本周", value: "thisWeek" },
+	{ label: "本月", value: "thisMonth" },
+	{ label: "上个月", value: "lastMonth" },
+	{ label: "全部", value: "all" },
+	{ label: "自定义范围", value: "custom" }
+];
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText(route.query.dateType), dateOptions, "all"));
+const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
+const startDraft = ref("");
+const endDraft = ref("");
+const startVisible = ref(false);
+const endVisible = ref(false);
 const isSelfReceiveOnly = computed(() => !userStore.hasPermissions(permissionCodes.fundRecord.read)
 	&& userStore.hasPermissions(permissionCodes.fundReceive.create));
 const pageAccess = computed(() => [permissionCodes.fundRecord.read, permissionCodes.fundReceive.create]);
@@ -171,6 +231,7 @@ const operationOptions = [
 	{ label: "确认无需退款", value: "CONFIRM_NO_REFUND" },
 	{ label: "资金冲正", value: "REVOKE" }
 ];
+const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
 const statusOptions = [
 	{ label: "全部状态", value: "ALL" },
 	{ label: "待核销", value: "PENDING" },
@@ -179,24 +240,36 @@ const statusOptions = [
 	{ label: "已撤销", value: "CANCELLED" }
 ];
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
+const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const isCustomDate = computed(() => dateFilterType.value === "custom");
 
 function getQueryText(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }
 
+function parseDateRange(type: DateFilterType): [string, string] {
+	if (type !== "custom") {
+		return buildPresetDateRange(type);
+	}
+	return [getQueryText(route.query.beginAt), getQueryText(route.query.endAt)];
+}
+
 async function loadMore(): Promise<void> {
 	if (loading.value || noMore.value) {
 		return;
 	}
 	loading.value = true;
 	try {
+		const [beginAt, endAt] = buildUnixRange();
 		const page = {
 			index: pageIndex.value,
 			size: 15,
 			salesOrderId: String(route.query.salesOrderId || "") || undefined,
 			customerId: customerId.value || undefined,
 			operationType: isSelfReceiveOnly.value || operationType.value === "ALL" ? undefined : operationType.value as FundOperationType,
-			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus
+			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus,
+			beginAt,
+			endAt
 		};
 		const result = isSelfReceiveOnly.value
 			? await SalesOrderAPI.myReceiveRecordList(page)
@@ -283,6 +356,99 @@ async function selectStatus(value: DropdownValue): Promise<void> {
 	}
 }
 
+async function selectDateFilter(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	dateFilterType.value = String(value) as DateFilterType;
+	if (dateFilterType.value !== "custom") {
+		dateRange.value = buildPresetDateRange(dateFilterType.value);
+		await replaceFilterQuery();
+		await reload();
+	} else {
+		await replaceFilterQuery();
+	}
+}
+
+function openStartTime(): void {
+	startDraft.value = dateRange.value[0];
+	startVisible.value = true;
+}
+
+function openEndTime(): void {
+	endDraft.value = dateRange.value[1];
+	endVisible.value = true;
+}
+
+function cancelStartTime(): void {
+	startVisible.value = false;
+	startDraft.value = dateRange.value[0];
+}
+
+function cancelEndTime(): void {
+	endVisible.value = false;
+	endDraft.value = dateRange.value[1];
+}
+
+async function confirmStartTime(value?: string | number): Promise<void> {
+	startVisible.value = false;
+	dateRange.value = [String(value || startDraft.value), dateRange.value[1]];
+	await confirmCustomRange();
+}
+
+async function confirmEndTime(value?: string | number): Promise<void> {
+	endVisible.value = false;
+	dateRange.value = [dateRange.value[0], String(value || endDraft.value)];
+	await confirmCustomRange();
+}
+
+async function confirmCustomRange(): Promise<void> {
+	if (dateRange.value[0] && dateRange.value[1] && dateRange.value[1] < dateRange.value[0]) {
+		dateRange.value = [dateRange.value[1], dateRange.value[0]];
+	}
+	dateFilterType.value = "custom";
+	await replaceFilterQuery();
+	await reload();
+}
+
+function buildFilterQuery(transitionDepth = getQueryText(route.query.transitionDepth)): Record<string, string> {
+	const query = {
+		salesOrderId: getQueryText(route.query.salesOrderId),
+		customerId: customerId.value,
+		operationType: isSelfReceiveOnly.value || operationType.value === "ALL" ? "" : operationType.value,
+		status: status.value === "ALL" ? "" : status.value,
+		dateType: dateFilterType.value,
+		beginAt: dateRange.value[0] || "",
+		endAt: dateRange.value[1] || ""
+	};
+	if (isValidTransitionDepth(transitionDepth)) {
+		return { ...query, transitionDepth };
+	}
+	return query;
+}
+
+async function replaceFilterQuery(): Promise<void> {
+	await router.replace({
+		name: "FundRecordList",
+		query: buildFilterQuery()
+	});
+}
+
+function isValidTransitionDepth(value: string): boolean {
+	const depth = Number(value);
+	return value !== "" && Number.isInteger(depth) && 0 <= depth && depth <= 20;
+}
+
+function buildUnixRange(): [number | undefined, number | undefined] {
+	if (dateFilterType.value === "all") {
+		return [0, Time.toTimestamp(new Date())];
+	}
+	return [
+		Time.toTimestamp(parseDateTime(dateRange.value[0], false)),
+		Time.toTimestamp(parseDateTime(dateRange.value[1], true))
+	];
+}
+
 function getOperatorText(item: FundRecord): string {
 	return item.operator?.name || item.operator?.nick || item.operatorUserId || "未知";
 }
@@ -295,6 +461,15 @@ function getCustomerText(item: FundRecord): string {
 	return item.customer?.name || item.customer?.code || item.customerId || "未知客户";
 }
 
+function getOperationClass(type?: FundOperationType): string {
+	return ({
+		RECEIVE: "receive",
+		REFUND: "refund",
+		CONFIRM_NO_REFUND: "confirm-no-refund",
+		REVOKE: "revoke"
+	} as Record<string, string>)[type || ""] || "unknown";
+}
+
 function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
 	return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
 }
@@ -355,8 +530,6 @@ onUnmounted(() => navBarStore.clearRight());
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -364,8 +537,7 @@ onUnmounted(() => navBarStore.clearRight());
 			--td-input-vertical-padding: .25rem 1rem;
 
 			border: 1px solid var(--td-component-border);
-			z-index: 2;
+			z-index: 1;
-			background: var(--td-bg-color-container);
 			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 {
+			.type {
-				gap: .5rem;
+				font-weight: 700;
-				display: flex;
+
-				flex-shrink: 0;
+				&.receive {
-				align-items: center;
+					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>
+				<div class="reason">
 					<t-textarea
 						v-model="reason"
 						borderless
 						autosize
 						maxlength="500"
-					placeholder="请输入冲正原因"
+						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"
@@ -111,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";
 
@@ -135,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));
 }
@@ -256,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/SalesOrderList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div ref="salesOrderListRef" v-can="permissionCodes.salesOrder.read" class="sales-order-list">
-		<div class="filters">
+		<div class="filters glass">
 			<div class="search-row">
 				<t-input
 					v-model.trim="keyword"
@@ -577,7 +577,21 @@ async function handleCustomerChange(): Promise<void> {
 }
 
 async function toDetail(item: SalesOrder): Promise<void> {
-	if (item.id) await router.push(`/management/sales-orders/${item.id}`);
+	if (item.id) await router.push({
+		path: `/management/sales-orders/${item.id}`,
+		query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+	});
+}
+
+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
 }
 
 async function toPayment(item: SalesOrder): Promise<void> {
@@ -726,8 +740,6 @@ onUnmounted(() => {
 		z-index: 10;
 		padding: .75rem 1rem .5rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.search-row {
 			gap: .5rem;

src/pages/salesOrder/components/SalesOrderSummary.vue

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

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

src/pages/store/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 type { StoreEventRecordDailyStatView } from "@/types/Store";
-import { getCurrentStoreId } from "@/utils/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([
+	await loadDailyStat();
-		loadDailyStat(),
-		loadRestDays()
-	]);
 }, {
 	deep: true
 });
@@ -117,10 +105,7 @@ onMounted(async () => {
 		updateChartWidth();
 	}
 	await loadEvents();
-	await Promise.all([
+	await loadDailyStat();
-		loadDailyStat(),
-		loadRestDays()
-	]);
 });
 
 onBeforeUnmount(() => {
@@ -164,60 +149,6 @@ function getRecordData(eventId: string, dateText: string): number | null {
 	return restDaySet.value.has(getDateValue(dateText)) ? null : countRecordByEventAndDate(eventId, dateText);
 }
 
-function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
-	const data: NonNullable<MarkAreaComponentOption["data"]> = [];
-	for (let dateIndex = 0; dateIndex < visibleDateTextList.value.length; dateIndex++) {
-		const dateText = visibleDateTextList.value[dateIndex];
-		if (restDaySet.value.has(getDateValue(dateText))) {
-			data.push([{ name: "休", xAxis: dateIndex }, { xAxis: dateIndex }]);
-		}
-	}
-	if (!data.length) {
-		return undefined;
-	}
-	return {
-		silent: true,
-		itemStyle: {
-			color: "rgba(148, 163, 184, .12)"
-		},
-		label: {
-			color: "#64748b",
-			fontSize: 12,
-			formatter: "休",
-			position: "insideBottom",
-			show: showRestDayLabel.value
-		},
-		data
-	};
-}
-
-async function loadRestDays(): Promise<void> {
-	const requestId = ++restDayRequestId;
-	const dateList = props.dateTextList;
-	const storeId = getCurrentStoreId();
-	if (!storeId || !dateList.length) {
-		restDaySet.value = new Set();
-		return;
-	}
-
-	try {
-		const list = await StoreChartAPI.businessDayCalendar(storeId, getDateValue(dateList[0]), getDateValue(dateList[dateList.length - 1]));
-		if (requestId === restDayRequestId) {
-			restDaySet.value = new Set(getRestDayList(list));
-		}
-	} catch {
-		if (requestId === restDayRequestId) {
-			restDaySet.value = new Set();
-		}
-	}
-}
-
-function getRestDayList(list: StoreBusinessDay[]): number[] {
-	return list
-		.filter(item => item.status === "CLOSED" && item.dateValue)
-		.map(item => item.dateValue as number);
-}
-
 function getEventColor(event: EventItem): string | undefined {
 	return event.color || undefined;
 }

src/pages/store/component/StorePointDailyTrendChart.vue

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

src/pages/store/component/StorePointRedemptionRankChart.vue

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

src/pages/store/component/useRestDayCalendar.ts

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

src/pages/tabs/ProductTab.vue

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

src/pages/tabs/StoreTab.vue

@@ -38,7 +38,7 @@
 					v-if="canManageStoreDiary"
 					class="action"
 					title="门店日记"
-					note="记录门店经营和护理过程"
+					note="记录门店经营日常"
 					arrow
 					hover
 					@click="goStoreDiaryManagement"

src/pages/tag/TagList.vue

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

src/router/routes/fulfillmentRoutes.ts

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

src/store/permissionSettingsStore.ts

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

src/types/Fulfillment.ts

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

src/types/GaoChart.ts

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

src/types/Product.ts

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

src/types/ProductEditor.ts

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

src/utils/package.ts

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

src/utils/twaBridge.ts

@@ -0,0 +1,330 @@
+const TWA_ORIGIN = "https://gao.imyeyu.com";
+const TWA_BRIDGE_TIMEOUT = 10_000;
+const MEDIA_CHUNK_SIZE = 64 * 1024;
+const LOG_PREFIX = "[TWA 相册]";
+
+type CapturedMediaType = "image" | "video";
+
+interface TwaMessage {
+	type: string;
+	id?: string;
+	index?: number;
+	data?: string;
+	error?: string;
+	version?: number;
+}
+
+type TwaResponseHandler = (message: TwaMessage) => void;
+
+let bridgeInitialized = false;
+let bridgePort: MessagePort | undefined;
+let bridgeWaiterList: Array<(port: MessagePort | undefined) => void> = [];
+let transferQueue = Promise.resolve();
+const responseHandlerMap = new Map<string, TwaResponseHandler>();
+
+/**
+ * 初始化 TWA 通信监听。
+ *
+ * 普通浏览器不会收到带 MessagePort 的消息，因此初始化失败时不会影响网页功能。
+ */
+export function initializeTwaBridge(): void {
+	if (bridgeInitialized || typeof window === "undefined") {
+		return;
+	}
+
+	bridgeInitialized = true;
+	window.addEventListener("message", handleWindowMessage);
+	logInfo("已初始化网页侧通信监听");
+}
+
+/**
+ * 将直接拍摄得到的媒体保存到 Android 系统相册。
+ *
+ * 非 TWA 环境会直接返回，不会阻塞原有上传流程。
+ */
+export function saveCapturedMediaToAlbum(file: File, mediaType: CapturedMediaType): void {
+	if (!file.size) {
+		logWarn("跳过相册保存：文件大小为 0", {
+			fileName: file.name,
+			mediaType
+		});
+		return;
+	}
+
+	initializeTwaBridge();
+	logInfo("收到相册保存请求", {
+		fileName: file.name,
+		fileType: file.type,
+		fileSize: file.size,
+		mediaType
+	});
+	transferQueue = transferQueue
+		.then(async () => {
+			await transferMedia(file, mediaType);
+		})
+		.catch(error => {
+			// 相册保存是增强能力，失败时不能影响媒体上传。
+			logError("相册保存失败，已忽略并继续原上传流程", error);
+		});
+}
+
+/**
+ * 根据文件输入框判断是否为直接拍摄，并启动相册保存。
+ */
+export function saveCapturedFilesFromInput(input: HTMLInputElement, fileList: readonly File[]): void {
+	if (!input.capture || !fileList.length) {
+		return;
+	}
+
+	const mediaType: CapturedMediaType = input.accept.toLowerCase().includes("video") ? "video" : "image";
+	logInfo("识别为直接拍摄媒体", {
+		accept: input.accept,
+		capture: input.capture,
+		fileCount: fileList.length,
+		mediaType
+	});
+	for (const file of fileList) {
+		saveCapturedMediaToAlbum(file, mediaType);
+	}
+}
+
+function handleWindowMessage(event: MessageEvent): void {
+	const message = parseMessage(event.data);
+	if (message?.type !== "twa-bridge-ready") {
+		return;
+	}
+	if (event.origin !== TWA_ORIGIN || !event.ports.length) {
+		logWarn("忽略无效的 TWA 桥接就绪消息", {
+			origin: event.origin,
+			hasMessagePort: event.ports.length > 0
+		});
+		return;
+	}
+
+	logInfo("收到 Android 侧桥接就绪消息", {
+		origin: event.origin,
+		version: message.version
+	});
+	bridgePort = event.ports[0];
+	bridgePort.onmessage = handlePortMessage;
+	bridgePort.start();
+	bridgePort.postMessage(JSON.stringify({
+		type: "twa-bridge-ready-ack",
+		version: 1
+	}));
+
+	const waiterList = bridgeWaiterList;
+	bridgeWaiterList = [];
+	for (const waiter of waiterList) {
+		waiter(bridgePort);
+	}
+}
+
+function handlePortMessage(event: MessageEvent): void {
+	const message = parseMessage(event.data);
+	if (!message?.id) {
+		return;
+	}
+
+	responseHandlerMap.get(message.id)?.(message);
+}
+
+async function transferMedia(file: File, mediaType: CapturedMediaType): Promise<void> {
+	const port = await waitForBridgePort();
+	if (!port) {
+		logWarn("未连接到 TWA，跳过相册保存", {
+			fileName: file.name,
+			mediaType
+		});
+		return;
+	}
+
+	const id = createTransferId();
+	let transferFinished = false;
+	logInfo("开始传输媒体", {
+		id,
+		fileName: file.name,
+		mediaType,
+		fileSize: file.size,
+		chunkSize: MEDIA_CHUNK_SIZE
+	});
+	try {
+		await sendTransferMessage(port, id, {
+			type: "media-start",
+			id,
+			mediaType,
+			mimeType: file.type || `${mediaType}/*`,
+			fileName: file.name,
+			size: file.size
+		}, "media-started");
+
+		let offset = 0;
+		let index = 0;
+		while (offset < file.size) {
+			const chunk = await file.slice(offset, offset + MEDIA_CHUNK_SIZE).arrayBuffer();
+			if (index === 0 || index % 16 === 0 || offset + chunk.byteLength >= file.size) {
+				logDebug("发送媒体分块", {
+					id,
+					index,
+					chunkSize: chunk.byteLength,
+					offset
+				});
+			}
+			await sendTransferMessage(port, id, {
+				type: "media-chunk",
+				id,
+				index,
+				data: encodeBase64(chunk)
+			}, "media-chunk-ack", index);
+			offset += chunk.byteLength;
+			index++;
+		}
+
+		await sendTransferMessage(port, id, {
+			type: "media-finish",
+			id
+		}, "media-saved");
+		transferFinished = true;
+		logInfo("媒体已保存到系统相册", {
+			id,
+			fileName: file.name,
+			fileSize: file.size
+		});
+	} finally {
+		if (!transferFinished) {
+			logWarn("媒体传输未完成，发送中止请求", { id });
+			port.postMessage(JSON.stringify({
+				type: "media-abort",
+				id
+			}));
+		}
+	}
+}
+
+async function sendTransferMessage(
+	port: MessagePort,
+	id: string,
+	message: Record<string, unknown>,
+	expectedType: string,
+	expectedIndex?: number
+): Promise<void> {
+	const responsePromise = waitForTransferResponse(id, expectedType, expectedIndex);
+	logDebug("发送桥接消息", {
+		id,
+		type: message.type,
+		expectedType,
+		expectedIndex
+	});
+	port.postMessage(JSON.stringify(message));
+	await responsePromise;
+}
+
+function waitForBridgePort(): Promise<MessagePort | undefined> {
+	if (bridgePort) {
+		return Promise.resolve(bridgePort);
+	}
+
+	return new Promise(resolve => {
+		let settled = false;
+		const settle = (port?: MessagePort): void => {
+			if (settled) {
+				return;
+			}
+			settled = true;
+			resolve(port);
+		};
+		bridgeWaiterList.push(settle);
+		logDebug("等待 Android 侧桥接就绪");
+		window.setTimeout(() => {
+			bridgeWaiterList = bridgeWaiterList.filter(waiter => waiter !== settle);
+			logWarn("等待 TWA 桥接超时，当前页面不是已建立通道的 TWA，或 Android 来源校验未通过", {
+				origin: window.location.origin,
+				displayMode: getDisplayMode(),
+				userAgent: navigator.userAgent
+			});
+			settle();
+		}, TWA_BRIDGE_TIMEOUT);
+	});
+}
+
+function waitForTransferResponse(id: string, expectedType: string, expectedIndex?: number): Promise<void> {
+	return new Promise((resolve, reject) => {
+		const timeout = window.setTimeout(() => {
+			responseHandlerMap.delete(id);
+			logError("等待桥接响应超时", new Error(`${expectedType}, id=${id}`));
+			reject(new Error("TWA 媒体保存响应超时"));
+		}, 15_000);
+
+		responseHandlerMap.set(id, message => {
+			if (message.type === "media-error") {
+				window.clearTimeout(timeout);
+				responseHandlerMap.delete(id);
+				logError("Android 侧返回媒体错误", new Error(message.error || "TWA 媒体保存失败"));
+				reject(new Error(message.error || "TWA 媒体保存失败"));
+				return;
+			}
+			if (message.type !== expectedType || (expectedIndex !== undefined && message.index !== expectedIndex)) {
+				return;
+			}
+
+			window.clearTimeout(timeout);
+			responseHandlerMap.delete(id);
+			resolve();
+		});
+	});
+}
+
+function logInfo(message: string, detail?: unknown): void {
+	console.warn(LOG_PREFIX, message, detail ?? "");
+}
+
+function logDebug(message: string, detail?: unknown): void {
+	console.warn(LOG_PREFIX, message, detail ?? "");
+}
+
+function logWarn(message: string, detail?: unknown): void {
+	console.warn(LOG_PREFIX, message, detail ?? "");
+}
+
+function logError(message: string, error: unknown): void {
+	console.error(LOG_PREFIX, message, error);
+}
+
+function parseMessage(value: unknown): TwaMessage | undefined {
+	if (typeof value !== "string") {
+		return undefined;
+	}
+
+	try {
+		const message = JSON.parse(value) as TwaMessage;
+		return typeof message.type === "string" ? message : undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+function encodeBase64(buffer: ArrayBuffer): string {
+	const bytes = new Uint8Array(buffer);
+	let binary = "";
+	for (let index = 0; index < bytes.length; index += 0x8000) {
+		binary += String.fromCharCode(...bytes.subarray(index, index + 0x8000));
+	}
+	return window.btoa(binary);
+}
+
+function createTransferId(): string {
+	if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+		return crypto.randomUUID();
+	}
+	return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+function getDisplayMode(): string {
+	if (window.matchMedia("(display-mode: standalone)").matches) {
+		return "standalone";
+	}
+	if (window.matchMedia("(display-mode: fullscreen)").matches) {
+		return "fullscreen";
+	}
+	return "browser";
+}

src/utils/vConsole.ts

@@ -0,0 +1,30 @@
+import type VConsole from "vconsole";
+
+let vConsoleInstance: VConsole | undefined;
+let isVConsoleLoading = false;
+
+/**
+ * 切换移动端调试控制台。
+ */
+export async function toggleVConsole(): Promise<void> {
+	if (vConsoleInstance) {
+		vConsoleInstance.destroy();
+		vConsoleInstance = undefined;
+		console.warn("[调试] vConsole 已关闭");
+		return;
+	}
+	if (isVConsoleLoading) {
+		return;
+	}
+
+	isVConsoleLoading = true;
+	try {
+		const { default: VConsole } = await import("vconsole");
+		vConsoleInstance = new VConsole();
+		console.warn("[调试] vConsole 已启用");
+	} catch (error) {
+		console.error("[调试] vConsole 启用失败", error);
+	} finally {
+		isVConsoleLoading = false;
+	}
+}

twa/README.md

@@ -32,6 +32,12 @@ pnpm --config.registry=https://registry.npmjs.org dlx @bubblewrap/cli@1.25.0 bui
 
 当前 `assetlinks.json` 中登记的是本机调试证书指纹，只能配合本次验证 APK 使用。正式发布前必须替换为 release 证书指纹；如果使用 Google Play，还要把 Play App Signing 证书指纹一并登记。
 
+## TWA 媒体桥接
+
+TWA 通过 `postMessage` 接收网页直接拍摄的照片和视频，Android 10 及以上使用 `MediaStore` 分块写入系统相册，照片保存到“图片/糕店管理”，视频保存到“视频/糕店管理”。普通浏览器和从相册选择的文件不会触发该桥接。
+
+桥接依赖 `assetlinks.json` 中的 `delegate_permission/common.use_as_origin` 关系。发布 APK 前必须使用实际 release 签名证书的 SHA-256 指纹更新该文件，否则来源验证失败，桥接不会启用。
+
 ## 前端发布顺序
 
 1. 先上传新版本 `dist/assets`。

twa/app/src/main/AndroidManifest.xml

@@ -172,6 +172,10 @@
                 android:resource="@xml/filepaths" />
         </provider>
 
+        <service
+            android:name="androidx.browser.customtabs.PostMessageService"
+            android:exported="true" />
+
         <service
             android:name=".DelegationService"
             android:enabled="@bool/enableNotification"

twa/app/src/main/java/com/imyeyu/gao/customer/LauncherActivity.java

@@ -19,11 +19,39 @@ import android.content.pm.ActivityInfo;
 import android.net.Uri;
 import android.os.Build;
 import android.os.Bundle;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Base64;
+import android.util.Log;
+
+import org.json.JSONObject;
+
+import java.lang.reflect.Field;
+
+import androidx.annotation.Nullable;
+import androidx.browser.customtabs.CustomTabsCallback;
+import androidx.browser.customtabs.CustomTabsService;
+import androidx.browser.customtabs.CustomTabsSession;
+import com.google.androidbrowserhelper.trusted.QualityEnforcer;
+import com.google.androidbrowserhelper.trusted.TwaLauncher;
 
 
 
 public class LauncherActivity
         extends com.google.androidbrowserhelper.trusted.LauncherActivity {
+    private static final String TAG = "GaoTwaBridge";
+    private static final Uri WEB_ORIGIN = Uri.parse("https://gao.imyeyu.com");
+    private static final long CHANNEL_RETRY_DELAY_MILLIS = 500L;
+    private static final int MAX_CHANNEL_ATTEMPTS = 20;
+
+    private final Handler mainHandler = new Handler(Looper.getMainLooper());
+    private final CustomTabsCallback bridgeCallback = new BridgeCallback();
+    private TwaMediaStoreBridge mediaStoreBridge;
+    private CustomTabsSession postMessageSession;
+    private boolean originValidationRequested;
+    private boolean originValidated;
+    private boolean postMessageChannelRequested;
+    private boolean postMessageChannelReady;
     
 
     
@@ -31,6 +59,8 @@ public class LauncherActivity
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
+        mediaStoreBridge = new TwaMediaStoreBridge(this);
+        Log.i(TAG, "TWA Activity 已创建，开始初始化媒体相册桥接");
         // Setting an orientation crashes the app due to the transparent background on Android 8.0
         // Oreo and below. We only set the orientation on Oreo and above. This only affects the
         // splash screen and Chrome will still respect the orientation.
@@ -51,4 +81,242 @@ public class LauncherActivity
 
         return uri;
     }
+
+    @Override
+    protected CustomTabsCallback getCustomTabsCallback() {
+        return bridgeCallback;
+    }
+
+    @Override
+    protected void onDestroy() {
+        Log.i(TAG, "TWA Activity 销毁，清理未完成的媒体传输");
+        if (mediaStoreBridge != null) {
+            mediaStoreBridge.abortAll();
+        }
+        mainHandler.removeCallbacksAndMessages(null);
+        super.onDestroy();
+    }
+
+    private void scheduleChannelRequest(int attempt) {
+        if (attempt >= MAX_CHANNEL_ATTEMPTS || postMessageChannelReady) {
+            return;
+        }
+        mainHandler.postDelayed(() -> requestPostMessageChannel(attempt), CHANNEL_RETRY_DELAY_MILLIS);
+    }
+
+    private void requestPostMessageChannel(int attempt) {
+        if (isFinishing() || postMessageChannelReady) {
+            return;
+        }
+
+        CustomTabsSession session = getCustomTabsSession();
+        if (session == null) {
+            Log.w(TAG, "请求 PostMessage 通道失败：当前没有可用的 CustomTabsSession，attempt=" + attempt);
+            scheduleChannelRequest(attempt + 1);
+            return;
+        }
+        postMessageSession = session;
+
+        if (!originValidationRequested) {
+            originValidationRequested = true;
+            Log.i(TAG, "开始验证 TWA 来源关系：" + WEB_ORIGIN);
+            session.validateRelationship(CustomTabsService.RELATION_USE_AS_ORIGIN, WEB_ORIGIN, null);
+            return;
+        }
+        if (!originValidated || postMessageChannelRequested) {
+            return;
+        }
+
+        postMessageChannelRequested = true;
+        boolean requested = session.requestPostMessageChannel(WEB_ORIGIN, WEB_ORIGIN, new Bundle());
+        Log.i(TAG, "请求 PostMessage 通道，结果=" + requested);
+        if (!requested) {
+            postMessageChannelRequested = false;
+            scheduleChannelRequest(attempt + 1);
+        }
+    }
+
+    /**
+     * 当前 Bubblewrap 生成的 Android Browser Helper 版本没有公开 TWA 会话访问器，
+     * 这里按字段类型读取会话，不依赖混淆后的私有字段名称。
+     */
+    @Nullable
+    private CustomTabsSession getCustomTabsSession() {
+        try {
+            Object twaLauncher = findFieldValue(this, TwaLauncher.class);
+            if (twaLauncher == null) {
+                Log.w(TAG, "未找到 TwaLauncher 实例");
+                return null;
+            }
+            CustomTabsSession session = (CustomTabsSession) findFieldValue(twaLauncher, CustomTabsSession.class);
+            if (session == null) {
+                Log.w(TAG, "未找到 CustomTabsSession 实例");
+            }
+            return session;
+        } catch (ReflectiveOperationException | RuntimeException exception) {
+            Log.w(TAG, "读取 TWA 会话失败", exception);
+            return null;
+        }
+    }
+
+    @Nullable
+    private static Object findFieldValue(Object target, Class<?> fieldType) throws IllegalAccessException {
+        Class<?> currentClass = target.getClass();
+        while (currentClass != null) {
+            for (Field field : currentClass.getDeclaredFields()) {
+                if (!fieldType.isAssignableFrom(field.getType())) {
+                    continue;
+                }
+                field.setAccessible(true);
+                return field.get(target);
+            }
+            currentClass = currentClass.getSuperclass();
+        }
+        return null;
+    }
+
+    private void handleBridgeMessage(String message) {
+        if (mediaStoreBridge == null || !postMessageChannelReady) {
+            Log.w(TAG, "忽略媒体消息：桥接尚未就绪");
+            return;
+        }
+
+        try {
+            JSONObject payload = new JSONObject(message);
+            String type = payload.optString("type");
+            String id = payload.optString("id");
+            Log.d(TAG, "收到网页桥接消息，type=" + type + ", id=" + id);
+            if ("twa-bridge-ready-ack".equals(type)) {
+                Log.i(TAG, "网页已确认 TWA 桥接就绪");
+                return;
+            }
+            if (id.length() == 0) {
+                return;
+            }
+
+            if ("media-start".equals(type)) {
+                String error = mediaStoreBridge.start(
+                        id,
+                        payload.optString("mimeType"),
+                        payload.optString("fileName"),
+                        payload.optLong("size", -1L)
+                );
+                Log.i(TAG, "开始保存媒体，id=" + id + ", mimeType=" + payload.optString("mimeType")
+                        + ", fileName=" + payload.optString("fileName") + ", size=" + payload.optLong("size", -1L)
+                        + ", result=" + (error == null ? "success" : error));
+                postBridgeResponse(error == null ? "media-started" : "media-error", id, null, error);
+                return;
+            }
+            if ("media-chunk".equals(type)) {
+                int index = payload.optInt("index", -1);
+                if (index < 0) {
+                    mediaStoreBridge.abort(id);
+                    postBridgeResponse("media-error", id, null, "媒体分块编号无效");
+                    return;
+                }
+                byte[] chunk = Base64.decode(payload.optString("data"), Base64.NO_WRAP);
+                String error = mediaStoreBridge.append(id, index, chunk);
+                if (error != null || index == 0 || index % 16 == 0) {
+                    Log.d(TAG, "写入媒体分块，id=" + id + ", index=" + index + ", bytes=" + chunk.length
+                            + ", result=" + (error == null ? "success" : error));
+                }
+                postBridgeResponse(error == null ? "media-chunk-ack" : "media-error", id, index, error);
+                return;
+            }
+            if ("media-finish".equals(type)) {
+                String error = mediaStoreBridge.finish(id);
+                Log.i(TAG, "完成保存媒体，id=" + id + ", result=" + (error == null ? "success" : error));
+                postBridgeResponse(error == null ? "media-saved" : "media-error", id, null, error);
+                return;
+            }
+            if ("media-abort".equals(type)) {
+                Log.w(TAG, "网页主动中止媒体保存，id=" + id);
+                mediaStoreBridge.abort(id);
+            }
+        } catch (Exception exception) {
+            Log.e(TAG, "解析 TWA 媒体消息失败，原始消息长度=" + message.length(), exception);
+        }
+    }
+
+    private void postBridgeResponse(String type, String id, @Nullable Integer index, @Nullable String error) {
+        JSONObject response = new JSONObject();
+        try {
+            response.put("type", type);
+            response.put("id", id);
+            if (index != null) {
+                response.put("index", index);
+            }
+            if (error != null) {
+                response.put("error", error);
+            }
+        } catch (Exception exception) {
+            return;
+        }
+
+        mainHandler.post(() -> {
+            if (!postMessageChannelReady || postMessageSession == null) {
+                return;
+            }
+            int result = postMessageSession.postMessage(response.toString(), null);
+            Log.d(TAG, "发送桥接响应，type=" + type + ", id=" + id + ", result=" + result);
+        });
+    }
+
+    private final class BridgeCallback extends QualityEnforcer {
+        @Override
+        public void onNavigationEvent(int navigationEvent, @Nullable Bundle extras) {
+            super.onNavigationEvent(navigationEvent, extras);
+            Log.d(TAG, "TWA 导航事件=" + navigationEvent);
+            if (navigationEvent == NAVIGATION_FINISHED) {
+                scheduleChannelRequest(0);
+            }
+        }
+
+        @Override
+        public void onRelationshipValidationResult(
+                int relation,
+                @Nullable Uri requestedOrigin,
+                boolean result,
+                @Nullable Bundle extras
+        ) {
+            super.onRelationshipValidationResult(relation, requestedOrigin, result, extras);
+            if (relation != CustomTabsService.RELATION_USE_AS_ORIGIN || !WEB_ORIGIN.equals(requestedOrigin)) {
+                return;
+            }
+            originValidated = result;
+            Log.i(TAG, "TWA 来源验证结果=" + result + ", origin=" + requestedOrigin);
+            if (result) {
+                scheduleChannelRequest(0);
+            } else {
+                Log.w(TAG, "TWA 来源验证失败，请检查 assetlinks.json");
+            }
+        }
+
+        @Override
+        public void onMessageChannelReady(@Nullable Bundle extras) {
+            super.onMessageChannelReady(extras);
+            postMessageChannelReady = true;
+            Log.i(TAG, "PostMessage 通道已就绪");
+            postMessageSession = getCustomTabsSession();
+            if (postMessageSession == null) {
+                Log.e(TAG, "PostMessage 通道已就绪，但无法获取 CustomTabsSession");
+                return;
+            }
+            JSONObject readyMessage = new JSONObject();
+            try {
+                readyMessage.put("type", "twa-bridge-ready");
+                readyMessage.put("version", 1);
+            } catch (Exception exception) {
+                return;
+            }
+            int result = postMessageSession.postMessage(readyMessage.toString(), null);
+            Log.i(TAG, "发送 TWA 桥接就绪消息，result=" + result);
+        }
+
+        @Override
+        public void onPostMessage(String message, @Nullable Bundle extras) {
+            super.onPostMessage(message, extras);
+            handleBridgeMessage(message);
+        }
+    }
 }

twa/app/src/main/java/com/imyeyu/gao/customer/TwaMediaStoreBridge.java

@@ -0,0 +1,249 @@
+/*
+ * Copyright (c) 2026 imyeyu.com
+ *
+ * MIT License
+ */
+package com.imyeyu.gao.customer;
+
+import android.content.ContentResolver;
+import android.content.ContentValues;
+import android.content.Context;
+import android.net.Uri;
+import android.os.Build;
+import android.os.Environment;
+import android.provider.MediaStore;
+import android.util.Log;
+
+import androidx.annotation.Nullable;
+
+import java.io.BufferedOutputStream;
+import java.io.IOException;
+import java.io.OutputStream;
+import java.util.HashMap;
+import java.util.Locale;
+import java.util.Map;
+
+/**
+ * 将 TWA 传来的媒体分块写入 Android 系统相册。
+ */
+final class TwaMediaStoreBridge {
+    private static final String TAG = "GaoTwaMediaStore";
+    private static final long MAX_MEDIA_SIZE = 512L * 1024L * 1024L;
+    private static final int BUFFER_SIZE = 64 * 1024;
+
+    private final ContentResolver contentResolver;
+    private final Map<String, PendingMedia> pendingMediaMap = new HashMap<>();
+
+    TwaMediaStoreBridge(Context context) {
+        contentResolver = context.getContentResolver();
+    }
+
+    synchronized String start(
+            String id,
+            String mimeType,
+            String fileName,
+            long expectedSize
+    ) {
+        Log.i(TAG, "准备创建相册媒体，id=" + id + ", mimeType=" + mimeType + ", fileName=" + fileName
+                + ", expectedSize=" + expectedSize + ", sdk=" + Build.VERSION.SDK_INT);
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
+            Log.w(TAG, "Android 版本低于 10，无法无权限写入相册");
+            return "Android 10 以下系统不支持无权限写入系统相册";
+        }
+        if (id.length() == 0 || id.length() > 128) {
+            return "媒体标识无效";
+        }
+        if (pendingMediaMap.containsKey(id)) {
+            return "媒体传输已存在";
+        }
+        if (expectedSize <= 0 || expectedSize > MAX_MEDIA_SIZE) {
+            return "媒体文件大小超出限制";
+        }
+
+        String normalizedMimeType = normalizeMimeType(mimeType);
+        if (normalizedMimeType == null) {
+            return "只支持照片和视频";
+        }
+
+        Uri mediaUri = null;
+        try {
+            ContentValues values = new ContentValues();
+            values.put(MediaStore.MediaColumns.DISPLAY_NAME, buildDisplayName(fileName, normalizedMimeType));
+            values.put(MediaStore.MediaColumns.MIME_TYPE, normalizedMimeType);
+            values.put(MediaStore.MediaColumns.RELATIVE_PATH, buildRelativePath(normalizedMimeType));
+            values.put(MediaStore.MediaColumns.IS_PENDING, 1);
+
+            mediaUri = contentResolver.insert(getCollectionUri(normalizedMimeType), values);
+            if (mediaUri == null) {
+                Log.e(TAG, "MediaStore insert 返回空 Uri，id=" + id);
+                return "创建相册媒体失败";
+            }
+
+            OutputStream outputStream = contentResolver.openOutputStream(mediaUri);
+            if (outputStream == null) {
+                deleteQuietly(mediaUri);
+                Log.e(TAG, "无法打开 MediaStore 输出流，id=" + id + ", uri=" + mediaUri);
+                return "打开相册媒体失败";
+            }
+            pendingMediaMap.put(id, new PendingMedia(mediaUri, outputStream, expectedSize));
+            Log.i(TAG, "相册媒体创建成功，id=" + id + ", uri=" + mediaUri + ", path="
+                    + buildRelativePath(normalizedMimeType));
+            return null;
+        } catch (Exception exception) {
+            if (mediaUri != null) {
+                deleteQuietly(mediaUri);
+            }
+            Log.e(TAG, "创建相册媒体异常，id=" + id, exception);
+            return "创建相册媒体失败";
+        }
+    }
+
+    synchronized String append(String id, int index, byte[] chunk) {
+        PendingMedia pendingMedia = pendingMediaMap.get(id);
+        if (pendingMedia == null) {
+            return "媒体传输不存在";
+        }
+        if (index != pendingMedia.nextChunkIndex) {
+            abort(id);
+            return "媒体分块顺序错误";
+        }
+        if (chunk.length == 0 || pendingMedia.receivedSize + chunk.length > pendingMedia.expectedSize) {
+            abort(id);
+            return "媒体分块大小错误";
+        }
+
+        try {
+            pendingMedia.outputStream.write(chunk);
+            pendingMedia.outputStream.flush();
+            pendingMedia.receivedSize += chunk.length;
+            pendingMedia.nextChunkIndex++;
+            return null;
+        } catch (IOException exception) {
+            abort(id);
+            Log.e(TAG, "写入相册媒体异常，id=" + id + ", index=" + index, exception);
+            return "写入相册媒体失败";
+        }
+    }
+
+    synchronized String finish(String id) {
+        PendingMedia pendingMedia = pendingMediaMap.remove(id);
+        if (pendingMedia == null) {
+            return "媒体传输不存在";
+        }
+        if (pendingMedia.receivedSize != pendingMedia.expectedSize) {
+            closeQuietly(pendingMedia.outputStream);
+            deleteQuietly(pendingMedia.mediaUri);
+            Log.e(TAG, "媒体内容不完整，id=" + id + ", received=" + pendingMedia.receivedSize
+                    + ", expected=" + pendingMedia.expectedSize);
+            return "媒体内容不完整";
+        }
+
+        try {
+            pendingMedia.outputStream.flush();
+            pendingMedia.outputStream.close();
+            ContentValues values = new ContentValues();
+            values.put(MediaStore.MediaColumns.IS_PENDING, 0);
+            if (contentResolver.update(pendingMedia.mediaUri, values, null, null) != 1) {
+                deleteQuietly(pendingMedia.mediaUri);
+                Log.e(TAG, "发布相册媒体失败，MediaStore update 返回 0，id=" + id);
+                return "发布相册媒体失败";
+            }
+            Log.i(TAG, "相册媒体发布成功，id=" + id + ", uri=" + pendingMedia.mediaUri
+                    + ", bytes=" + pendingMedia.receivedSize);
+            return null;
+        } catch (Exception exception) {
+            closeQuietly(pendingMedia.outputStream);
+            deleteQuietly(pendingMedia.mediaUri);
+            Log.e(TAG, "保存相册媒体异常，id=" + id, exception);
+            return "保存相册媒体失败";
+        }
+    }
+
+    synchronized void abort(String id) {
+        PendingMedia pendingMedia = pendingMediaMap.remove(id);
+        if (pendingMedia == null) {
+            return;
+        }
+        closeQuietly(pendingMedia.outputStream);
+        deleteQuietly(pendingMedia.mediaUri);
+        Log.w(TAG, "已清理中止的相册媒体，id=" + id + ", uri=" + pendingMedia.mediaUri);
+    }
+
+    synchronized void abortAll() {
+        for (PendingMedia pendingMedia : pendingMediaMap.values()) {
+            closeQuietly(pendingMedia.outputStream);
+            deleteQuietly(pendingMedia.mediaUri);
+        }
+        pendingMediaMap.clear();
+        Log.i(TAG, "已清理全部未完成的相册媒体");
+    }
+
+    @Nullable
+    private static String normalizeMimeType(String mimeType) {
+        String normalizedMimeType = mimeType == null ? "" : mimeType.trim().toLowerCase(Locale.ROOT);
+        if (normalizedMimeType.startsWith("image/")) {
+            return normalizedMimeType.equals("image/*") ? "image/jpeg" : normalizedMimeType;
+        }
+        if (normalizedMimeType.startsWith("video/")) {
+            return normalizedMimeType.equals("video/*") ? "video/mp4" : normalizedMimeType;
+        }
+        return null;
+    }
+
+    private static Uri getCollectionUri(String mimeType) {
+        if (mimeType.startsWith("video/")) {
+            return MediaStore.Video.Media.getContentUri(MediaStore.VOLUME_EXTERNAL_PRIMARY);
+        }
+        return MediaStore.Images.Media.getContentUri(MediaStore.VOLUME_EXTERNAL_PRIMARY);
+    }
+
+    private static String buildRelativePath(String mimeType) {
+        if (mimeType.startsWith("video/")) {
+            return Environment.DIRECTORY_MOVIES + "/糕店管理";
+        }
+        return Environment.DIRECTORY_PICTURES + "/糕店管理";
+    }
+
+    private static String buildDisplayName(String fileName, String mimeType) {
+        String safeFileName = fileName == null ? "" : fileName
+                .replaceAll("[^A-Za-z0-9._-]", "_")
+                .replaceAll("^\\.+$", "");
+        if (safeFileName.length() == 0) {
+            safeFileName = "capture-" + System.currentTimeMillis();
+        }
+        if (safeFileName.lastIndexOf('.') < 0) {
+            safeFileName += mimeType.startsWith("video/") ? ".mp4" : ".jpg";
+        }
+        return safeFileName;
+    }
+
+    private void deleteQuietly(Uri uri) {
+        try {
+            contentResolver.delete(uri, null, null);
+        } catch (Exception ignored) {
+            // 相册清理失败时不能覆盖原始错误。
+        }
+    }
+
+    private static void closeQuietly(OutputStream outputStream) {
+        try {
+            outputStream.close();
+        } catch (IOException ignored) {
+            // 关闭失败时继续清理媒体记录。
+        }
+    }
+
+    private static final class PendingMedia {
+        private final Uri mediaUri;
+        private final OutputStream outputStream;
+        private final long expectedSize;
+        private long receivedSize;
+        private int nextChunkIndex;
+
+        private PendingMedia(Uri mediaUri, OutputStream outputStream, long expectedSize) {
+            this.mediaUri = mediaUri;
+            this.outputStream = new BufferedOutputStream(outputStream, BUFFER_SIZE);
+            this.expectedSize = expectedSize;
+        }
+    }
+}