add ProductStockPackageSummary.vue

.gitignore

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

package.json

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

pnpm-lock.yaml

@@ -4,11 +4,6 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-patchedDependencies:
-  tdesign-mobile-vue@1.16.0:
-    hash: zwjpdqqohmbknbgri7osfh6nzy
-    path: patches/tdesign-mobile-vue@1.16.0.patch
-
 importers:
 
   .:
@@ -36,7 +31,7 @@ importers:
         version: 3.0.4(typescript@5.8.3)(vue@3.5.40(typescript@5.8.3))
       tdesign-mobile-vue:
         specifier: ^1.16.0
-        version: 1.16.0(patch_hash=zwjpdqqohmbknbgri7osfh6nzy)(vue@3.5.40(typescript@5.8.3))
+        version: 1.16.0(vue@3.5.40(typescript@5.8.3))
       timi-tdesign-mobile:
         specifier: link:E:/WebProject/timi-tdesign-mobile
         version: link:../timi-tdesign-mobile
@@ -49,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)
@@ -909,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'}
@@ -1444,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}
@@ -1876,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}
@@ -2768,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
@@ -3338,6 +3353,8 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
+  mutation-observer@1.0.3: {}
+
   nanoid@3.3.16: {}
 
   natural-compare@1.4.0: {}
@@ -3661,7 +3678,7 @@ snapshots:
       '@babel/runtime': 7.29.7
       vue: 3.5.40(typescript@5.8.3)
 
-  tdesign-mobile-vue@1.16.0(patch_hash=zwjpdqqohmbknbgri7osfh6nzy)(vue@3.5.40(typescript@5.8.3)):
+  tdesign-mobile-vue@1.16.0(vue@3.5.40(typescript@5.8.3)):
     dependencies:
       '@babel/runtime': 7.29.7
       '@use-gesture/vanilla': 10.3.1
@@ -3823,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/CustomerProductAPI.ts

@@ -0,0 +1,11 @@
+import { axios } from "timi-web-api";
+import { withCurrentStoreId } from "@/utils/store";
+import type { CustomerProduct, CustomerProductPage, CustomerProductPageResult } from "@/types/CustomerProduct";
+
+const URI = "/gao/sales/order/customer-product";
+
+async function list(page: CustomerProductPage): Promise<CustomerProductPageResult<CustomerProduct>> {
+	return await axios.post(`${URI}/list`, withCurrentStoreId(page));
+}
+
+export default { list };

src/api/FollowUpReminderAPI.ts

@@ -0,0 +1,44 @@
+import { axios } from "timi-web-api";
+import type { PageResult } from "timi-web-api";
+import type {
+	FollowUpReminder,
+	FollowUpReminderPage,
+	FollowUpReminderPayload
+} from "@/types/FollowUpReminder";
+
+const BASE_URI = "/gao/customer/follow-up-reminder";
+
+/** 客户跟进提醒接口。 */
+const FollowUpReminderAPI = {
+	async list(page: FollowUpReminderPage): Promise<PageResult<FollowUpReminder>> {
+		return await axios.post(`${BASE_URI}/list`, page);
+	},
+
+	async detail(id: string): Promise<FollowUpReminder> {
+		return await axios.post(`${BASE_URI}/detail`, undefined, {
+			params: { id }
+		});
+	},
+
+	async create(payload: FollowUpReminderPayload): Promise<string> {
+		return await axios.post(`${BASE_URI}/create`, payload);
+	},
+
+	async update(payload: FollowUpReminderPayload): Promise<void> {
+		return await axios.post(`${BASE_URI}/update`, payload);
+	},
+
+	async complete(id: string): Promise<void> {
+		return await axios.post(`${BASE_URI}/complete`, undefined, {
+			params: { id }
+		});
+	},
+
+	async remove(id: string): Promise<void> {
+		return await axios.post(`${BASE_URI}/delete`, undefined, {
+			params: { id }
+		});
+	}
+};
+
+export default FollowUpReminderAPI;

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/SalesOrderAPI.ts

@@ -13,6 +13,7 @@ import type {
 	SalesOrderCancelRequest,
 	SalesOrderPage,
 	SalesOrderPageResult,
+	SalesOrderSummary,
 	SalesOrderUpdateRequest
 } from "@/types/SalesOrder";
 
@@ -22,6 +23,9 @@ const FUND_URI = "/gao/fund/record";
 async function list(page: SalesOrderPage): Promise<SalesOrderPageResult<SalesOrder>> {
 	return await axios.post(`${ORDER_URI}/list`, withCurrentStoreId(page));
 }
+async function summary(page: SalesOrderPage): Promise<SalesOrderSummary> {
+	return await axios.post(`${ORDER_URI}/summary`, withCurrentStoreId(page));
+}
 async function detail(id: string): Promise<SalesOrder> {
 	return await axios.post(`${ORDER_URI}/detail`, undefined, { params: { id } });
 }
@@ -75,6 +79,7 @@ async function myReceiveRecordDetail(id: string): Promise<FundRecord> {
 
 export default {
 	list,
+	summary,
 	detail,
 	createDirectProduct,
 	update,

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

@@ -79,12 +79,15 @@ html.theme-dark body {
 	text-overflow: unset;
 }
 
-.t-cell__title {
+.t-cell {
 
-	.t-cell__title-text {
+	.t-cell__title {
-		min-width: unset;
+
-		white-space: nowrap;
+		.t-cell__title-text {
-		text-overflow: unset;
+			min-width: unset;
+			white-space: nowrap;
+			text-overflow: unset;
+		}
 	}
 }
 
@@ -93,8 +96,8 @@ html.theme-dark body {
 }
 
 .t-pull-down-refresh {
-	overflow-x: hidden;
+	height: auto;
-	overflow-y: auto;
+	overflow: visible;
 }
 
 .t-dropdown-menu {
@@ -128,10 +131,10 @@ html.theme-dark body {
 	border-radius: .875rem !important;
 
 	&.fallback {
-		color: #2563EB;
+		color: #FFF;
 		display: flex;
 		font-size: 1.25rem;
-		background: #DBEAFE;
+		background: var(--td-brand-color);
 		align-items: center;
 		font-weight: 600;
 		justify-content: center;
@@ -158,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/CustomerProfileCard.vue

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

src/components/CustomerSelector.vue

@@ -70,6 +70,7 @@ type SelectionMode = "single" | "multiple";
 
 interface Props {
 	enableScan?: boolean;
+	initialKeyword?: string;
 	modelValue: string | string[];
 	visible: boolean;
 	selectionMode?: SelectionMode;
@@ -78,6 +79,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
 	enableScan: true,
+	initialKeyword: "",
 	selectionMode: "single",
 	storeId: ""
 });
@@ -289,6 +291,7 @@ watch(() => props.visible, async (value) => {
 		return;
 	}
 	syncDraftSelection();
+	keyword.value = props.initialKeyword;
 	await reloadCustomers();
 });
 

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

@@ -10,7 +10,7 @@
 		<div class="content">
 			<div v-text="confirmText" />
 			<div v-if="canUpdate" class="photo-part">
-				<photo-scroller
+				<media-selector
 					title="核销照片（可选）"
 					:model-value="photoList"
 					v-model:photo-items="photoItemList"
@@ -18,7 +18,9 @@
 					:loading="isPhotoUploading"
 					:show-remove="false"
 					:show-viewer-actions="false"
-					@add="capturePhoto"
+					@add="selectPhotoFile"
+					@capture-photo="capturePhoto"
+					@capture-video="captureVideo"
 				/>
 			</div>
 		</div>
@@ -27,21 +29,38 @@
 		ref="photoInputRef"
 		class="file-input"
 		type="file"
-		accept="image/*"
+		accept="*/*"
 		multiple
 		@change="handlePhotoSelected"
 	>
+	<input
+		ref="photoCameraInputRef"
+		class="file-input"
+		type="file"
+		accept="image/*"
+		capture="environment"
+		@change="handlePhotoSelected"
+	>
+	<input
+		ref="videoInputRef"
+		class="file-input"
+		type="file"
+		accept="video/*"
+		capture="environment"
+		@change="handlePhotoSelected"
+	>
 </template>
 
 <script setup lang="ts">
 import { AttachmentAPI, type Attachment } from "timi-web-api";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import type { EventRecord } from "@/types/EventRecord";
 import type { PhotoItem } from "@/types/Photo";
 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"
@@ -65,6 +84,8 @@ const emit = defineEmits<{
 }>();
 
 const photoInputRef = ref<HTMLInputElement>();
+const photoCameraInputRef = ref<HTMLInputElement>();
+const videoInputRef = ref<HTMLInputElement>();
 const photoItemList = ref<PhotoItem[]>([]);
 const isPhotoUploading = ref(false);
 const isSubmitting = ref(false);
@@ -87,32 +108,43 @@ function buildPhotoItemList(attachmentList?: Attachment[]): PhotoItem[] {
 		.map(item => ({
 			attachment: item,
 			attachType: item.attachType || "PHOTO",
+			mimeType: item.mimeType,
 			previewUrl: getAttachmentReadURL(item.id || ""),
 			url: getAttachmentReadURL(item.id || "", 90)
 		}));
 }
 
 function capturePhoto(): void {
+	photoCameraInputRef.value?.click();
+}
+
+function selectPhotoFile(): void {
 	photoInputRef.value?.click();
 }
 
+function captureVideo(): void {
+	videoInputRef.value?.click();
+}
+
 async function handlePhotoSelected(event: Event): Promise<void> {
 	const input = event.target as HTMLInputElement;
 	const fileList = Array.from(input.files || []);
 	if (!fileList.length) {
 		return;
 	}
+	saveCapturedFilesFromInput(input, fileList);
 
 	isPhotoUploading.value = true;
 	try {
 		const compressedFileList = await compressUploadImageList(fileList);
 		const tempFileList = await AttachmentAPI.upload(compressedFileList);
-		for (const item of tempFileList) {
+		for (const [index, item] of tempFileList.entries()) {
 			if (!item.id) {
 				continue;
 			}
 			photoItemList.value.push({
 				attachType: "PHOTO",
+				mimeType: fileList[index]?.type,
 				tempFileId: item.id,
 				url: AttachmentAPI.getTempReadURL(item.id)
 			});

src/components/PageTransition.vue

@@ -1,179 +0,0 @@
-<template>
-	<div class="page-transition">
-		<router-view v-slot="{ Component }">
-			<transition :name="transitionName">
-				<div :key="route.path" class="pages">
-					<component :is="Component" />
-				</div>
-			</transition>
-		</router-view>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { RouteLocationNormalized } from "vue-router";
-import { useGlobalUIStore } from "@/store/globalUI";
-
-defineOptions({
-	name: "PageTransition"
-});
-
-const router = useRouter();
-const route = useRoute();
-const globalUIStore = useGlobalUIStore();
-
-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: hidden;
-
-	// 此 wrapper 必须独立，不可将 class=pages 直接加在 <component> 上：
-	// 否则页面 root element 与动画容器同为一个 DOM 节点，
-	// 页面自身的 padding 会使 position:fixed; width:100% 的盒子溢出视口。
-	.pages {
-		height: 100%;
-		background: v-bind(pageBackground);
-		overflow-x: hidden;
-	}
-
-	// ---------- push-left / push-right 公共激活状态 ----------
-
-	.push-left-enter-active,
-	.push-left-leave-active,
-	.push-right-enter-active,
-	.push-right-leave-active {
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		transition: transform @duration @easing, opacity .2s linear;
-		backface-visibility: hidden;
-	}
-
-	// ---------- 前进：下一页从右滑入，当前页缩退到左侧 ----------
-
-	.push-left-enter-from {
-		transform: translate3d(100%, 0, 0);
-		box-shadow: -4px 0 16px rgba(0, 0, 0, @shadow-intensity);
-	}
-
-	.push-left-enter-to {
-		transform: translate3d(0, 0, 0);
-	}
-
-	.push-left-leave-active {
-		transition: all @duration @easing, filter .3s;
-	}
-
-	.push-left-leave-to {
-		filter: brightness(@brightness);
-		transform: translate3d(-@page-offset, 0, 0);
-	}
-
-	// ---------- 返回：当前页从右滑出，上一页从左侧复位 ----------
-
-	.push-right-enter-active {
-		z-index: 0;
-		transition: transform @duration @easing, opacity .3s;
-	}
-
-	.push-right-enter-from {
-		transform: translate3d(-@page-offset, 0, 0);
-	}
-
-	.push-right-enter-to {
-		transform: translate3d(0, 0, 0);
-	}
-
-	.push-right-leave-active {
-		z-index: 1;
-		transition: transform @duration @easing, box-shadow .3s;
-	}
-
-	.push-right-leave-from {
-		transform: translate3d(0, 0, 0);
-	}
-
-	.push-right-leave-to {
-		transform: translate3d(105%, 0, 0);
-		box-shadow: 4px 0 16px rgba(0, 0, 0, @shadow-intensity);
-	}
-}
-</style>

src/components/PhotoField.vue

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

src/components/PhotoScroller.vue

@@ -1,569 +0,0 @@
-<template>
-	<div v-bind="$attrs" class="photo-scroller">
-		<div class="t-form__label" :class="{ required }">
-			<slot name="title">
-				<span v-text="title" />
-			</slot>
-		</div>
-		<div class="photo-shell" :class="{ 'without-add': !showAdd }">
-			<div class="items">
-				<div v-if="!displayPhotoList.length" class="empty" v-text="emptyText" />
-				<div
-					v-for="(item, index) in displayPhotoList"
-					:key="`${item.url}-${item.attachType}-${index}`"
-					class="item"
-				>
-					<t-button variant="text" class="preview-trigger" @click="openPhotoViewer(index)">
-						<t-image
-							class="image"
-							:src="item.url"
-							:alt="getAttachTypeText(item.attachType)"
-							fit="cover"
-						/>
-					</t-button>
-					<div
-						v-if="showTypeLabel"
-						class="type-label white glass-black clip-text"
-						v-text="getAttachTypeText(item.attachType)"
-					/>
-					<t-button
-						v-if="showRemove && hasRemovablePhotos"
-						theme="danger"
-						class="remove"
-						shape="circle"
-						size="extra-small"
-						@click="removePhoto(index)"
-					>
-						<t-icon name="close" size="1rem" />
-					</t-button>
-				</div>
-			</div>
-			<div v-if="showAdd" class="add-trigger">
-				<t-button
-					v-if="addActionList.length === 1"
-					theme="primary"
-					variant="dashed"
-					class="add"
-					:loading="isBusy"
-					:disabled="isBusy"
-					@click="handleAddAction(addActionList[0])"
-				>
-					<span v-text="addActionList[0].text" />
-				</t-button>
-				<t-popover
-					v-else
-					v-model:visible="addPopoverVisible"
-					placement="left"
-					theme="light"
-				>
-					<t-button
-						class="add"
-						theme="primary"
-						variant="dashed"
-						:loading="isBusy"
-						:disabled="isBusy"
-					>
-						<span v-text="addText" />
-					</t-button>
-					<template #content>
-						<div class="add-actions">
-							<t-button
-								v-for="(action, index) in addActionList"
-								:key="`${action.emit}-${index}`"
-								variant="text"
-								:theme="action.theme"
-								class="add-action"
-								:disabled="isBusy"
-								@click="handleAddAction(action)"
-							>
-								<template #icon v-if="action.icon">
-									<t-icon :name="action.icon" />
-								</template>
-								<span v-text="action.text" />
-							</t-button>
-						</div>
-					</template>
-				</t-popover>
-			</div>
-		</div>
-		<input
-			v-if="props.upload"
-			ref="fileInput"
-			class="file-input"
-			type="file"
-			accept="image/*"
-			multiple
-			@change="handleFileChange"
-		/>
-	</div>
-	<t-image-viewer
-		v-model:visible="photoViewerVisible"
-		:images="photoViewerImages"
-		show-index
-		@close="photoActionVisible = false"
-		@index-change="handlePhotoViewerIndexChange"
-	>
-		<template #delete-btn>
-			<div v-if="showViewerActions" class="viewer-action" @click.stop>
-				<t-popover
-					v-model:visible="photoActionVisible"
-					placement="bottom"
-					theme="light"
-					:show-arrow="false"
-				>
-					<t-button class="white" variant="text">
-						<t-icon name="ellipsis" />
-					</t-button>
-					<template #content>
-						<div class="actions" @click.stop>
-							<div class="title">修改类型</div>
-							<div class="type">
-								<t-button
-									class="button"
-									v-for="item in attachTypeOptions"
-									:key="item.value"
-									:theme="item.value === currentPhotoItem?.attachType ? 'primary' : 'default'"
-									variant="text"
-									size="extra-small"
-									:disabled="isSubmitting"
-									@click="changePhotoType(item.value)"
-								>
-									<span v-text="item.text" />
-								</t-button>
-							</div>
-							<t-divider />
-							<t-button
-								class="button delete-action"
-								theme="danger"
-								size="extra-small"
-								variant="text"
-								:disabled="isSubmitting"
-								@click="removeCurrentPhoto"
-							>
-								<template #icon>
-									<t-icon name="delete" />
-								</template>
-								删除
-							</t-button>
-						</div>
-					</template>
-				</t-popover>
-			</div>
-		</template>
-	</t-image-viewer>
-</template>
-
-<script setup lang="ts">
-import type { ButtonProps } from "tdesign-mobile-vue";
-import type { PhotoItem } from "@/types/Photo";
-import { Message } from "@/utils/message";
-
-defineOptions({
-	inheritAttrs: false
-});
-
-interface Props {
-	addActions?: readonly AddAction[];
-	addText?: string;
-	editMode?: boolean;
-	emptyText?: string;
-	fallbackImage?: string;
-	loading?: boolean;
-	modelValue: string[];
-	photoItems?: readonly PhotoItem[];
-	required?: boolean;
-	upload?: (fileList: File[]) => Promise<PhotoItem[]>;
-	showViewerActions?: boolean;
-	showAdd?: boolean;
-	showRemove?: boolean;
-	showTypeLabel?: boolean;
-	submit?: (photoItems: PhotoItem[]) => Promise<void>;
-	title?: string;
-}
-
-type AddAction = {
-	icon?: string;
-	emit: string;
-	text: string;
-	theme?: ButtonProps["theme"];
-};
-
-type ViewerPhotoItem = PhotoItem & {
-	sourceIndex: number;
-};
-
-const ATTACH_TYPE_TEXT_MAP: Record<string, string> = {
-	ADDITIONAL: "附加照片",
-	PHOTO: "照片",
-	POINT_CARD: "积分卡",
-	OTHER: "其他文件"
-};
-
-const props = withDefaults(defineProps<Props>(), {
-	addActions: () => [],
-	title: "照片列表",
-	addText: "拍照",
-	editMode: false,
-	emptyText: "暂无照片",
-	loading: false,
-	required: false,
-	showAdd: true,
-	showRemove: true,
-	showTypeLabel: true,
-	showViewerActions: true
-});
-
-type Emits = {
-	(event: string): void;
-	(event: "update:modelValue", value: string[]): void;
-	(event: "update:photoItems", value: PhotoItem[]): void;
-};
-
-const emit = defineEmits<Emits>();
-
-const photoViewerVisible = ref(false);
-const photoViewerImages = ref<string[]>([]);
-const photoViewerItems = ref<ViewerPhotoItem[]>([]);
-const photoViewerIndex = ref(0);
-const photoActionVisible = ref(false);
-const isSubmitting = ref(false);
-const isUploading = ref(false);
-const addPopoverVisible = ref(false);
-const fileInput = ref<HTMLInputElement>();
-const addActionList = computed<readonly AddAction[]>(() => props.addActions.length ? props.addActions : [{
-	emit: "add",
-	text: props.addText,
-	theme: "default"
-}]);
-const isBusy = computed(() => props.loading || isSubmitting.value || isUploading.value);
-const displayPhotoList = computed<PhotoItem[]>(() => {
-	if (props.photoItems?.length) {
-		return props.photoItems.map(normalizePhotoItem);
-	}
-	if (props.modelValue.length) {
-		return props.modelValue.map(url => ({ url, attachType: "PHOTO" }));
-	}
-
-	return props.fallbackImage ? [{ url: props.fallbackImage, attachType: "PHOTO" }] : [];
-});
-const hasRemovablePhotos = computed(() => !!props.photoItems?.length || !!props.modelValue.length);
-const attachTypeOptions = [
-	{ text: "照片", value: "PHOTO" },
-	{ text: "积分卡", value: "POINT_CARD" },
-	{ text: "其他文件", value: "OTHER" }
-] as const;
-const currentPhotoItem = computed(() => photoViewerItems.value[photoViewerIndex.value]);
-
-function getAttachTypeText(attachType?: string): string {
-	return ATTACH_TYPE_TEXT_MAP[attachType || "PHOTO"] || "其他文件";
-}
-
-function handleAddAction(action?: AddAction): void {
-	if (!action) {
-		return;
-	}
-	addPopoverVisible.value = false;
-	if (action.emit === "add" && props.upload) {
-		fileInput.value?.click();
-		return;
-	}
-	emit(action.emit);
-}
-
-async function handleFileChange(event: Event): Promise<void> {
-	const input = event.target as HTMLInputElement;
-	const fileList = Array.from(input.files || []);
-	if (!fileList.length || !props.upload) {
-		return;
-	}
-
-	isUploading.value = true;
-	try {
-		const uploadedPhotoItems = await props.upload(fileList);
-		if (!uploadedPhotoItems.length) {
-			return;
-		}
-		const nextPhotoItems = [...displayPhotoList.value, ...uploadedPhotoItems];
-		emit("update:photoItems", nextPhotoItems);
-		emit("update:modelValue", nextPhotoItems.map(item => item.url));
-	} catch {
-		Message.error("照片上传失败");
-	} finally {
-		isUploading.value = false;
-		input.value = "";
-	}
-}
-
-async function removePhoto(index: number): Promise<void> {
-	if (index < 0 || displayPhotoList.value.length <= index) {
-		return;
-	}
-
-	await applyPhotoItems(displayPhotoList.value.filter((_, itemIndex) => itemIndex !== index));
-}
-
-function openPhotoViewer(index: number): void {
-	const viewerItems = displayPhotoList.value.map((item, sourceIndex) => ({ item, sourceIndex }));
-	const rotatedItems = [...viewerItems.slice(index), ...viewerItems.slice(0, index)];
-	photoViewerItems.value = rotatedItems.map(({ item, sourceIndex }) => ({ ...item, sourceIndex }));
-	photoViewerImages.value = photoViewerItems.value.map(item => item.previewUrl || item.url);
-	photoViewerIndex.value = 0;
-	photoActionVisible.value = false;
-	photoViewerVisible.value = true;
-}
-
-function handlePhotoViewerIndexChange(index: number): void {
-	photoViewerIndex.value = index;
-	photoActionVisible.value = false;
-}
-
-async function changePhotoType(attachType: string): Promise<void> {
-	const currentItem = currentPhotoItem.value;
-	if (!currentItem || currentItem.attachType === attachType) {
-		photoActionVisible.value = false;
-		return;
-	}
-
-	const nextPhotoItems = displayPhotoList.value.map((item, index) => index === currentItem.sourceIndex ? {
-		...item,
-		attachType
-	} : item);
-	await applyPhotoItems(nextPhotoItems);
-}
-
-async function removeCurrentPhoto(): Promise<void> {
-	const currentItem = currentPhotoItem.value;
-	if (!currentItem) {
-		return;
-	}
-
-	await applyPhotoItems(displayPhotoList.value.filter((_, index) => index !== currentItem.sourceIndex));
-}
-
-async function applyPhotoItems(nextPhotoItems: PhotoItem[]): Promise<void> {
-	if (isSubmitting.value) {
-		return;
-	}
-
-	if (!props.editMode && !props.submit) {
-		Message.warning("展示模式未配置照片保存方法");
-		return;
-	}
-
-	if (!props.editMode) {
-		isSubmitting.value = true;
-		try {
-			await props.submit!(nextPhotoItems);
-		} catch {
-			Message.error("照片修改失败");
-			return;
-		} finally {
-			isSubmitting.value = false;
-		}
-	}
-
-	emit("update:photoItems", nextPhotoItems);
-	emit("update:modelValue", nextPhotoItems.map(item => item.url));
-	photoActionVisible.value = false;
-	photoViewerVisible.value = false;
-}
-
-function normalizePhotoItem(item: PhotoItem): PhotoItem {
-	return {
-		...item,
-		attachType: item.attachType || item.attachment?.attachType || "PHOTO"
-	};
-}
-</script>
-
-<style scoped lang="less">
-.photo-scroller {
-	gap: .375rem;
-	width: 100%;
-	display: grid;
-
-	.file-input {
-		display: none;
-	}
-
-	.photo-shell {
-		display: grid;
-		gap: .75rem;
-		grid-template-columns: minmax(0, 1fr) 5.5rem;
-		align-items: start;
-
-		&.without-add {
-			grid-template-columns: minmax(0, 1fr);
-		}
-
-		.items {
-			gap: .75rem;
-			width: 100%;
-			height: 100%;
-			min-width: 0;
-			display: flex;
-			overflow-x: auto;
-			overflow-y: hidden;
-			-webkit-overflow-scrolling: touch;
-			scrollbar-width: thin;
-
-			.empty {
-				width: 100%;
-				color: #52607a;
-				display: flex;
-				padding: 1rem 0;
-				align-items: center;
-				justify-content: center;
-				background: #f8fbff;
-				border-radius: 1rem;
-			}
-
-			.item {
-				width: 5.5rem;
-				height: 5.5rem;
-				flex: 0 0 5.5rem;
-				position: relative;
-				overflow: hidden;
-				border-radius: 1rem;
-
-				.preview-trigger {
-					padding: 0;
-					border: 0;
-					width: 100%;
-					height: 100%;
-					display: block;
-					cursor: pointer;
-					background: transparent;
-
-					.image {
-						height: 100%;
-					}
-				}
-
-				.type-label {
-					width: 100%;
-					bottom: 0;
-					padding: .125rem .5rem;
-					position: absolute;
-					overflow: hidden;
-					font-size: .875rem;
-					text-align: center;
-					line-height: 1.2;
-					border-radius: 0 0 1rem 1rem;
-					pointer-events: none;
-				}
-
-				.remove {
-					top: .375rem;
-					right: .375rem;
-					position: absolute;
-
-					:deep(.t-button__content) {
-						display: flex;
-						align-items: center;
-					}
-				}
-			}
-		}
-	}
-
-	.t-form__label {
-		&.required::before {
-			color: var(--td-error-color, #e34d59);
-			content: "*";
-			margin-right: .25rem;
-		}
-	}
-
-	.add-trigger {
-		--td-popover-padding: 0 .5rem;
-		width: 5.5rem;
-		height: 5.5rem;
-
-		:deep(.t-popover__content) {
-			border-radius: .875rem;
-		}
-
-		.add {
-			--td-button-border-radius: .875rem;
-
-			width: 5.5rem;
-			height: 5.5rem;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.add-actions {
-			gap: .25rem;
-			display: grid;
-			padding: .5rem 0;
-
-			.add-action {
-				--td-button-medium-height: 32px;
-				--td-button-medium-padding-horizontal: 10px;
-
-				gap: .5rem;
-				width: 100%;
-				position: relative;
-				font-weight: unset;
-				justify-content: start;
-			}
-		}
-	}
-}
-
-.viewer-action {
-	color: #fff;
-	margin-left: -1rem;
-
-	.actions {
-		display: flex;
-		min-width: 8rem;
-		flex-direction: column;
-
-		.title {
-			padding: 0 .75rem;
-			font-weight: 700;
-		}
-
-		.type {
-			display: flex;
-			justify-content: start;
-			flex-direction: column;
-
-			.button {
-				text-indent: 1.5em;
-			}
-		}
-
-		.button {
-			justify-content: start;
-		}
-	}
-}
-
-:global(html.theme-dark) {
-	.photo-scroller {
-		.field-title,
-		.photo-empty {
-			color: #94a3b8;
-		}
-
-		.photo-empty {
-			color: #e2e8f0;
-			background: rgba(15, 23, 42, .72);
-			border-color: rgba(148, 163, 184, .16);
-		}
-
-		.add {
-			background: rgba(37, 99, 235, .16);
-			border-color: rgba(96, 165, 250, .28);
-
-			span {
-				color: #93c5fd;
-			}
-		}
-	}
-}
-</style>

src/components/ProductSelector.vue

@@ -8,27 +8,8 @@
 		@click="open"
 	>
 		<span class="picker-text" v-text="selectedProductName || props.placeholder" />
-		<template #help>
-			<div v-if="selectedSku" class="selected-tags">
-				<t-tag
-					v-for="entry in selectedSkuSpecEntries"
-					:key="`${entry.specName}-${entry.valueName}`"
-					size="small"
-					theme="primary"
-					variant="light-outline"
-					:content="entry.valueName"
-				/>
-				<t-tag
-					v-if="!selectedSkuSpecEntries.length"
-					size="small"
-					theme="primary"
-					variant="light-outline"
-					:content="selectedSku.specSummary || selectedSku.name || '默认 SKU'"
-				/>
-				<t-tag v-if="selectedUnit?.name" size="small" :content="selectedUnit.name" />
-			</div>
-		</template>
 	</t-form-item>
+	<product-sku-form-item :sku="selectedSku" :unit="selectedUnit" />
 	<bottom-popup
 		v-model="visible"
 		title="选择产品 SKU"
@@ -37,84 +18,75 @@
 		@left-button-click="close"
 	>
 		<div class="popup">
-			<div class="products">
+			<div class="search-wrap">
-				<div class="search-wrap">
+				<t-input v-model="keyword" class="search" borderless placeholder="搜索产品名称或编码" />
-					<t-input v-model="keyword" class="search" borderless placeholder="搜索产品名称或编码" />
+			</div>
-				</div>
+			<div class="items">
-				<div class="items">
+				<t-collapse
-					<t-collapse
+					v-if="visibleProductList.length"
-						v-if="visibleProductList.length"
+					v-model="expandedProductKeyList"
-						v-model="expandedProductKeyList"
+					class="collapse"
-						class="collapse"
+					theme="card"
-						theme="card"
+					:expand-mutex="true"
-						:expand-mutex="true"
+					@change="handleProductChange"
-						@change="handleProductChange"
+				>
+					<t-collapse-panel
+						class="item"
+						v-for="(product, productIndex) in visibleProductList"
+						:key="getProductKey(product, productIndex)"
+						:value="getProductKey(product, productIndex)"
+						placement="bottom"
 					>
-						<t-collapse-panel
+						<template #header>
-							v-for="(product, productIndex) in visibleProductList"
+							<div class="header">
-							:key="getProductKey(product, productIndex)"
+								<t-image
-							:value="getProductKey(product, productIndex)"
+									v-if="getProductPhotoURL(product)"
-							class="panel"
+									:src="getProductPhotoURL(product)"
-							placement="bottom"
+									:alt="product.name || '产品图片'"
-						>
+									fit="cover"
-							<template #header>
+									class="avatar"
-								<div class="product-header">
+								/>
-									<t-image
+								<div v-else class="avatar fallback" v-text="(product.name || product.code || '产').slice(0, 1)" />
-										v-if="getProductPhotoURL(product)"
+								<strong class="clip-text" v-text="product.name || '未命名产品'" />
-										:src="getProductPhotoURL(product)"
-										:alt="product.name || '产品图片'"
-										fit="cover"
-										class="avatar"
-									/>
-									<div v-else class="avatar fallback" v-text="(product.name || product.code || '产').slice(0, 1)" />
-									<div class="product-info">
-										<strong v-text="product.name || '未命名产品'" />
-										<span v-text="`${product.code || '-'} · ${product.skuList?.length || 0} 个 SKU`" />
-									</div>
-								</div>
-							</template>
-							<div v-if="isExpandedProduct(product, productIndex)" class="selection">
-								<div v-if="specList.length" class="specs">
-									<div v-for="spec in specList" :key="spec.id || spec.name" class="spec">
-										<strong v-text="spec.name" />
-										<div class="values">
-											<t-button
-												v-for="value in enabledValues(spec)"
-												:key="value.id"
-												size="extra-small"
-												:theme="selectedSpecValueMap[spec.id || ''] === value.id ? 'primary' : 'default'"
-												:variant="selectedSpecValueMap[spec.id || ''] === value.id ? 'base' : 'outline'"
-												:content="value.name"
-												@click="selectSpecValue(spec.id || '', value.id || '')"
-											/>
-										</div>
-									</div>
-								</div>
-								<div v-if="matchedSku" class="sku-card">
-									<div class="sku-title">
-										<strong v-text="matchedSku.name || matchedSku.specSummary || '默认 SKU'" />
-										<span v-if="matchedSku.code" v-text="matchedSku.code" />
-									</div>
-									<div class="units">
-										<t-button
-											v-for="unit in saleableUnits(matchedSku)"
-											:key="unit.id"
-											size="small"
-											:theme="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'primary' : 'default'"
-											:variant="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'base' : 'outline'"
-											@click="selectUnit(matchedSku, unit.id || '')"
-										>
-											<span v-text="unit.name" />
-											<span v-if="unit.salePrice !== null && unit.salePrice !== undefined" class="price" v-text="`￥${formatProductAmount(unit.salePrice)}`" />
-										</t-button>
-									</div>
-								</div>
-								<div v-else class="empty" v-text="specList.length ? '请选择每个规格项的规格值' : '暂无可售 SKU'" />
 							</div>
-						</t-collapse-panel>
+						</template>
-					</t-collapse>
+						<div v-if="isExpandedProduct(product, productIndex)" class="selection">
-					<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
+							<div v-if="specList.length" class="specs">
-				</div>
+								<div v-for="spec in specList" :key="spec.id || spec.name" class="spec">
+									<strong v-text="spec.name" />
+									<div class="values">
+										<t-button
+											v-for="value in enabledValues(spec)"
+											:key="value.id"
+											size="extra-small"
+											:theme="selectedSpecValueMap[spec.id || ''] === value.id ? 'primary' : 'default'"
+											:variant="selectedSpecValueMap[spec.id || ''] === value.id ? 'base' : 'outline'"
+											:content="value.name"
+											@click="selectSpecValue(spec.id || '', value.id || '')"
+										/>
+									</div>
+								</div>
+							</div>
+							<div v-if="matchedSku" class="sku-card">
+								<div class="units">
+									<t-button
+										v-for="unit in saleableUnits(matchedSku)"
+										:key="unit.id"
+										size="small"
+										:theme="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'primary' : 'default'"
+										:variant="props.modelValue?.skuId === matchedSku.id && props.modelValue?.skuUnitId === unit.id ? 'base' : 'outline'"
+										@click="selectUnit(matchedSku, unit.id || '')"
+									>
+										<span v-text="unit.name" />
+										<span v-if="unit.salePrice !== null && unit.salePrice !== undefined" class="price" v-text="`￥${formatProductAmount(unit.salePrice)}`" />
+									</t-button>
+								</div>
+							</div>
+							<div v-else class="empty" v-text="specList.length ? '请选择每个规格项的规格值' : '暂无可售 SKU'" />
+						</div>
+					</t-collapse-panel>
+				</t-collapse>
+				<div v-else class="empty" v-text="loading ? '正在加载可售产品' : '暂无可售产品'" />
 			</div>
 		</div>
 	</bottom-popup>
@@ -123,10 +95,18 @@
 <script setup lang="ts">
 import { BottomPopup } from "timi-tdesign-mobile";
 import ProductAPI from "@/api/ProductAPI";
-import type { Product, ProductSelection, ProductSku, ProductSkuUnit, ProductSpec, ProductSpecValue } from "@/types/Product";
+import ProductSkuFormItem from "@/components/ProductSkuFormItem.vue";
+import type {
+	Product,
+	ProductSelection,
+	ProductSku,
+	ProductSkuUnit,
+	ProductSpec,
+	ProductSpecValue
+} from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
-import { formatProductAmount, getProductPhotoURL, getProductSkuSpecEntries } from "@/utils/product";
+import { formatProductAmount, getProductPhotoURL } from "@/utils/product";
 
 interface Props {
 	modelValue: { skuId: string; skuUnitId: string } | undefined;
@@ -155,10 +135,9 @@ const selectedProduct = computed(() => {
 	}
 	return props.selectedProduct || productList.value.find(item => item.skuList?.some(sku => sku.id === props.modelValue?.skuId));
 });
-const selectedSku = computed(() => selectedProduct.value?.skuList?.find(item => item.id === props.modelValue?.skuId));
-const selectedUnit = computed(() => selectedSku.value?.unitList?.find(item => item.id === props.modelValue?.skuUnitId));
 const selectedProductName = computed(() => selectedProduct.value?.name || "");
-const selectedSkuSpecEntries = computed(() => getProductSkuSpecEntries(selectedSku.value || { specValueIdList: [] }, selectedProduct.value?.specList || []));
+const selectedSku = computed(() => selectedProduct.value?.skuList?.find(sku => sku.id === props.modelValue?.skuId));
+const selectedUnit = computed(() => selectedSku.value?.unitList?.find(unit => unit.id === props.modelValue?.skuUnitId));
 const filteredProductList = computed(() => {
 	const text = keyword.value.toLocaleLowerCase();
 	return productList.value.filter(item => !text || `${item.name}${item.code}`.toLocaleLowerCase().includes(text));
@@ -257,142 +236,98 @@ function selectUnit(sku: ProductSku, skuUnitId: string): void {
 
 <style scoped lang="less">
 .product-selector {
+
 	.picker-text {
 		color: var(--td-text-color-primary);
 	}
-
-	.selected-tags {
-		gap: .375rem;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-	}
 }
 
 .popup {
 	height: 100%;
-	min-height: 0;
 	padding: 1rem 0;
-	overflow: hidden;
 	display: flex;
+	overflow: hidden;
+	min-height: 0;
 	flex-direction: column;
 
-	.selection {
+	.search-wrap {
-		overflow-y: auto;
+		z-index: 1;
+		padding: 0 0 .75rem;
 
-		.specs {
+		.search {
-			gap: 1rem;
+			--td-input-vertical-padding: 8px 14px;
-			display: flex;
-			flex-direction: column;
 
-			.spec {
+			margin: 0 1rem;
-				gap: .5rem;
+			border: 1px solid var(--td-component-border);
-				display: flex;
-				flex-direction: column;
-
-				.values,
-				.units {
-					gap: .5rem;
-					display: flex;
-					flex-wrap: wrap;
-				}
-			}
-		}
-
-		.sku-card {
-			padding: .75rem;
-			background: var(--td-bg-color-secondarycontainer);
 			border-radius: .875rem;
-
-			.sku-title {
-				gap: .5rem;
-				display: flex;
-				align-items: baseline;
-				justify-content: space-between;
-
-				span {
-					color: var(--td-text-color-secondary);
-					font-size: .75rem;
-				}
-			}
-
-			.units {
-				gap: .5rem;
-				display: flex;
-				margin-top: .75rem;
-				flex-wrap: wrap;
-
-				.price {
-					margin-left: .25rem;
-					font-size: .75rem;
-				}
-			}
 		}
 	}
 
-	.products {
+	.items {
-		height: 100%;
+		flex: 1;
 		min-height: 0;
-		display: flex;
+		overflow-y: auto;
-		flex-direction: column;
+		padding-bottom: env(safe-area-inset-bottom, 0);
 
-		.search-wrap {
+		.collapse {
-			z-index: 1;
+			margin: 0;
-			padding: 0 0 .75rem;
 
-			.search {
+			.item {
-				--td-input-vertical-padding: 8px 14px;
+				--td-collapse-content-padding: .25rem 1rem .75rem 1rem;
 
-				margin: 0 1rem;
+				.header {
-				border: 1px solid var(--td-component-border);
+					gap: .75rem;
-				border-radius: .875rem;
-			}
-		}
-
-		.items {
-			flex: 1;
-			min-height: 0;
-			overflow-y: auto;
-			padding-bottom: env(safe-area-inset-bottom, 0);
-
-			.collapse {
-				margin: 0;
-			}
-
-			.product-header {
-				gap: .75rem;
-				display: flex;
-				min-width: 0;
-				align-items: center;
-
-				.avatar {
-					width: 3.5rem;
-					height: 3.5rem;
-					flex: 0 0 auto;
-				}
-
-				.product-info {
-					gap: .25rem;
 					display: flex;
 					min-width: 0;
-					flex: 1;
+					align-items: center;
-					flex-direction: column;
 
-					strong,
+					.avatar {
-					span {
+						flex: 0 0 auto;
-						overflow: hidden;
+						width: 2.5rem;
-						white-space: nowrap;
+						height: 2.5rem;
-						text-overflow: ellipsis;
+						border-radius: .75rem !important;
-					}
-
-					span {
-						color: var(--td-text-color-secondary);
-						font-size: .75rem;
 					}
 				}
 
-				&:active {
+				.selection {
-					opacity: .7;
+					overflow-y: auto;
+
+					.specs {
+						gap: .5rem;
+						display: flex;
+						flex-direction: column;
+
+						.spec {
+							gap: .5rem;
+							display: flex;
+							flex-direction: column;
+
+							.values,
+							.units {
+								gap: .5rem;
+								display: flex;
+								flex-wrap: wrap;
+							}
+						}
+					}
+
+					.sku-card {
+						padding: .5rem;
+						border: 1px dashed var(--td-brand-color);
+						margin-top: .5rem;
+						border-radius: .875rem;
+
+						.units {
+							gap: .5rem;
+							display: flex;
+							flex-wrap: wrap;
+
+							.price {
+								margin-left: .25rem;
+								font-size: .75rem;
+							}
+						}
+					}
 				}
 			}
 		}

src/components/ProductSkuFormItem.vue

@@ -0,0 +1,22 @@
+<template>
+	<t-form-item v-if="skuText || unitText" label="产品 SKU" content-align="right">
+		<product-sku-tags :fallback="skuText" :unit="unitText" />
+	</t-form-item>
+</template>
+
+<script setup lang="ts">
+import ProductSkuTags from "@/components/ProductSkuTags.vue";
+import type { ProductSku, ProductSkuUnit } from "@/types/Product";
+
+defineOptions({ name: "ProductSkuFormItem" });
+
+interface Props {
+	sku?: ProductSku;
+	unit?: ProductSkuUnit;
+}
+
+const props = defineProps<Props>();
+
+const skuText = computed(() => props.sku?.name?.trim() || props.sku?.specSummary?.trim() || "");
+const unitText = computed(() => props.unit?.name?.trim() || "");
+</script>

src/components/ProductSkuTags.vue

@@ -8,6 +8,7 @@
 			variant="light-outline"
 			:content="tag.content"
 		/>
+		<t-tag v-if="unitText" size="small" :content="unitText" />
 	</div>
 </template>
 
@@ -15,7 +16,7 @@
 import type { ProductSkuSpecSnapshot } from "@/types/Product";
 import { getProductSkuSnapshotText } from "@/utils/product";
 
-defineOptions({ name: "ProductSkuSnapshotTags" });
+defineOptions({ name: "ProductSkuTags" });
 
 interface Props {
 	productName?: string | null;

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,30 +32,34 @@
 						size="small"
 						:loading="isCreating"
 						:disabled="isCreating"
+						content="新增"
 						@click="createTag"
-					>新增</t-button>
+					/>
 				</template>
 			</div>
-			<div class="list">
+			<div class="list-wrap">
-				<t-tag
+				<div class="list">
-					v-for="(item, index) in visibleTagList"
+					<t-tag
-					:key="item.id"
+						v-for="(item, index) in visibleTagList"
-					class="item"
+						:key="item.id"
-					:theme="isSelected(item) ? 'primary' : 'default'"
+						class="item"
-					size="large"
+						:theme="isSelected(item) ? 'primary' : 'default'"
-					:variant="isSelected(item) ? 'dark' : 'light-outline'"
+						size="large"
-					v-entrance-transition="index * 10"
+						:variant="isSelected(item) ? 'dark' : 'light-outline'"
-					@click="toggleTag(item)"
+						v-entrance-transition="index * 10"
-				>
+						@click="toggleTag(item)"
-					<span v-text="getTagName(item)" />
+					>
-				</t-tag>
+						<span v-text="getTagName(item)" />
-				<div v-if="!visibleTagList.length" class="empty" v-text="emptyText" />
+					</t-tag>
+					<div v-if="!visibleTagList.length" class="center-tips" v-text="emptyText" />
+				</div>
 			</div>
 		</div>
-	</t-popup>
+	</bottom-popup>
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
 import { Message } from "@/utils/message";
 import { useUserStore } from "timi-web-api";
 import TagAPI from "@/api/TagAPI";
@@ -198,33 +205,20 @@ watch(() => props.visible, async (value) => {
 
 <style scoped lang="less">
 .tag-selector {
-	display: flex;
+	height: 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/filter-popup/FilterPopup.ts

@@ -0,0 +1,49 @@
+/** 过滤项支持的值类型。 */
+export type FilterValue = string | number | boolean;
+
+/** 一个过滤组的选中值。 */
+export type FilterValueList = FilterValue[];
+
+/** 过滤组的选项控件类型。 */
+export type FilterControl = "checkbox" | "radio";
+
+/** 过滤弹窗的值模型。 */
+export type FilterModel = Record<string, FilterValueList>;
+
+/** 过滤项配置。 */
+export interface FilterOption {
+	label: string;
+	value: FilterValue;
+	disabled?: boolean;
+}
+
+/** 过滤值变化上下文。 */
+export interface FilterChangeContext {
+	group: FilterGroup;
+	groupKey: string;
+	value: FilterValueList;
+	previousValue: FilterValueList;
+	changedValue?: FilterValue;
+	checked?: boolean;
+	modelValue: FilterModel;
+}
+
+/** 过滤值变化回调返回值。数组用于替换当前组，对象用于修改一个或多个组。 */
+export type FilterChangeResult = FilterValueList | Partial<FilterModel> | void;
+
+/** 过滤值变化回调。 */
+export type FilterChangeHandler = (context: FilterChangeContext) => FilterChangeResult;
+
+/** 过滤组配置。 */
+export interface FilterGroup {
+	key: string;
+	title: string;
+	description?: string;
+	options: FilterOption[];
+	control?: FilterControl;
+	multiple?: boolean;
+	columns: number;
+	readonly?: boolean;
+	readonlyText?: string;
+	onChange?: FilterChangeHandler;
+}

src/components/filter-popup/FilterPopup.vue

@@ -0,0 +1,328 @@
+<template>
+	<bottom-popup
+		v-model="popupVisible"
+		:title="props.title"
+		:height="props.height"
+		:left-button-text="props.leftButtonText"
+		:right-button-text="props.rightButtonText"
+		:z-index="props.zIndex"
+		:overlay-props="props.overlayProps"
+		@left-button-click="reset"
+		@right-button-click="confirm"
+	>
+		<div class="filter-popup bg-white">
+			<slot name="before" />
+			<section v-for="group in props.groups" :key="group.key" class="section">
+				<div class="title">
+					<strong v-text="group.title" />
+					<span v-if="group.description" v-text="group.description" />
+				</div>
+				<slot :name="`group-${group.key}-before`" :group="group" :value="getGroupValue(group)" />
+				<div v-if="group.readonly" class="fixed-filter">
+					<t-icon name="layers" />
+					<span v-text="group.readonlyText || '当前条件已固定'" />
+				</div>
+				<t-radio-group
+					v-else-if="group.control === 'radio' && group.options.length"
+					:model-value="getSingleGroupValue(group)"
+					class="radio-options"
+					:style="{ gridTemplateColumns: `repeat(${group.columns}, minmax(0, 1fr))` }"
+					@change="value => changeRadioGroup(group, value)"
+				>
+					<t-radio
+						v-for="option in group.options"
+						:key="String(option.value)"
+						class="radio-option"
+						:value="option.value"
+						:disabled="option.disabled"
+						:block="false"
+						borderless
+					>
+						<span v-text="option.label" />
+					</t-radio>
+				</t-radio-group>
+				<t-checkbox-group
+					v-else-if="group.options.length"
+					:model-value="getGroupValue(group)"
+					class="options"
+					:style="{ gridTemplateColumns: `repeat(${group.columns}, minmax(0, 1fr))` }"
+					@change="(value, context) => changeGroup(group, value, context)"
+				>
+					<t-checkbox
+						v-for="option in group.options"
+						:key="String(option.value)"
+						class="option"
+						:value="option.value"
+						:label="option.label"
+						:disabled="option.disabled"
+						icon="line"
+						borderless
+					/>
+				</t-checkbox-group>
+				<slot :name="`group-${group.key}`" :group="group" :value="getGroupValue(group)" />
+				<slot :name="`group-${group.key}-after`" :group="group" :value="getGroupValue(group)" />
+			</section>
+			<slot name="after" />
+			<slot />
+		</div>
+	</bottom-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import type {
+	FilterChangeContext,
+	FilterChangeHandler,
+	FilterChangeResult,
+	FilterGroup,
+	FilterModel,
+	FilterValue,
+	FilterValueList
+} from "./FilterPopup";
+
+defineOptions({ name: "FilterPopup" });
+
+interface Props {
+	modelValue: FilterModel;
+	visible: boolean;
+	groups: FilterGroup[];
+	title?: string;
+	height?: string | number;
+	leftButtonText?: string;
+	rightButtonText?: string;
+	resetValue?: FilterModel;
+	zIndex?: number;
+	overlayProps?: Record<string, unknown>;
+	onFilterChange?: FilterChangeHandler;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	title: "筛选",
+	height: "auto",
+	leftButtonText: "重置",
+	rightButtonText: "确定"
+});
+const emit = defineEmits<{
+	"update:modelValue": [value: FilterModel];
+	"update:visible": [value: boolean];
+	change: [value: FilterModel, context: FilterChangeContext];
+	reset: [value: FilterModel];
+	confirm: [value: FilterModel];
+}>();
+
+const popupVisible = computed({
+	get: () => props.visible,
+	set: value => emit("update:visible", value)
+});
+
+function getGroupValue(group: FilterGroup): FilterValueList {
+	const value = props.modelValue[group.key] || [];
+	return group.multiple === false ? value.slice(-1) : value;
+}
+
+function getSingleGroupValue(group: FilterGroup): FilterValue | undefined {
+	return getGroupValue(group)[0];
+}
+
+function changeRadioGroup(group: FilterGroup, value: unknown): void {
+	changeGroup(group, isFilterValue(value) ? [value] : [], { current: value, type: "check" });
+}
+
+function changeGroup(group: FilterGroup, value: unknown, changeContext: unknown): void {
+	const previousValue = [...getGroupValue(group)];
+	const checkboxValue = toFilterValueList(value);
+	const contextValue = getChangedValue(changeContext);
+	const checked = getCheckedState(changeContext);
+	const nextValue = normalizeGroupValue(group, checkboxValue, contextValue, checked);
+	const nextModel = cloneFilterModel(props.modelValue);
+	nextModel[group.key] = nextValue;
+	const context: FilterChangeContext = {
+		group,
+		groupKey: group.key,
+		value: [...nextValue],
+		previousValue,
+		changedValue: contextValue,
+		checked,
+		modelValue: cloneFilterModel(nextModel)
+	};
+
+	const groupResult = group.onChange?.(context);
+	const groupModel = applyChangeResult(nextModel, group.key, groupResult);
+	const finalContext: FilterChangeContext = {
+		...context,
+		value: [...(groupModel[group.key] || [])],
+		modelValue: cloneFilterModel(groupModel)
+	};
+	const finalModel = applyChangeResult(groupModel, group.key, props.onFilterChange?.(finalContext));
+	emit("update:modelValue", finalModel);
+	emit("change", finalModel, finalContext);
+}
+
+function normalizeGroupValue(
+	group: FilterGroup,
+	value: FilterValueList,
+	changedValue?: FilterValue,
+	checked?: boolean
+): FilterValueList {
+	if (group.multiple !== false || value.length < 2) {
+		return value;
+	}
+	if (checked !== false && changedValue !== undefined) {
+		return [changedValue];
+	}
+	return value.slice(-1);
+}
+
+function applyChangeResult(model: FilterModel, groupKey: string, result: FilterChangeResult): FilterModel {
+	if (!result) {
+		return model;
+	}
+	if (Array.isArray(result)) {
+		return { ...model, [groupKey]: toFilterValueList(result) };
+	}
+	const nextModel = cloneFilterModel(model);
+	for (const [key, value] of Object.entries(result)) {
+		if (Array.isArray(value)) {
+			nextModel[key] = toFilterValueList(value);
+		}
+	}
+	return nextModel;
+}
+
+function toFilterValueList(value: unknown): FilterValueList {
+	if (!Array.isArray(value)) {
+		return [];
+	}
+	return value.filter(isFilterValue);
+}
+
+function isFilterValue(value: unknown): value is FilterValue {
+	return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+}
+
+function getChangedValue(value: unknown): FilterValue | undefined {
+	if (!value || typeof value !== "object") {
+		return undefined;
+	}
+	const current = (value as { current?: unknown }).current;
+	return isFilterValue(current) ? current : undefined;
+}
+
+function getCheckedState(value: unknown): boolean | undefined {
+	if (!value || typeof value !== "object") {
+		return undefined;
+	}
+	const type = (value as { type?: unknown }).type;
+	return type === "check" ? true : type === "uncheck" ? false : undefined;
+}
+
+function cloneFilterModel(model: FilterModel): FilterModel {
+	return Object.fromEntries(Object.entries(model).map(([key, value]) => [key, toFilterValueList(value)]));
+}
+
+function createEmptyFilterModel(): FilterModel {
+	return Object.fromEntries(props.groups.map(group => [group.key, []]));
+}
+
+function reset(): void {
+	const value = cloneFilterModel(props.resetValue || createEmptyFilterModel());
+	emit("update:modelValue", value);
+	emit("reset", value);
+}
+
+function confirm(): void {
+	emit("confirm", cloneFilterModel(props.modelValue));
+}
+</script>
+
+<style scoped lang="less">
+:global(.bottom-popup:has(.filter-popup)) {
+	display: flex;
+	flex-direction: column;
+	max-height: 86vh;
+	overflow: hidden;
+}
+
+:global(.bottom-popup:has(.filter-popup) .body) {
+	min-height: 0;
+	overflow-y: auto;
+	touch-action: pan-y;
+	-webkit-overflow-scrolling: touch;
+}
+
+.filter-popup {
+	padding: 0 1rem 1rem;
+
+	.section {
+		padding: 1rem 0 0;
+
+		.title {
+			display: flex;
+			align-items: baseline;
+			margin-bottom: .75rem;
+			justify-content: space-between;
+
+			strong {
+				font-size: 1rem;
+			}
+
+			span {
+				color: var(--td-text-color-secondary);
+				font-size: .75rem;
+			}
+		}
+	}
+
+	.options,
+	.radio-options {
+		gap: .5rem;
+		display: grid;
+		padding-bottom: .25rem;
+
+		.option,
+		.radio-option {
+			margin: 0;
+			border: 1px solid var(--td-component-border);
+			padding: .5rem;
+			display: flex;
+			min-width: 0;
+			background: var(--td-bg-color-container);
+			border-radius: .75rem;
+			justify-content: start;
+
+			:deep(input) {
+				display: none;
+			}
+
+			:deep(.t-checkbox__label),
+			:deep(.t-radio__label) {
+				font-size: .75rem;
+				white-space: nowrap;
+			}
+
+			:deep(.t-radio__icon),
+			:deep(.t-checkbox__icon) {
+				margin-right: .25rem;
+			}
+
+			&:has(:deep(.t-checkbox__icon--checked)),
+			&:has(:deep(.t-radio__icon--checked)) {
+				color: var(--td-brand-color);
+				background: var(--td-brand-color-light);
+				border-color: var(--td-brand-color);
+			}
+		}
+	}
+
+	.fixed-filter {
+		gap: .5rem;
+		color: var(--td-brand-color);
+		display: flex;
+		padding: .75rem;
+		font-size: .8125rem;
+		background: var(--td-brand-color-light);
+		align-items: center;
+		border-radius: .5rem;
+	}
+}
+</style>

src/components/mediaSelector/MediaSelector.vue

@@ -0,0 +1,300 @@
+<template>
+	<div v-bind="$attrs" class="media-selector">
+		<div class="t-form__label" :class="{ required }">
+			<slot name="title">
+				<span v-text="title" />
+			</slot>
+		</div>
+		<div class="photo-shell" :class="{ 'without-add': !showAdd }">
+			<div class="items">
+				<div v-if="!displayMediaList.length" class="empty" v-text="emptyText" />
+				<media-selector-item
+					v-for="(item, index) in displayMediaList"
+					:key="`${item.url}-${item.attachType}-${index}`"
+					:item="item"
+					:removable="hasRemovablePhotos"
+					:show-remove="showRemove === true"
+					:show-type-label="showTypeLabel === true"
+					@preview="openMediaViewer(index)"
+					@remove="removePhoto(index)"
+				/>
+			</div>
+			<media-selector-add
+				v-if="showAdd"
+				:add-actions="props.addActions ?? []"
+				:add-text="props.addText ?? '选择'"
+				:busy="isBusy"
+				:upload-enabled="!!props.upload"
+				@add="handleAdd"
+				@action="handleAddAction"
+				@capture-photo="handleCapturePhoto"
+				@capture-video="handleCaptureVideo"
+				@file-change="handleFileChange"
+			/>
+		</div>
+	</div>
+	<media-selector-viewer
+		v-model:visible="photoViewerVisible"
+		:images="photoViewerImages"
+		:items="photoViewerItems"
+		:viewer-z-index="props.viewerZIndex"
+		:show-actions="showViewerActions === true"
+		:submitting="isSubmitting"
+		@change-type="changePhotoType"
+		@remove="removePhotoBySourceIndex"
+	/>
+</template>
+
+<script setup lang="ts">
+import MediaSelectorAdd from "./MediaSelectorAdd.vue";
+import MediaSelectorItem from "./MediaSelectorItem.vue";
+import MediaSelectorViewer from "./MediaSelectorViewer.vue";
+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
+});
+
+interface Props {
+	addActions?: readonly MediaSelectorAddAction[];
+	addText?: string;
+	editMode?: boolean;
+	emptyText?: string;
+	fallbackImage?: string;
+	loading?: boolean;
+	modelValue: string[];
+	photoItems?: readonly PhotoItem[];
+	required?: boolean;
+	upload?: (fileList: File[]) => Promise<PhotoItem[]>;
+	showViewerActions?: boolean;
+	showAdd?: boolean;
+	showRemove?: boolean;
+	showTypeLabel?: boolean;
+	submit?: (photoItems: PhotoItem[]) => Promise<void>;
+	title?: string;
+	viewerZIndex?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	addActions: () => [],
+	title: "媒体列表",
+	addText: "选择",
+	editMode: false,
+	emptyText: "暂无照片",
+	loading: false,
+	required: false,
+	showAdd: true,
+	showRemove: true,
+	showTypeLabel: false,
+	showViewerActions: true
+});
+
+type Emits = {
+	add: [];
+	action: [value: MediaSelectorAddAction];
+	"capture-photo": [];
+	"capture-video": [];
+	"update:modelValue": [value: string[]];
+	"update:photoItems": [value: PhotoItem[]];
+};
+
+const emit = defineEmits<Emits>();
+
+function handleAddAction(action: MediaSelectorAddAction): void {
+	emit("action", action);
+}
+
+function handleAdd(): void {
+	emit("add");
+}
+
+function handleCapturePhoto(): void {
+	emit("capture-photo");
+}
+
+function handleCaptureVideo(): void {
+	emit("capture-video");
+}
+
+const photoViewerVisible = ref(false);
+const photoViewerImages = ref<string[]>([]);
+const photoViewerItems = ref<MediaSelectorViewerItem[]>([]);
+const isSubmitting = ref(false);
+const isUploading = ref(false);
+const isBusy = computed(() => props.loading || isSubmitting.value || isUploading.value);
+
+const displayMediaList = computed<PhotoItem[]>(() => {
+	if (props.photoItems?.length) {
+		return props.photoItems.map(normalizePhotoItem);
+	}
+	if (props.modelValue.length) {
+		return props.modelValue.map(url => ({ url, attachType: "PHOTO" }));
+	}
+
+	return props.fallbackImage ? [{ url: props.fallbackImage, attachType: "PHOTO" }] : [];
+});
+const hasRemovablePhotos = computed(() => !!props.photoItems?.length || !!props.modelValue.length);
+
+async function handleFileChange(event: Event): Promise<void> {
+	const input = event.target as HTMLInputElement;
+	const fileList = Array.from(input.files || []);
+	if (!fileList.length || !props.upload) {
+		return;
+	}
+	saveCapturedFilesFromInput(input, fileList);
+
+	isUploading.value = true;
+	try {
+		const uploadedPhotoItems = await props.upload(fileList);
+		if (!uploadedPhotoItems.length) {
+			return;
+		}
+		const nextPhotoItems = [...displayMediaList.value, ...uploadedPhotoItems.map((item, index) => ({
+			...item,
+			mimeType: item.mimeType || item.attachment?.mimeType || fileList[index]?.type
+		}))];
+		emit("update:photoItems", nextPhotoItems);
+		emit("update:modelValue", nextPhotoItems.map(item => item.url));
+	} catch {
+		Message.error("媒体上传失败");
+	} finally {
+		isUploading.value = false;
+		input.value = "";
+	}
+}
+
+async function removePhoto(index: number): Promise<void> {
+	if (index < 0 || displayMediaList.value.length <= index) {
+		return;
+	}
+
+	await applyPhotoItems(displayMediaList.value.filter((_, itemIndex) => itemIndex !== index));
+}
+
+function openMediaViewer(index: number): void {
+	openPhotoViewer(index);
+}
+
+function openPhotoViewer(index: number): void {
+	const viewerItems = displayMediaList.value.map((item, sourceIndex) => ({ item, sourceIndex }));
+	const imageIndex = viewerItems.findIndex(({ sourceIndex }) => sourceIndex === index);
+	if (imageIndex < 0) {
+		return;
+	}
+	const rotatedItems = [...viewerItems.slice(imageIndex), ...viewerItems.slice(0, imageIndex)];
+	photoViewerItems.value = rotatedItems.map(({ item, sourceIndex }) => ({ ...item, sourceIndex }));
+	photoViewerImages.value = photoViewerItems.value.map(getMediaPreviewURL);
+	photoViewerVisible.value = true;
+}
+
+async function changePhotoType(sourceIndex: number, attachType: string): Promise<void> {
+	const currentItem = displayMediaList.value[sourceIndex];
+	if (!currentItem || currentItem.attachType === attachType) {
+		return;
+	}
+
+	const nextPhotoItems = displayMediaList.value.map((item, index) => index === sourceIndex ? {
+		...item,
+		attachType
+	} : item);
+	await applyPhotoItems(nextPhotoItems);
+}
+
+async function removePhotoBySourceIndex(sourceIndex: number): Promise<void> {
+	if (!displayMediaList.value[sourceIndex]) {
+		return;
+	}
+
+	await applyPhotoItems(displayMediaList.value.filter((_, index) => index !== sourceIndex));
+}
+
+async function applyPhotoItems(nextPhotoItems: PhotoItem[]): Promise<void> {
+	if (isSubmitting.value) {
+		return;
+	}
+
+	if (!props.editMode && !props.submit) {
+		Message.warning("展示模式未配置媒体保存方法");
+		return;
+	}
+
+	if (!props.editMode) {
+		isSubmitting.value = true;
+		try {
+			await props.submit!(nextPhotoItems);
+		} catch {
+			Message.error("媒体修改失败");
+			return;
+		} finally {
+			isSubmitting.value = false;
+		}
+	}
+
+	emit("update:photoItems", nextPhotoItems);
+	emit("update:modelValue", nextPhotoItems.map(item => item.url));
+	photoViewerVisible.value = false;
+}
+</script>
+
+<style scoped lang="less">
+.media-selector {
+	gap: .375rem;
+	width: 100%;
+	display: grid;
+
+	.photo-shell {
+		display: grid;
+		gap: .75rem;
+		grid-template-columns: minmax(0, 1fr) 5.5rem;
+		align-items: start;
+
+		&.without-add {
+			grid-template-columns: minmax(0, 1fr);
+		}
+
+		.items {
+			gap: .75rem;
+			width: 100%;
+			height: 100%;
+			min-width: 0;
+			display: flex;
+			overflow-x: auto;
+			overflow-y: hidden;
+			-webkit-overflow-scrolling: touch;
+			scrollbar-width: thin;
+
+			.empty {
+				width: 100%;
+				color: #52607a;
+				display: flex;
+				padding: 1rem 0;
+				align-items: center;
+				justify-content: center;
+				background: #f8fbff;
+				border-radius: 1rem;
+			}
+
+		}
+	}
+
+	.t-form__label {
+		&.required::before {
+			color: var(--td-error-color, #e34d59);
+			content: "*";
+			margin-right: .25rem;
+		}
+	}
+
+}
+
+:global(html.theme-dark) {
+	.media-selector .empty {
+		color: #e2e8f0;
+		background: rgba(15, 23, 42, .72);
+		}
+}
+</style>

src/components/mediaSelector/MediaSelectorAdd.vue

@@ -0,0 +1,210 @@
+<template>
+	<div class="add-trigger">
+		<t-popover
+			v-model:visible="capturePopoverVisible"
+			placement="left"
+			theme="light"
+		>
+			<t-button
+				class="capture"
+				theme="primary"
+				variant="dashed"
+				:loading="busy"
+				:disabled="busy"
+			>
+				<template #icon>
+					<t-icon name="camera" />
+				</template>
+				拍摄
+			</t-button>
+			<template #content>
+				<div class="add-actions">
+					<t-button
+						v-for="(action, index) in captureActionList"
+						:key="`${action.emit}-${index}`"
+						variant="text"
+						:theme="action.theme"
+						class="add-action"
+						:disabled="busy"
+						@click="handleCaptureAction(action)"
+					>
+						<template #icon v-if="action.icon">
+							<t-icon :name="action.icon" />
+						</template>
+						<span v-text="action.text" />
+					</t-button>
+				</div>
+			</template>
+		</t-popover>
+		<t-button
+			class="file"
+			theme="primary"
+			variant="dashed"
+			:loading="busy"
+			:disabled="busy"
+			@click="handleFileAction"
+		>
+			<template #icon>
+				<t-icon name="file-attachment" />
+			</template>
+			<span v-text="addText" />
+		</t-button>
+	</div>
+	<input
+		v-if="uploadEnabled"
+		ref="fileInput"
+		class="file-input"
+		type="file"
+		accept="*/*"
+		multiple
+		@change="handleFileChange"
+	/>
+	<input
+		v-if="uploadEnabled"
+		ref="photoFileInput"
+		class="file-input"
+		type="file"
+		accept="image/*"
+		capture="environment"
+		@change="handleFileChange"
+	/>
+	<input
+		v-if="uploadEnabled"
+		ref="videoFileInput"
+		class="file-input"
+		type="file"
+		accept="video/*"
+		capture="environment"
+		@change="handleFileChange"
+	/>
+</template>
+
+<script setup lang="ts">
+import type { MediaSelectorAddAction } from "./types";
+
+interface Props {
+	addActions: readonly MediaSelectorAddAction[];
+	addText: string;
+	busy: boolean;
+	uploadEnabled: boolean;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+	add: [];
+	action: [value: MediaSelectorAddAction];
+	"capture-photo": [];
+	"capture-video": [];
+	"file-change": [value: Event];
+}>();
+
+const capturePopoverVisible = ref(false);
+const fileInput = ref<HTMLInputElement>();
+const photoFileInput = ref<HTMLInputElement>();
+const videoFileInput = ref<HTMLInputElement>();
+const captureActionList = computed<readonly MediaSelectorAddAction[]>(() => [{
+	icon: "camera",
+	emit: "capture-photo",
+	text: "拍照片",
+	theme: "primary"
+}, {
+	icon: "video-camera-1",
+	emit: "capture-video",
+	text: "录视频",
+	theme: "primary"
+}, ...props.addActions]);
+
+function handleFileAction(): void {
+	capturePopoverVisible.value = false;
+	if (props.uploadEnabled) {
+		fileInput.value?.click();
+		return;
+	}
+	emit("add");
+}
+
+function handleCaptureAction(action: MediaSelectorAddAction): void {
+	capturePopoverVisible.value = false;
+	if (action.emit === "capture-photo") {
+		if (props.uploadEnabled) {
+			photoFileInput.value?.click();
+			return;
+		}
+		emit("capture-photo");
+		return;
+	}
+	if (action.emit === "capture-video") {
+		if (props.uploadEnabled) {
+			videoFileInput.value?.click();
+			return;
+		}
+		emit("capture-video");
+		return;
+	}
+	emit("action", action);
+}
+
+function handleFileChange(event: Event): void {
+	emit("file-change", event);
+}
+</script>
+
+<style scoped lang="less">
+.add-trigger {
+	--td-popover-padding: 0 .5rem;
+	gap: .375rem;
+	width: 5.5rem;
+	height: 5.5rem;
+	display: flex;
+	flex-direction: column;
+
+	:deep(.t-popover__content) {
+		border-radius: .875rem;
+	}
+
+	.capture,
+	.file {
+		--td-button-border-radius: .875rem;
+
+		width: 5.5rem;
+		height: 2.5625rem;
+		min-height: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.add-actions {
+		gap: .25rem;
+		display: grid;
+		padding: .5rem 0;
+
+		.add-action {
+			--td-button-medium-height: 32px;
+			--td-button-medium-padding-horizontal: 10px;
+
+			gap: .5rem;
+			width: 100%;
+			position: relative;
+			font-weight: unset;
+			justify-content: start;
+		}
+	}
+}
+
+.file-input {
+	display: none;
+}
+
+:global(html.theme-dark) {
+	.capture,
+	.file {
+		background: rgba(37, 99, 235, .16);
+		border-color: rgba(96, 165, 250, .28);
+
+		span {
+			color: #93c5fd;
+		}
+	}
+}
+</style>

src/components/mediaSelector/MediaSelectorItem.vue

@@ -0,0 +1,137 @@
+<template>
+	<div class="item">
+		<t-button variant="text" class="preview-trigger" @click="emit('preview')">
+			<div v-if="isVideoItem(item)" class="video-thumbnail">
+				<t-image
+					v-if="getMediaThumbnailURL(item)"
+					class="image"
+					:src="getMediaThumbnailURL(item)"
+					:alt="getAttachTypeText(item.attachType)"
+					fit="cover"
+				/>
+				<video
+					v-else
+					:src="getMediaPreviewURL(item)"
+					muted
+					playsinline
+					preload="metadata"
+				/>
+				<t-icon class="play" name="play-circle-filled" size="2rem" />
+			</div>
+			<t-image
+				v-else
+				class="image"
+				:src="item.url"
+				:alt="getAttachTypeText(item.attachType)"
+				fit="cover"
+			/>
+		</t-button>
+		<div
+			v-if="showTypeLabel"
+			class="type-label white glass-black clip-text"
+			v-text="getAttachTypeText(item.attachType)"
+		/>
+		<t-button
+			v-if="showRemove && removable"
+			theme="danger"
+			class="remove"
+			shape="circle"
+			size="extra-small"
+			@click="emit('remove')"
+		>
+			<t-icon name="close" size="1rem" />
+		</t-button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { PhotoItem } from "@/types/Photo.ts";
+import {
+	getAttachTypeText,
+	getMediaPreviewURL,
+	getMediaThumbnailURL,
+	isVideoItem
+} from "./utils";
+
+interface Props {
+	item: PhotoItem;
+	removable: boolean;
+	showRemove: boolean;
+	showTypeLabel: boolean;
+}
+
+defineProps<Props>();
+const emit = defineEmits<{
+	preview: [];
+	remove: [];
+}>();
+</script>
+
+<style scoped lang="less">
+.item {
+	width: 5.5rem;
+	height: 5.5rem;
+	flex: 0 0 5.5rem;
+	position: relative;
+	overflow: hidden;
+	border-radius: 1rem;
+
+	.preview-trigger {
+		padding: 0;
+		border: 0;
+		width: 100%;
+		height: 100%;
+		display: block;
+		cursor: pointer;
+		background: transparent;
+
+		.image {
+			height: 100%;
+		}
+
+		.video-thumbnail {
+			width: 100%;
+			height: 100%;
+			position: relative;
+			background: #0f172a;
+
+			video {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			.play {
+				inset: 50% auto auto 50%;
+				opacity: .7;
+				position: absolute;
+				transform: translate(-50%, -50%);
+			}
+		}
+	}
+
+	.type-label {
+		width: 100%;
+		bottom: 0;
+		padding: .125rem .5rem;
+		position: absolute;
+		overflow: hidden;
+		font-size: .875rem;
+		text-align: center;
+		line-height: 1.2;
+		border-radius: 0 0 1rem 1rem;
+		pointer-events: none;
+	}
+
+	.remove {
+		top: .375rem;
+		right: .375rem;
+		position: absolute;
+
+		:deep(.t-button__content) {
+			display: flex;
+			align-items: center;
+		}
+	}
+}
+</style>

src/components/mediaSelector/MediaSelectorViewer.vue

@@ -0,0 +1,237 @@
+<template>
+<teleport to="body">
+	<t-image-viewer
+		v-model:visible="viewerVisible"
+		:images="images"
+		:style="{ zIndex: props.viewerZIndex }"
+		show-index
+		@close="handleClose"
+		@index-change="handleIndexChange"
+	>
+		<template #image="params">
+			<div
+				v-if="isVideoViewerItem(params.index)"
+				:class="[params.className, 'viewer-video-wrap']"
+				:style="params.style"
+				@click.stop
+				@pointerdown.stop
+				@pointermove.stop
+				@pointerup.stop
+				@touchstart.stop
+				@touchmove.stop
+				@touchend.stop
+			>
+				<video
+					:src="getViewerMediaURL(params.index)"
+					class="viewer-video"
+					controls
+					playsinline
+					preload="metadata"
+					@loadedmetadata="handleViewerVideoLoaded($event, params)"
+					@transitionstart="params.onTransitionstart"
+					@transitionend="params.onTransitionend"
+				/>
+			</div>
+			<img
+				v-else
+				:src="params.src"
+				:class="params.className"
+				:style="params.style"
+				:alt="getViewerAlt(params.index)"
+				@load="params.onLoad"
+				@transitionstart="params.onTransitionstart"
+				@transitionend="params.onTransitionend"
+			/>
+		</template>
+		<template #delete-btn>
+			<div v-if="showActions" class="viewer-action" @click.stop>
+				<t-popover
+					v-model:visible="photoActionVisible"
+					placement="bottom"
+					theme="light"
+					:show-arrow="false"
+				>
+					<t-button class="white" variant="text">
+						<t-icon name="ellipsis" />
+					</t-button>
+					<template #content>
+						<div class="actions" @click.stop>
+							<div class="title">修改类型</div>
+							<div class="type">
+								<t-button
+									v-for="item in attachTypeOptions"
+									:key="item.value"
+									:theme="item.value === currentPhotoItem?.attachType ? 'primary' : 'default'"
+									variant="text"
+									size="extra-small"
+									:disabled="submitting"
+									@click="changePhotoType(item.value)"
+								>
+									<span v-text="item.text" />
+								</t-button>
+							</div>
+							<t-divider />
+							<t-button
+								class="button delete-action"
+								theme="danger"
+								size="extra-small"
+								variant="text"
+								:disabled="submitting"
+								@click="removeCurrentPhoto"
+							>
+								<template #icon>
+									<t-icon name="delete" />
+								</template>
+								删除
+							</t-button>
+						</div>
+					</template>
+				</t-popover>
+			</div>
+		</template>
+	</t-image-viewer>
+</teleport>
+</template>
+
+<script setup lang="ts">
+import type { ImageSlotParams } from "tdesign-mobile-vue";
+import type { MediaSelectorViewerItem } from "./types";
+import { getAttachTypeText, getMediaPreviewURL, isVideoItem } from "./utils";
+
+interface Props {
+	images: string[];
+	items: readonly MediaSelectorViewerItem[];
+	showActions: boolean;
+	submitting: boolean;
+	visible: boolean;
+	viewerZIndex?: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+	(event: "update:visible", value: boolean): void;
+	(event: "change-type", sourceIndex: number, attachType: string): void;
+	(event: "remove", sourceIndex: number): void;
+}>();
+
+const viewerVisible = computed({
+	get: () => props.visible,
+	set: value => emit("update:visible", value)
+});
+const viewerIndex = ref(0);
+const photoActionVisible = ref(false);
+const attachTypeOptions = [
+	{ text: "照片", value: "PHOTO" },
+	{ text: "积分卡", value: "POINT_CARD" },
+	{ text: "其他文件", value: "OTHER" }
+] as const;
+const currentPhotoItem = computed(() => props.items[viewerIndex.value]);
+
+watch(() => props.visible, value => {
+	if (value) {
+		viewerIndex.value = 0;
+		photoActionVisible.value = false;
+	}
+});
+
+function handleClose(): void {
+	photoActionVisible.value = false;
+	emit("update:visible", false);
+}
+
+function handleIndexChange(index: number): void {
+	viewerIndex.value = index;
+	photoActionVisible.value = false;
+}
+
+function isVideoViewerItem(index?: number): boolean {
+	const item = getViewerItem(index);
+	return !!item && isVideoItem(item);
+}
+
+function getViewerItem(index?: number): MediaSelectorViewerItem | undefined {
+	return index === undefined ? undefined : props.items[index];
+}
+
+function getViewerMediaURL(index?: number): string {
+	const item = getViewerItem(index);
+	return item ? getMediaPreviewURL(item) : "";
+}
+
+function getViewerAlt(index?: number): string {
+	return getAttachTypeText(getViewerItem(index)?.attachType);
+}
+
+function handleViewerVideoLoaded(event: Event, params: ImageSlotParams): void {
+	const video = event.currentTarget as HTMLVideoElement;
+	if (video.videoHeight > 0) {
+		video.height = video.videoHeight;
+	}
+	params.onLoad?.(event);
+}
+
+function changePhotoType(attachType: string): void {
+	const currentItem = currentPhotoItem.value;
+	photoActionVisible.value = false;
+	if (!currentItem || currentItem.attachType === attachType) {
+		return;
+	}
+	emit("change-type", currentItem.sourceIndex, attachType);
+}
+
+function removeCurrentPhoto(): void {
+	const currentItem = currentPhotoItem.value;
+	photoActionVisible.value = false;
+	if (currentItem) {
+		emit("remove", currentItem.sourceIndex);
+	}
+}
+</script>
+
+<style scoped lang="less">
+.viewer-action {
+	color: #fff;
+	margin-left: -1rem;
+
+	.actions {
+		display: flex;
+		min-width: 8rem;
+		flex-direction: column;
+
+		.title {
+			padding: 0 .75rem;
+			font-weight: 700;
+		}
+
+		.type {
+			display: flex;
+			align-items: start;
+			margin-left: 1.5rem;
+			flex-direction: column;
+			justify-content: start;
+		}
+
+		.button {
+			justify-content: start;
+		}
+	}
+}
+
+.viewer-video-wrap {
+	width: 100%;
+	height: 100%;
+	max-height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+}
+
+.viewer-video {
+	width: 100%;
+	height: auto;
+	max-height: 100%;
+	background: #0f172a;
+	object-fit: contain;
+}
+</style>

src/components/mediaSelector/types.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps } from "tdesign-mobile-vue";
+import type { PhotoItem } from "@/types/Photo.ts";
+
+export type MediaSelectorAddAction = {
+	icon?: string;
+	emit: string;
+	text: string;
+	theme?: ButtonProps["theme"];
+};
+
+export type MediaSelectorViewerItem = PhotoItem & {
+	sourceIndex: number;
+};

src/components/mediaSelector/utils.ts

@@ -0,0 +1,55 @@
+import type { PhotoItem } from "@/types/Photo.ts";
+import { getAttachmentReadURL } from "@/utils/attachment.ts";
+
+const ATTACH_TYPE_TEXT_MAP: Record<string, string> = {
+	ADDITIONAL: "附加照片",
+	PHOTO: "照片",
+	POINT_CARD: "积分卡",
+	OTHER: "其他文件"
+};
+
+/** 缩略图宽度查询串，地址中出现即表示已带缩略图参数 */
+const THUMBNAIL_WIDTH_QUERY = "thumbWidth=";
+
+/** 缩略图兜底尺寸（像素），用于地址未带缩略图参数但可定位附件的场景 */
+const FALLBACK_THUMBNAIL_SIZE = 128;
+
+export function getAttachTypeText(attachType?: string): string {
+	return ATTACH_TYPE_TEXT_MAP[attachType || "PHOTO"] || "其他文件";
+}
+
+export function getMediaPreviewURL(item: PhotoItem): string {
+	return item.previewUrl || item.url;
+}
+
+/**
+ * 解析媒体缩略图地址。
+ *
+ * 后端读附件接口只要带缩略图参数，视频附件同样返回该视频的缩略帧，
+ * 因此视频在列表中统一按图片渲染；临时上传文件没有缩略图，返回空字符串由调用方降级。
+ */
+export function getMediaThumbnailURL(item: PhotoItem): string {
+	if (item.url.includes(THUMBNAIL_WIDTH_QUERY)) {
+		return item.url;
+	}
+
+	const attachmentId = item.attachment?.id;
+	return attachmentId ? getAttachmentReadURL(attachmentId, FALLBACK_THUMBNAIL_SIZE) : "";
+}
+
+export function isVideoItem(item: PhotoItem): boolean {
+	const mimeType = (item.mimeType || item.attachment?.mimeType || "").toLowerCase();
+	if (mimeType.startsWith("video/")) {
+		return true;
+	}
+
+	return /\.(avi|m4v|mkv|mov|mp4|mpeg|mpg|ogv|webm|wmv)(?:$|[?#])/i.test(item.url);
+}
+
+export function normalizePhotoItem(item: PhotoItem): PhotoItem {
+	return {
+		...item,
+		attachType: item.attachType || item.attachment?.attachType || "PHOTO",
+		mimeType: item.mimeType || item.attachment?.mimeType
+	};
+}

src/composables/useAiChat.ts

@@ -1,696 +0,0 @@
-import { computed, onUnmounted, shallowRef, toValue, watch, type MaybeRefOrGetter } from "vue";
-import { useUserStore } from "timi-web-api/store";
-import {
-	chat,
-	ensureChatResponse,
-	GaoAiHttpError,
-	GaoAiStreamError,
-	parseSseData,
-	readConversation as readConversationApi,
-	readSseStream,
-	type GaoAiConversationMessage,
-	type GaoAiConversationReadResponse,
-	type GaoAiStreamEvent
-} from "@/api/GaoAiAPI";
-
-export type AiMessageRole = "user" | "assistant";
-
-export interface AiCitation {
-	source?: string;
-	dataDomain?: string;
-	timeRange?: string;
-	caliber?: string;
-	generatedAt?: string;
-}
-
-export interface AiThinking {
-	id: number;
-	content: string;
-}
-
-export interface AiChatMessage {
-	id: number;
-	role: AiMessageRole;
-	content: string;
-	thinkingList: AiThinking[];
-	citationList: AiCitation[];
-	createdAt: number;
-	statusText?: string;
-	duration?: number;
-}
-
-export interface UseAiChatOptions {
-	sessionKey: MaybeRefOrGetter<string>;
-	storeId?: MaybeRefOrGetter<string | undefined>;
-	scrollToBottom?: () => Promise<void>;
-}
-
-const conversationExpiredText = "AI 会话不存在或已过期";
-const thinkOpenMarkers = ["<thinking>", "<think>"];
-const thinkCloseMarkers = ["</thinking>", "</think>"];
-
-interface AssistantResponseState {
-	rawText: string;
-	eventThinkingList: AiThinking[];
-	taggedThinkingList: AiThinking[];
-}
-
-/** 管理门店智能助手的会话、流式消息和取消操作。 */
-export function useAiChat(options: UseAiChatOptions) {
-	const userStore = useUserStore();
-	const messages = shallowRef<AiChatMessage[]>([]);
-	const conversationId = shallowRef("");
-	const isGenerating = shallowRef(false);
-	const isLoadingConversation = shallowRef(false);
-	const activeToolStatus = shallowRef("");
-	const lastError = shallowRef("");
-	const lastQuestion = shallowRef("");
-	const canRetry = computed(() => !!lastError.value && !!lastQuestion.value && !isGenerating.value && !isLoadingConversation.value);
-	let activeController: AbortController | undefined;
-	let messageSequence = 0;
-	const responseStateMap = new Map<number, AssistantResponseState>();
-
-	async function sendMessage(message: string): Promise<void> {
-		const normalizedMessage = message.trim();
-		if (!normalizedMessage || isGenerating.value || isLoadingConversation.value) {
-			return;
-		}
-
-		const userMessage: AiChatMessage = {
-			id: nextMessageId(),
-			role: "user",
-			content: normalizedMessage,
-			thinkingList: [],
-			citationList: [],
-			createdAt: Date.now()
-		};
-		const assistantMessage: AiChatMessage = {
-			id: nextMessageId(),
-			role: "assistant",
-			content: "",
-			thinkingList: [],
-			citationList: [],
-			createdAt: Date.now()
-		};
-		messages.value = [...messages.value, userMessage, assistantMessage];
-		lastQuestion.value = normalizedMessage;
-		lastError.value = "";
-		isGenerating.value = true;
-		activeToolStatus.value = "";
-		const controller = new AbortController();
-		activeController = controller;
-		let hasRetriedExpiredConversation = false;
-
-		try {
-			while (true) {
-				resetAssistantMessage(assistantMessage.id);
-				try {
-					await readChatStream(normalizedMessage, assistantMessage.id, controller);
-					break;
-				} catch (error) {
-					if (
-						!hasRetriedExpiredConversation
-						&& !!conversationId.value
-						&& isExpiredConversationError(error)
-					) {
-						hasRetriedExpiredConversation = true;
-						conversationId.value = "";
-						continue;
-					}
-					handleChatError(error, assistantMessage.id, controller.signal.aborted);
-					break;
-				}
-			}
-		} finally {
-			if (activeController === controller) {
-				activeController = undefined;
-			}
-			isGenerating.value = false;
-			activeToolStatus.value = "";
-			responseStateMap.delete(assistantMessage.id);
-			await scrollToBottom();
-		}
-	}
-
-	function stopGeneration(): void {
-		if (!isGenerating.value) {
-			return;
-		}
-		activeController?.abort();
-		activeToolStatus.value = "";
-		const assistantMessage = [...messages.value].reverse().find(item => item.role === "assistant");
-		if (assistantMessage) {
-			updateMessage(assistantMessage.id, { statusText: "已停止生成，可重新提问" });
-		}
-	}
-
-	function resetConversation(): void {
-		activeController?.abort();
-		activeController = undefined;
-		messages.value = [];
-		responseStateMap.clear();
-		conversationId.value = "";
-		isGenerating.value = false;
-		activeToolStatus.value = "";
-		lastError.value = "";
-		lastQuestion.value = "";
-	}
-
-	/**
-	 * 读取历史会话并转换成当前聊天页面使用的消息模型。
-	 *
-	 * @param id 历史会话 ID
-	 */
-	async function loadConversation(id: string): Promise<void> {
-		const normalizedId = id.trim();
-		if (!normalizedId || isGenerating.value || isLoadingConversation.value) {
-			return;
-		}
-
-		isLoadingConversation.value = true;
-		messages.value = [];
-		responseStateMap.clear();
-		conversationId.value = normalizedId;
-		lastError.value = "";
-		lastQuestion.value = "";
-		try {
-			const result = await readConversationHistory(normalizedId);
-			if (conversationId.value !== normalizedId) {
-				return;
-			}
-			messages.value = mapConversationMessages(result);
-			lastQuestion.value = [...messages.value].reverse().find(item => item.role === "user")?.content || "";
-			await scrollToBottom();
-		} catch (error) {
-			if (conversationId.value === normalizedId) {
-				resetConversation();
-			}
-			throw error;
-		} finally {
-			isLoadingConversation.value = false;
-		}
-	}
-
-	async function readConversationHistory(id: string): Promise<GaoAiConversationReadResponse> {
-		const messageList: GaoAiConversationMessage[] = [];
-		let firstId: string | undefined;
-		let result: GaoAiConversationReadResponse = {};
-
-		while (true) {
-			result = await readConversationApi({
-				conversationId: id,
-				firstId,
-				limit: 100
-			});
-			const currentList = Array.isArray(result.data) ? result.data : [];
-			messageList.push(...currentList);
-			if (result["has_more"] !== true || !currentList.length) {
-				break;
-			}
-			const nextFirstId = currentList[0]?.id;
-			if (!nextFirstId || nextFirstId === firstId) {
-				break;
-			}
-			firstId = nextFirstId;
-		}
-
-		return {
-			...result,
-			data: messageList
-		};
-	}
-
-	async function retryLastMessage(): Promise<void> {
-		if (canRetry.value) {
-			await sendMessage(lastQuestion.value);
-		}
-	}
-
-	async function readChatStream(message: string, assistantId: number, controller: AbortController): Promise<void> {
-		const storeId = options.storeId ? toValue(options.storeId) : undefined;
-		const request = {
-			message,
-			...(conversationId.value ? { conversationId: conversationId.value } : {}),
-			...(storeId ? { storeId } : {})
-		};
-		const response = await chat(request, userStore.token, controller.signal);
-		await ensureChatResponse(response);
-		let hasDoneEvent = false;
-		await readSseStream(response, async (event) => {
-			hasDoneEvent = await handleStreamEvent(event, assistantId, hasDoneEvent);
-			await options.scrollToBottom?.();
-		});
-		if (!hasDoneEvent && !controller.signal.aborted) {
-			throw new GaoAiStreamError("智能助手连接中断，请重试", "DIFY_STREAM_ERROR");
-		}
-	}
-
-	async function handleStreamEvent(event: GaoAiStreamEvent, assistantId: number, hasDoneEvent: boolean): Promise<boolean> {
-		const payload = parseSseData(event.data);
-		switch (event.event) {
-			case "think":
-			case "thinking":
-				appendAssistantThinking(assistantId, extractThinkingText(payload));
-				return hasDoneEvent;
-			case "agent_thought":
-				appendAssistantThinking(assistantId, extractThinkingText(payload), true);
-				return hasDoneEvent;
-			case "message":
-				appendAssistantResponse(assistantId, extractText(payload));
-				return hasDoneEvent;
-			case "tool_status":
-				{
-					activeToolStatus.value = formatToolStatus(payload);
-				}
-				return hasDoneEvent;
-			case "citation":
-				appendCitation(assistantId, normalizeCitation(payload));
-				return hasDoneEvent;
-			case "done":
-				applyDonePayload(assistantId, payload);
-				return true;
-			case "error":
-				throw createStreamError(payload);
-			default:
-				return hasDoneEvent;
-		}
-	}
-
-	function applyDonePayload(assistantId: number, payload: unknown): void {
-		if (!isRecord(payload)) {
-			return;
-		}
-		const nextConversationId = getString(payload.conversationId);
-		if (nextConversationId) {
-			conversationId.value = nextConversationId;
-		}
-		const duration = getNumber(payload.duration);
-		updateMessage(assistantId, {
-			createdAt: Date.now(),
-			duration: duration === undefined ? undefined : duration
-		});
-	}
-
-	function appendAssistantResponse(assistantId: number, text: string): void {
-		if (!text) {
-			return;
-		}
-		const state = getAssistantResponseState(assistantId);
-		state.rawText = mergeResponseText(state.rawText, text);
-		const parsedResponse = parseAssistantResponse(state.rawText);
-		state.taggedThinkingList = parsedResponse.thinkingList.map((content, index) => ({
-			id: state.taggedThinkingList[index]?.id || nextThinkingId(),
-			content
-		}));
-		updateMessage(assistantId, {
-			content: parsedResponse.answer,
-			thinkingList: [...state.eventThinkingList, ...state.taggedThinkingList],
-			statusText: undefined
-		});
-	}
-
-	function getAssistantResponseState(assistantId: number): AssistantResponseState {
-		const currentState = responseStateMap.get(assistantId);
-		if (currentState) {
-			return currentState;
-		}
-		const nextState: AssistantResponseState = {
-			rawText: "",
-			eventThinkingList: [],
-			taggedThinkingList: []
-		};
-		responseStateMap.set(assistantId, nextState);
-		return nextState;
-	}
-
-	function appendAssistantThinking(assistantId: number, text: string, createSegment = false): void {
-		if (!text) {
-			return;
-		}
-		const state = getAssistantResponseState(assistantId);
-		const thinkingList = [...state.eventThinkingList];
-		const lastThinking = thinkingList[thinkingList.length - 1];
-		if (createSegment || !lastThinking) {
-			thinkingList.push({ id: nextThinkingId(), content: text });
-		} else {
-			thinkingList[thinkingList.length - 1] = {
-				...lastThinking,
-				content: lastThinking.content + text
-			};
-		}
-		state.eventThinkingList = thinkingList;
-		updateMessage(assistantId, {
-			thinkingList: [...state.eventThinkingList, ...state.taggedThinkingList],
-			statusText: undefined
-		});
-	}
-
-	function appendCitation(assistantId: number, citation?: AiCitation): void {
-		if (!citation) {
-			return;
-		}
-		const message = messages.value.find(item => item.id === assistantId);
-		if (!message) {
-			return;
-		}
-		updateMessage(assistantId, { citationList: [...message.citationList, citation] });
-	}
-
-	function updateMessage(id: number, patch: Partial<AiChatMessage>): void {
-		messages.value = messages.value.map(item => item.id === id ? { ...item, ...patch } : item);
-	}
-
-	function resetAssistantMessage(id: number): void {
-		responseStateMap.delete(id);
-		updateMessage(id, {
-			content: "",
-			thinkingList: [],
-			citationList: [],
-			statusText: undefined,
-			duration: undefined,
-			createdAt: Date.now()
-		});
-	}
-
-	function handleChatError(error: unknown, assistantId: number, isAborted: boolean): void {
-		if (isAborted) {
-			return;
-		}
-		const message = getChatErrorMessage(error);
-		lastError.value = message;
-		updateMessage(assistantId, { statusText: message });
-	}
-
-	function clearMessages(): void {
-		messages.value = [];
-		responseStateMap.clear();
-	}
-
-	function nextMessageId(): number {
-		messageSequence += 1;
-		return messageSequence;
-	}
-
-	let thinkingSequence = 0;
-
-	function nextThinkingId(): number {
-		thinkingSequence += 1;
-		return thinkingSequence;
-	}
-
-	function mapConversationMessages(response: GaoAiConversationReadResponse): AiChatMessage[] {
-		const sourceList = Array.isArray(response.data) ? response.data : [];
-		const orderedList = sourceList
-			.map((item, index) => ({
-				item,
-				index,
-				timestamp: getTimestamp(item["created_at"])
-			}))
-			.sort((left, right) => left.timestamp - right.timestamp || left.index - right.index)
-			.map(item => item.item);
-		const messageList: AiChatMessage[] = [];
-
-		for (const item of orderedList) {
-			const createdAt = getTimestamp(item["created_at"]);
-			const query = getRawString(item.query);
-			const answer = getRawString(item.answer);
-			if (query) {
-				messageList.push({
-					id: nextMessageId(),
-					role: "user",
-					content: query,
-					thinkingList: [],
-					citationList: [],
-					createdAt
-				});
-			}
-			if (answer || isFailedConversationMessage(item)) {
-				const parsedAnswer = parseAssistantResponse(answer);
-				messageList.push({
-					id: nextMessageId(),
-					role: "assistant",
-					content: parsedAnswer.answer,
-					thinkingList: parsedAnswer.thinkingList.map(content => ({
-						id: nextThinkingId(),
-						content
-					})),
-					citationList: [],
-					createdAt,
-					statusText: isFailedConversationMessage(item) ? "本次回答生成失败" : undefined
-				});
-			}
-		}
-		return messageList;
-	}
-
-	async function scrollToBottom(): Promise<void> {
-		await options.scrollToBottom?.();
-	}
-
-	watch(() => toValue(options.sessionKey), () => {
-		resetConversation();
-	}, { flush: "sync" });
-
-	onUnmounted(() => {
-		activeController?.abort();
-		clearMessages();
-	});
-
-	return {
-		messages,
-		conversationId: computed(() => conversationId.value),
-		isGenerating,
-		isLoadingConversation,
-		activeToolStatus,
-		lastError,
-		canRetry,
-		sendMessage,
-		loadConversation,
-		stopGeneration,
-		resetConversation,
-		retryLastMessage
-	};
-}
-
-function isExpiredConversationError(error: unknown): boolean {
-	if (error instanceof GaoAiHttpError || error instanceof GaoAiStreamError) {
-		return error.message.includes(conversationExpiredText)
-			|| error.code?.toLowerCase().includes("session") === true;
-	}
-	return false;
-}
-
-function extractText(payload: unknown): string {
-	if (typeof payload === "string") {
-		return payload === "[DONE]" ? "" : payload;
-	}
-	if (!isRecord(payload)) {
-		return "";
-	}
-	return getRawString(payload.answer) || getRawString(payload.text) || getRawString(payload.content) || "";
-}
-
-function mergeResponseText(currentText: string, nextText: string): string {
-	if (currentText && nextText.startsWith(currentText)) {
-		return nextText;
-	}
-	return currentText + nextText;
-}
-
-function parseAssistantResponse(value: string): { answer: string; thinkingList: string[] } {
-	let answer = "";
-	let thinking = "";
-	let mode: "answer" | "thinking" = "answer";
-	let cursor = 0;
-	const thinkingList: string[] = [];
-
-	while (cursor < value.length) {
-		const marker = findMarker(value.slice(cursor), [...thinkOpenMarkers, ...thinkCloseMarkers]);
-		if (!marker) {
-			const rest = value.slice(cursor);
-			if (mode === "thinking") {
-				thinking += rest;
-			} else {
-				answer += rest;
-			}
-			break;
-		}
-
-		const content = value.slice(cursor, cursor + marker.index);
-		if (mode === "thinking") {
-			thinking += content;
-			if (thinking) {
-				thinkingList.push(thinking);
-			}
-			thinking = "";
-			mode = "answer";
-		} else if (isThinkOpenMarker(marker.value)) {
-			answer += content;
-			mode = "thinking";
-		} else {
-			if (content) {
-				thinkingList.push(content);
-			}
-			mode = "answer";
-		}
-		cursor += marker.index + marker.value.length;
-	}
-
-	if (mode === "thinking" && thinking) {
-		thinkingList.push(thinking);
-	}
-
-	return { answer, thinkingList };
-}
-
-function findMarker(value: string, markerList: string[]): { index: number; value: string } | undefined {
-	const lowerValue = value.toLowerCase();
-	return markerList.reduce<{ index: number; value: string } | undefined>((current, marker) => {
-		const index = lowerValue.indexOf(marker.toLowerCase());
-		if (index < 0 || (current && current.index <= index)) {
-			return current;
-		}
-		return { index, value: marker };
-	}, undefined);
-}
-
-function isThinkOpenMarker(value: string): boolean {
-	return thinkOpenMarkers.some(marker => marker.toLowerCase() === value.toLowerCase());
-}
-
-function extractThinkingText(payload: unknown): string {
-	if (typeof payload === "string") {
-		return payload === "[DONE]" ? "" : payload;
-	}
-	if (!isRecord(payload)) {
-		return "";
-	}
-	return getRawString(payload.thought)
-		|| getRawString(payload.thinking)
-		|| getRawString(payload.reasoning)
-		|| getRawString(payload.observation)
-		|| getRawString(payload.text)
-		|| getRawString(payload.content)
-		|| "";
-}
-
-function formatToolStatus(payload: unknown): string {
-	if (!isRecord(payload)) {
-		return "正在查询实时业务数据…";
-	}
-	const status = getString(payload.status);
-	return status === "finished" ? "实时业务数据查询完成" : "正在查询实时业务数据…";
-}
-
-function normalizeCitation(payload: unknown): AiCitation | undefined {
-	if (typeof payload === "string") {
-		return payload ? { source: payload } : undefined;
-	}
-	if (!isRecord(payload)) {
-		return undefined;
-	}
-	const citation: AiCitation = {
-		source: getString(payload.source),
-		dataDomain: getString(payload.dataDomain) || getString(payload.domain),
-		timeRange: getString(payload.timeRange) || formatScope(payload.scope),
-		caliber: getString(payload.caliber) || getString(payload.metric),
-		generatedAt: getDisplayText(payload.generatedAt) || getDisplayText(payload.generated_at)
-	};
-	return Object.values(citation).some(Boolean) ? citation : undefined;
-}
-
-function createStreamError(payload: unknown): GaoAiStreamError {
-	if (!isRecord(payload)) {
-		return new GaoAiStreamError("智能助手查询失败，请稍后重试", "DIFY_ERROR");
-	}
-	return new GaoAiStreamError(
-		getString(payload.message) || "智能助手查询失败，请稍后重试",
-		getString(payload.code)
-	);
-}
-
-function getChatErrorMessage(error: unknown): string {
-	if (error instanceof GaoAiHttpError) {
-		if (error.status === 401) {
-			return error.message.includes("会话") ? error.message : "登录已过期，请重新登录";
-		}
-		if (error.status === 403) {
-			return "当前账号无权使用门店智能助手";
-		}
-		if (error.status === 429) {
-			return "请求过于频繁，请稍后再试";
-		}
-		return error.message;
-	}
-	if (error instanceof GaoAiStreamError) {
-		if (error.code === "DIFY_TIMEOUT") {
-			return "数据查询超时，请缩小时间范围后重试";
-		}
-		return error.message;
-	}
-	if (error instanceof DOMException && error.name === "AbortError") {
-		return "已停止生成，可重新提问";
-	}
-	if (error instanceof TypeError) {
-		return "连接中断，可重新提问";
-	}
-	return "智能助手暂时不可用，请稍后重试";
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-	return typeof value === "object" && value !== null;
-}
-
-function getString(value: unknown): string | undefined {
-	return typeof value === "string" && value.trim() ? value.trim() : undefined;
-}
-
-function getRawString(value: unknown): string {
-	return typeof value === "string" ? value : "";
-}
-
-function getDisplayText(value: unknown): string | undefined {
-	const text = getString(value);
-	if (text) {
-		return text;
-	}
-	const timestamp = getNumber(value);
-	if (timestamp === undefined) {
-		return undefined;
-	}
-	const milliseconds = timestamp < 100000000000 ? timestamp * 1000 : timestamp;
-	return new Date(milliseconds).toLocaleString("zh-CN", { hour12: false });
-}
-
-function formatScope(value: unknown): string | undefined {
-	const text = getString(value);
-	if (text) {
-		return text;
-	}
-	if (!isRecord(value)) {
-		return undefined;
-	}
-	const beginAt = getDisplayText(value.beginAt) || getDisplayText(value.begin);
-	const endAt = getDisplayText(value.endAt) || getDisplayText(value.end);
-	if (beginAt && endAt) {
-		return `${beginAt} 至 ${endAt}`;
-	}
-	return beginAt || endAt;
-}
-
-function getNumber(value: unknown): number | undefined {
-	return typeof value === "number" && Number.isFinite(value) ? value : undefined;
-}
-
-function getTimestamp(value: number | string | undefined): number {
-	const timestamp = typeof value === "number" ? value : Number(value);
-	if (!Number.isFinite(timestamp) || timestamp <= 0) {
-		return Date.now();
-	}
-	return timestamp < 100000000000 ? timestamp * 1000 : timestamp;
-}
-
-function isFailedConversationMessage(message: GaoAiConversationMessage): boolean {
-	const status = getString(message.status)?.toLowerCase();
-	return status === "error" || status === "failed" || status === "failure";
-}

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

@@ -1,135 +0,0 @@
-<template>
-	<div class="composer">
-		<div v-if="lastError" class="error-bar">
-			<span class="error-text" v-text="lastError" />
-			<t-button v-if="canRetry" variant="text" size="small" content="重试" @click="emit('retry')" />
-		</div>
-		<t-form class="input-wrap glass-white" @submit="submitMessage">
-			<t-input
-				v-model="draft"
-				class="input"
-				borderless
-				:disabled="isGenerating || props.disabled"
-				:maxlength="256"
-				placeholder="问问小糕怎么个事…"
-			/>
-			<t-button
-				v-if="isGenerating"
-				class="send"
-				type="button"
-				size="small"
-				theme="danger"
-				content="停止"
-				@click="emit('stop')"
-			/>
-			<t-button
-				v-else
-				class="send"
-				type="submit"
-				size="small"
-				theme="primary"
-				content="发送"
-			/>
-		</t-form>
-	</div>
-</template>
-<script setup lang="ts">
-
-defineOptions({
-	name: "AiChatComposer"
-});
-
-interface Props {
-	isGenerating: boolean;
-	lastError: string;
-	canRetry: boolean;
-	disabled?: boolean;
-}
-
-const props = defineProps<Props>();
-const draft = defineModel<string>({ required: true });
-const emit = defineEmits<{
-	send: [message: string];
-	stop: [];
-	retry: [];
-}>();
-
-function submitMessage(): void {
-	if (props.disabled) {
-		return;
-	}
-	const message = draft.value.trim();
-	if (!message) {
-		return;
-	}
-	draft.value = "";
-	emit("send", message);
-}
-</script>
-<style scoped lang="less">
-.composer {
-	width: 100%;
-
-	.error-bar {
-		gap: .375rem;
-		display: flex;
-		padding: .5rem .75rem;
-		border-radius: .75rem;
-		color: #b42318;
-		font-size: .75rem;
-		background: #fef3f2;
-		align-items: center;
-		justify-content: space-between;
-
-		.error-text {
-			min-width: 0;
-		}
-
-		.t-button {
-			color: #b42318;
-			flex: none;
-		}
-	}
-
-	.input-wrap {
-		--td-input-bg-color: transparent;
-		--td-button-border-radius: 1rem;
-
-		gap: .5rem;
-		border: 1px solid var(--td-component-border);
-		margin: .5rem 0 0 0;
-		display: flex;
-		padding: .25rem .25rem .25rem .75rem;
-		box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .12);
-		align-items: center;
-		border-radius: 1.25rem;
-
-		.input {
-			min-width: 0;
-			flex: 1;
-		}
-
-		.send {
-			width: 4rem;
-			flex: none;
-		}
-	}
-}
-
-@keyframes rotate {
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-:global(html.theme-dark) {
-	.error-bar {
-		color: #fda29b;
-		background: rgba(180, 35, 24, .18);
-
-		.t-button {
-			color: #fda29b;
-		}
-	}
-}
-</style>

src/pages/ai/components/AiChatMessageList.vue

@@ -1,402 +0,0 @@
-<template>
-	<div ref="messageList" class="message-list" role="log" aria-live="polite">
-		<div v-if="!props.messages.length" class="welcome">
-			<div class="welcome-icon"><t-icon name="robot-2" size="2rem" /></div>
-			<h3>今天想了解什么？</h3>
-			<p>我会根据当前门店的实时业务数据回答经营问题。</p>
-			<div class="quick-list">
-				<t-button
-					v-for="question in props.quickQuestionList"
-					:key="question"
-					class="quick-question"
-					variant="outline"
-					size="small"
-					@click="emit('selectQuestion', question)"
-				>
-					<span v-text="question" />
-				</t-button>
-			</div>
-			<t-button
-				v-if="props.quickQuestionList.length"
-				class="refresh-button"
-				variant="text"
-				size="small"
-				:disabled="isRefreshingQuestions"
-				@click="handleRefreshQuestions"
-			>
-				<template #icon>
-					<t-icon name="refresh" class="refresh-icon" :class="{ refreshing: isRefreshingQuestions }" />
-				</template>
-				<span>换一批</span>
-			</t-button>
-		</div>
-
-		<article
-			v-for="message in props.messages"
-			:key="message.id"
-			class="message-row"
-			:class="message.role"
-		>
-			<div class="message-header">
-				<div class="avatar">
-					<t-icon :name="message.role === 'assistant' ? 'robot-2' : 'user'" />
-				</div>
-				<div class="role-name" v-text="message.role === 'assistant' ? 'AI 小糕' : '店长'" />
-			</div>
-			<div class="message-main">
-				<div class="bubble" :class="message.role">
-					<template v-if="message.role === 'assistant'">
-						<ai-chat-thinking
-							v-for="thinking in message.thinkingList"
-							:key="thinking.id"
-							:content="thinking.content"
-							:is-generating="props.isGenerating && thinking.id === message.thinkingList[message.thinkingList.length - 1]?.id"
-						/>
-					</template>
-					<div v-if="message.content && message.role === 'assistant'" class="content markdown-content">
-						<markdown-view :content="message.content" />
-					</div>
-					<div v-else-if="message.content" class="content" v-text="message.content" />
-					<div v-else-if="message.role === 'assistant' && props.isGenerating" class="typing">
-						<span /><span /><span />
-					</div>
-					<div v-if="message.role === 'assistant' && message.citationList.length" class="citation-list">
-						<div
-							v-for="(citation, index) in message.citationList"
-							:key="`${message.id}-${index}`"
-							class="citation"
-						>
-							<span class="citation-label">数据来源</span>
-							<span v-text="getCitationText(citation)" />
-							<span v-if="citation.generatedAt" class="citation-time" v-text="`生成时间：${citation.generatedAt}`" />
-						</div>
-					</div>
-					<div v-if="message.role === 'assistant' && (message.statusText || (!props.isGenerating && message.content))" class="message-status" v-text="getMessageStatus(message)" />
-				</div>
-			</div>
-		</article>
-	</div>
-</template>
-<script setup lang="ts">
-import { MarkdownView, Toolkit } from "timi-web";
-import type { AiChatMessage } from "@/composables/useAiChat";
-import AiChatThinking from "@/pages/ai/components/AiChatThinking.vue";
-
-defineOptions({
-	name: "AiChatMessageList"
-});
-
-interface Props {
-	messages: AiChatMessage[];
-	isGenerating: boolean;
-	quickQuestionList: readonly string[];
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<{
-	selectQuestion: [question: string];
-	refreshQuestions: [];
-}>();
-
-const messageListRef = useTemplateRef<HTMLElement>("messageList");
-const isRefreshingQuestions = ref(false);
-
-async function handleRefreshQuestions(): Promise<void> {
-	if (isRefreshingQuestions.value) {
-		return;
-	}
-	isRefreshingQuestions.value = true;
-	emit("refreshQuestions");
-	await Toolkit.sleep(300);
-	isRefreshingQuestions.value = false;
-}
-
-async function scrollToBottom(): Promise<void> {
-	await nextTick();
-	const element = messageListRef.value;
-	if (element) {
-		element.scrollTop = element.scrollHeight;
-	}
-}
-
-function getMessageStatus(message: AiChatMessage): string {
-	if (message.statusText) {
-		return message.statusText;
-	}
-	const timeText = `生成时间：${formatDateTime(message.createdAt)}`;
-	if (message.duration !== undefined) {
-		return `${timeText} · 查询耗时：${formatDuration(message.duration)}`;
-	}
-	return timeText;
-}
-
-function getCitationText(citation: AiChatMessage["citationList"][number]): string {
-	const textList = [
-		citation.dataDomain ? `数据域：${citation.dataDomain}` : "",
-		citation.timeRange ? `统计范围：${citation.timeRange}` : "",
-		citation.caliber ? `统计口径：${citation.caliber}` : "",
-		citation.source ? `来源：${citation.source}` : ""
-	].filter(Boolean);
-	return textList.join(" · ");
-}
-
-function formatDateTime(timestamp: number): string {
-	return new Date(timestamp).toLocaleString("zh-CN", { hour12: false });
-}
-
-function formatDuration(duration: number): string {
-	if (duration < 1000) {
-		return `${duration} 毫秒`;
-	}
-	return `${(duration / 1000).toFixed(1)} 秒`;
-}
-
-defineExpose({
-	scrollToBottom
-});
-</script>
-<style scoped lang="less">
-.message-list {
-	gap: 1rem;
-	flex: 1;
-	display: flex;
-	padding: .5rem 1rem calc(6rem + env(safe-area-inset-bottom, 0px));
-	min-height: 0;
-	overflow-y: auto;
-	flex-direction: column;
-
-	.welcome {
-		margin: auto 0;
-		text-align: center;
-
-		.welcome-icon {
-			color: #0f766e;
-			width: 4rem;
-			height: 4rem;
-			margin: 0 auto 1rem;
-			border-radius: 1.25rem;
-			display: flex;
-			background: #ccfbf1;
-			align-items: center;
-			justify-content: center;
-		}
-
-		h3 {
-			margin: 0;
-			font-size: 1.125rem;
-		}
-
-		p {
-			color: var(--td-text-color-secondary);
-			margin: .5rem auto 1rem;
-			font-size: .8125rem;
-			line-height: 1.5;
-		}
-
-		.quick-list {
-			gap: .5rem;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-
-			.quick-question {
-				overflow: hidden;
-				min-width: 0;
-				max-width: 100%;
-
-				:deep(.t-button__content) {
-					display: block;
-					overflow: hidden;
-					min-width: 0;
-					max-width: 100%;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-			}
-		}
-
-		.refresh-button {
-			margin-top: .75rem;
-
-			.refresh-icon.refreshing {
-				animation: refresh-once .3s var(--tui-bezier);
-			}
-		}
-	}
-
-	.message-row {
-		gap: .5rem;
-		display: flex;
-		width: 100%;
-		align-items: stretch;
-		flex-direction: column;
-
-		&.user {
-			.message-header {
-				justify-content: flex-end;
-			}
-
-			.role-name {
-				order: 1;
-			}
-
-			.avatar {
-				order: 2;
-			}
-		}
-
-		.message-header {
-			gap: .5rem;
-			width: 100%;
-			display: flex;
-			align-items: center;
-		}
-
-		.avatar {
-			flex: none;
-			color: #0f766e;
-			width: 2rem;
-			height: 2rem;
-			display: flex;
-			background: #ccfbf1;
-			align-items: center;
-			justify-content: center;
-		}
-
-		&.user .avatar {
-			color: #2563eb;
-			background: #dbeafe;
-		}
-
-		.message-main {
-			width: 100%;
-			max-width: none;
-		}
-
-		&.user .message-main {
-			text-align: right;
-		}
-
-		.role-name {
-			color: var(--td-text-color-secondary);
-			margin: 0;
-			font-size: .6875rem;
-		}
-
-		.bubble {
-			color: var(--td-text-color-primary);
-			width: 100%;
-			padding: .75rem;
-			border-radius: .25rem 1rem 1rem 1rem;
-			background: var(--ai-bubble);
-			text-align: left;
-			box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .05);
-
-			.thinking + .thinking {
-				margin-top: .75rem;
-			}
-
-			&.user {
-				color: white;
-				border-radius: 1rem .25rem 1rem 1rem;
-				background: #0f766e;
-			}
-
-			.content {
-				font-size: .875rem;
-				line-height: 1.65;
-				white-space: pre-wrap;
-				word-break: break-word;
-			}
-
-			.markdown-content {
-				white-space: normal;
-
-				:deep(.tui-markdown-view) {
-					width: auto;
-					font-size: .875rem;
-					line-height: 1.65;
-					word-break: break-word;
-				}
-			}
-		}
-	}
-
-	.typing {
-		gap: .25rem;
-		display: flex;
-		padding: .25rem .125rem;
-		align-items: center;
-
-		span {
-			width: .375rem;
-			height: .375rem;
-			border-radius: 50%;
-			background: #0f766e;
-			animation: typing 1.2s infinite ease-in-out;
-
-			&:nth-child(2) {
-				animation-delay: .16s;
-			}
-
-			&:nth-child(3) {
-				animation-delay: .32s;
-			}
-		}
-	}
-
-	.citation-list {
-		gap: .375rem;
-		margin-top: .75rem;
-		padding-top: .625rem;
-		display: flex;
-		border-top: 1px solid var(--td-component-border);
-		flex-direction: column;
-
-		.citation {
-			color: var(--td-text-color-secondary);
-			display: flex;
-			font-size: .6875rem;
-			line-height: 1.4;
-			flex-wrap: wrap;
-		}
-
-		.citation-label {
-			color: #0f766e;
-			margin-right: .25rem;
-		}
-
-		.citation-time {
-			width: 100%;
-			margin-top: .125rem;
-		}
-	}
-
-	.message-status {
-		color: var(--td-text-color-secondary);
-		margin-top: .5rem;
-		font-size: .6875rem;
-		line-height: 1.4;
-	}
-}
-
-@keyframes typing {
-	0%, 60%, 100% {
-		opacity: .35;
-		transform: translateY(0);
-	}
-	30% {
-		opacity: 1;
-		transform: translateY(-.1875rem);
-	}
-}
-
-@keyframes refresh-once {
-	from {
-		transform: rotate(0);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-</style>

src/pages/ai/components/AiChatPanel.vue

@@ -1,30 +1,65 @@
 <template>
-	<section class="ai-chat-panel" :aria-label="`${props.storeName || '当前门店'}经营助手`">
+	<shared-ai-chat-panel
-		<ai-chat-message-list
+		ref="messageList"
-			ref="messageList"
+		class="shared-panel"
-			:messages="messages"
+		:messages="messages"
-			:is-generating="isGenerating"
+		:is-generating="isGenerating"
-			:quick-question-list="aiQuickQuestionList"
+		:is-loading="isLoadingConversation"
-			@select-question="submitMessage"
+		:active-tool-status="activeToolStatus"
-			@refresh-questions="refreshQuickQuestions"
+		:last-error="lastError"
-		/>
+		:can-retry="canRetry"
-		<div class="bottom-area">
+		:aria-label="`${props.storeName || '当前会话'}经营助手`"
-			<div v-if="activeToolStatus" class="tool-status">
+		:role-names="{ assistant: 'AI 小糕', user: '店长' }"
-				<t-icon name="loading" size="1rem" />
+		:placeholder="'问问小糕怎么个事…'"
-				<span v-text="activeToolStatus" />
+		:format-message-status="formatMessageStatus"
+		@send="submitMessage"
+		@stop="stopGeneration"
+		@retry="retryLastMessage"
+		@new-conversation="emit('new-conversation')"
+	>
+		<template #welcome>
+			<div class="welcome">
+				<div class="welcome-icon" v-entrance-transition>
+					<t-icon name="robot-2" size="2rem" />
+				</div>
+				<h3 v-entrance-transition="70">今天想了解什么？</h3>
+				<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"
+						size="small"
+						@click="submitMessage(question)"
+					>
+						<span v-text="question" />
+					</t-button>
+				</div>
+				<t-button
+					v-if="aiQuickQuestionList.length"
+					class="refresh-button"
+					variant="text"
+					size="small"
+					:disabled="isRefreshingQuestions"
+					@click="refreshQuickQuestions"
+				>
+					<template #icon>
+						<t-icon name="refresh" class="refresh-icon" :class="{ refreshing: isRefreshingQuestions }" />
+					</template>
+					<span>换一批</span>
+				</t-button>
 			</div>
-			<ai-chat-composer
+		</template>
-				v-model="draft"
+		<template #citation="{ citation }">
-				:is-generating="isGenerating"
+			<div class="citation">
-				:disabled="isLoadingConversation"
+				<span class="citation-label">数据来源</span>
-				:last-error="lastError"
+				<span v-text="formatCitation(citation)" />
-				:can-retry="canRetry"
+				<span v-if="citation.generatedAt" class="citation-time">
-				@send="submitMessage"
+					<span v-text="`生成时间：${citation.generatedAt}`" />
-				@stop="stopGeneration"
+				</span>
-				@retry="retryLastMessage"
+			</div>
-			/>
+		</template>
-		</div>
+	</shared-ai-chat-panel>
-	</section>
 	<ai-conversation-list
 		v-model:visible="conversationVisible"
 		:active-conversation-id="conversationId"
@@ -34,16 +69,29 @@
 		@delete="handleConversationDelete"
 	/>
 </template>
+
 <script setup lang="ts">
-import { useAiChat } from "@/composables/useAiChat";
+import {
-import type { GaoAiConversation } from "@/api/GaoAiAPI";
+	AiChatHttpError,
-import AiChatComposer from "@/pages/ai/components/AiChatComposer.vue";
+	AiChatPanel as SharedAiChatPanel,
+	AiChatStreamError,
+	parseAssistantResponse,
+	useAiChat,
+	type AiChatCitationFormatter,
+	type AiChatMessage,
+	type AiChatMessageStatusFormatter
+} from "timi-tdesign-mobile";
+import type { GaoAiConversation, GaoAiConversationMessage, GaoAiConversationReadResponse } from "@/api/GaoAiAPI";
+import {
+	chat,
+	readConversation as readConversationApi
+} from "@/api/GaoAiAPI";
 import AiConversationList from "@/pages/ai/components/AiConversationList.vue";
-import AiChatMessageList from "@/pages/ai/components/AiChatMessageList.vue";
 import { aiQuickQuestionList, loadAiQuickQuestions, refreshAiQuickQuestions } from "@/pages/ai/aiChatQuestions";
 import { useNavBarStore } from "@/store/navBarStore";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
+import { useUserStore } from "timi-web-api/store";
 
 defineOptions({
 	name: "AiChatPanel"
@@ -56,14 +104,18 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const emit = defineEmits<{
+	"new-conversation": [];
+}>();
+const userStore = useUserStore();
 const navBarStore = useNavBarStore();
 type MessageListExpose = {
 	scrollToBottom: () => Promise<void>;
 };
 
 const messageListRef = useTemplateRef<MessageListExpose>("messageList");
-const draft = shallowRef("");
 const conversationVisible = ref(false);
+const isRefreshingQuestions = ref(false);
 const {
 	messages,
 	conversationId,
@@ -77,12 +129,40 @@ const {
 	stopGeneration,
 	retryLastMessage,
 	resetConversation
-} = useAiChat({
+} = useAiChat<GaoAiConversationReadResponse, { storeId?: string }>({
 	sessionKey: () => props.sessionKey,
-	storeId: () => props.storeId,
+	context: () => ({ storeId: props.storeId }),
-	scrollToBottom
+	request: async ({ message, conversationId: activeConversationId, context, signal }) => await chat({
+		message,
+		...(activeConversationId ? { conversationId: activeConversationId } : {}),
+		...(context?.storeId ? { storeId: context.storeId } : {})
+	}, userStore.token, signal),
+	readConversation: async conversationIdValue => await readConversationHistory(conversationIdValue),
+	mapConversationMessages,
+	scrollToBottom,
+	isConversationExpired,
+	getErrorMessage: error => getAiErrorMessage(error)
 });
 const isBusy = computed(() => isGenerating.value || isLoadingConversation.value);
+const formatCitation: AiChatCitationFormatter = citation => [
+	citation.dataDomain ? `数据域：${citation.dataDomain}` : "",
+	citation.timeRange ? `统计范围：${citation.timeRange}` : "",
+	citation.caliber ? `统计口径：${citation.caliber}` : "",
+	citation.source ? `来源：${citation.source}` : ""
+].filter(Boolean).join(" · ");
+const formatMessageStatus: AiChatMessageStatusFormatter = message => {
+	if (message.statusText) {
+		return message.statusText;
+	}
+	const timeText = `生成时间：${new Date(message.createdAt).toLocaleString("zh-CN", { hour12: false })}`;
+	if (message.duration !== undefined) {
+		const durationText = message.duration < 1000
+			? `${message.duration} 毫秒`
+			: `${(message.duration / 1000).toFixed(1)} 秒`;
+		return `${timeText} · 查询耗时：${durationText}`;
+	}
+	return timeText;
+};
 
 async function submitMessage(message: string): Promise<void> {
 	await sendMessage(message);
@@ -111,14 +191,144 @@ function handleConversationDelete(deletedConversationId: string): void {
 	}
 }
 
-function refreshQuickQuestions(): void {
+async function refreshQuickQuestions(): Promise<void> {
+	if (isRefreshingQuestions.value) {
+		return;
+	}
+	isRefreshingQuestions.value = true;
 	refreshAiQuickQuestions();
+	await new Promise<void>(resolve => setTimeout(resolve, 300));
+	isRefreshingQuestions.value = false;
 }
 
 async function scrollToBottom(): Promise<void> {
 	await messageListRef.value?.scrollToBottom();
 }
 
+async function readConversationHistory(id: string): Promise<GaoAiConversationReadResponse> {
+	const messageList: GaoAiConversationMessage[] = [];
+	let firstId: string | undefined;
+	let result: GaoAiConversationReadResponse = {};
+
+	while (true) {
+		result = await readConversationApi({
+			conversationId: id,
+			firstId,
+			limit: 100
+		});
+		const currentList = Array.isArray(result.data) ? result.data : [];
+		messageList.push(...currentList);
+		if (result["has_more"] !== true || !currentList.length) {
+			break;
+		}
+		const nextFirstId = currentList[0]?.id;
+		if (!nextFirstId || nextFirstId === firstId) {
+			break;
+		}
+		firstId = nextFirstId;
+	}
+
+	return {
+		...result,
+		data: messageList
+	};
+}
+
+function mapConversationMessages(response: GaoAiConversationReadResponse): AiChatMessage[] {
+	const sourceList = Array.isArray(response.data) ? response.data : [];
+	return sourceList
+		.map((item, index) => ({
+			item,
+			index,
+			timestamp: getTimestamp(item["created_at"])
+		}))
+		.sort((left, right) => left.timestamp - right.timestamp || left.index - right.index)
+		.flatMap(({ item, index }) => {
+			const messageList: AiChatMessage[] = [];
+			const createdAt = getTimestamp(item["created_at"]);
+			const query = getRawString(item.query);
+			const answer = getRawString(item.answer);
+			if (query) {
+				messageList.push(createHistoryMessage(index * 2 + 1, "user", query, createdAt));
+			}
+			if (answer || isFailedConversationMessage(item)) {
+				const parsedAnswer = parseAssistantResponse(answer);
+				messageList.push({
+					...createHistoryMessage(index * 2 + 2, "assistant", parsedAnswer.answer, createdAt),
+					thinkingList: parsedAnswer.thinkingList.map((content, index) => ({
+						id: index + 1,
+						content
+					})),
+					statusText: isFailedConversationMessage(item) ? "本次回答生成失败" : undefined
+				});
+			}
+			return messageList;
+		});
+}
+
+function createHistoryMessage(
+	id: number,
+	role: AiChatMessage["role"],
+	content: string,
+	createdAt: number
+): AiChatMessage {
+	return {
+		id,
+		role,
+		content,
+		thinkingList: [],
+		citationList: [],
+		createdAt
+	};
+}
+
+function isConversationExpired(error: unknown): boolean {
+	if (error instanceof AiChatHttpError || error instanceof AiChatStreamError) {
+		return error.message.includes("AI 会话不存在或已过期")
+			|| error.code?.toLowerCase().includes("session") === true;
+	}
+	return false;
+}
+
+function getAiErrorMessage(error: unknown): string {
+	if (error instanceof AiChatHttpError) {
+		if (error.status === 401) {
+			return error.message.includes("会话") ? error.message : "登录已过期，请重新登录";
+		}
+		if (error.status === 403) {
+			return "当前账号无权使用门店智能助手";
+		}
+		if (error.status === 429) {
+			return "请求过于频繁，请稍后再试";
+		}
+		return error.message;
+	}
+	if (error instanceof AiChatStreamError) {
+		if (error.code === "DIFY_TIMEOUT") {
+			return "数据查询超时，请缩小时间范围后重试";
+		}
+		return error.message;
+	}
+	return getErrorMessage(error, "智能助手暂时不可用，请稍后重试");
+}
+
+function getTimestamp(value: number | string | undefined): number {
+	const timestamp = typeof value === "number" ? value : Number(value);
+	if (!Number.isFinite(timestamp) || timestamp <= 0) {
+		return Date.now();
+	}
+	return timestamp < 100000000000 ? timestamp * 1000 : timestamp;
+}
+
+function getRawString(value: unknown): string {
+	return typeof value === "string" ? value : "";
+}
+
+function isFailedConversationMessage(message: GaoAiConversationMessage): boolean {
+	const status = typeof message.status === "string" ? message.status.toLowerCase() : "";
+	return status === "error" || status === "failed" || status === "failure";
+}
+
 onMounted(async () => {
 	navBarStore.clearRight();
 	navBarStore.setRightText("历史", "var(--td-brand-color)", openConversationList);
@@ -129,60 +339,95 @@ watch(isBusy, value => navBarStore.setRightDisabled(value));
 
 onUnmounted(() => navBarStore.clearRight());
 </script>
+
 <style scoped lang="less">
-.ai-chat-panel {
+.shared-panel {
-	height: 100%;
+	--ai-msg-padding-top: calc(var(--app-nav-height) + 1rem);
-	display: flex;
-	position: relative;
-	overflow: hidden;
-	min-height: 0;
-	background: var(--ai-background);
-	padding-top: var(--app-nav-height);
-	flex-direction: column;
 
-	.bottom-area {
+	:deep(.welcome) {
-		inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
+		margin: auto 0;
-		width: auto;
+		text-align: center;
-		margin: 0 auto;
-		z-index: 2;
-		position: absolute;
-		max-width: 40rem;
 
-		.tool-status {
+		.welcome-icon {
-			gap: .375rem;
-			margin-bottom: .5rem;
 			color: #0f766e;
-			padding: .5rem .75rem;
+			width: 4rem;
-			border-radius: .75rem;
+			height: 4rem;
+			margin: 0 auto 1rem;
+			border-radius: 1.25rem;
 			display: flex;
-			font-size: .75rem;
+			background: #ccfbf1;
-			background: var(--ai-soft);
 			align-items: center;
+			justify-content: center;
+		}
 
-			.t-icon {
+		h3 {
-				animation: rotate 1s linear infinite;
+			margin: 0;
+			font-size: 1.125rem;
+		}
+
+		p {
+			color: var(--td-text-color-secondary);
+			margin: .5rem auto 1rem;
+			font-size: .8125rem;
+			line-height: 1.5;
+		}
+
+		.quick-list {
+			gap: .5rem;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+
+			.quick-question {
+				overflow: hidden;
+				min-width: 0;
+				max-width: 100%;
+
+				:deep(.t-button__content) {
+					display: block;
+					overflow: hidden;
+					min-width: 0;
+					max-width: 100%;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+			}
+		}
+
+		.refresh-button {
+			margin-top: .75rem;
+
+			.refresh-icon.refreshing {
+				animation: refresh-once .3s var(--td-animation-easing-standard);
 			}
 		}
 	}
+
+	:deep(.citation) {
+		color: var(--td-text-color-secondary);
+		display: flex;
+		font-size: .6875rem;
+		line-height: 1.4;
+		flex-wrap: wrap;
+	}
+
+	:deep(.citation-label) {
+		color: #0f766e;
+		margin-right: .25rem;
+	}
+
+	:deep(.citation-time) {
+		width: 100%;
+		margin-top: .125rem;
+	}
 }
 
-@keyframes rotate {
+@keyframes refresh-once {
+	from {
+		transform: rotate(0);
+	}
 	to {
 		transform: rotate(360deg);
 	}
 }
-
-:global(:root) {
-	--ai-background: rgba(255, 255, 255, .98);
-	--ai-bubble: #f5f6f8;
-	--ai-input: white;
-	--ai-soft: #f0fdfa;
-}
-
-:global(html.theme-dark) {
-	--ai-background: rgba(15, 23, 42, .98);
-	--ai-bubble: #1e293b;
-	--ai-input: #111827;
-	--ai-soft: rgba(20, 184, 166, .12);
-}
 </style>

src/pages/ai/components/AiChatThinking.vue

@@ -1,84 +0,0 @@
-<template>
-	<section class="thinking" aria-label="Agent think">
-		<div class="thinking-header">
-			<span>小糕正在思考...</span>
-		</div>
-		<div
-			ref="thinkingContent"
-			class="thinking-content"
-			role="log"
-			aria-live="polite"
-		>
-			<span v-text="props.content" />
-		</div>
-	</section>
-</template>
-<script setup lang="ts">
-interface Props {
-	content: string;
-	isGenerating: boolean;
-}
-
-const props = defineProps<Props>();
-
-const thinkingContentRef = useTemplateRef<HTMLElement>("thinkingContent");
-
-// ---------- 自动滚动 ----------
-
-async function scrollToBottom(): Promise<void> {
-	await nextTick();
-
-	const element = thinkingContentRef.value;
-	if (!element) {
-		return;
-	}
-
-	element.scrollTop = element.scrollHeight;
-}
-
-watch(
-	[() => props.content, () => props.isGenerating],
-	async ([content, isGenerating]) => {
-		if (content && isGenerating) {
-			await scrollToBottom();
-		}
-	},
-	{ deep: true, flush: "post" }
-);
-</script>
-<style scoped lang="less">
-.thinking {
-	gap: .5rem;
-	height: clamp(2rem, 24vh, 10rem);
-	display: flex;
-	padding: .625rem .75rem;
-	border: 1px solid var(--td-component-border);
-	border-radius: .75rem;
-	background: var(--ai-background);
-	flex-direction: column;
-	min-height: 2rem;
-	max-height: 10rem;
-	overflow: hidden;
-
-	.thinking-header {
-		gap: .375rem;
-		display: flex;
-		align-items: center;
-		color: var(--td-text-color-secondary);
-		font-size: .75rem;
-		line-height: 1rem;
-	}
-
-	.thinking-content {
-		flex: 1;
-		padding-right: .25rem;
-		color: var(--td-text-color-secondary);
-		font-size: .75rem;
-		line-height: 1.5;
-		min-height: 0;
-		overflow-y: auto;
-		white-space: pre-wrap;
-		word-break: break-word;
-	}
-}
-</style>

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();
 		},
@@ -235,7 +245,7 @@ function formatConversationTime(conversation: GaoAiConversation): number {
 	const value = conversation["updated_at"] || conversation["created_at"];
 	const timestamp = typeof value === "number" ? value : Number(value);
 	if (!Number.isFinite(timestamp) || timestamp <= 0) {
-		return "时间未知";
+		return -1;
 	}
 	return timestamp < 100000000000 ? timestamp * 1000 : timestamp;
 }
@@ -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

@@ -34,14 +34,15 @@
 			</t-cell>
 		</t-cell-group>
 		<card-container v-entrance-transition="140">
-			<photo-scroller
+			<media-selector
-				class="photo-scroller"
+				class="media-selector"
 				:model-value="photoList"
 				:photo-items="photoItemList"
 				:show-viewer-actions="canUpdateCustomer"
 				:show-add="false"
 				:show-remove="false"
 				:submit="submitPhotoItems"
+				show-type-label
 				title="照片列表"
 			/>
 		</card-container>
@@ -98,6 +99,9 @@
 		<t-cell-group theme="card">
 			<t-cell title="邀请客户" :note="inviteeCountText" arrow @click="toInviteeList" />
 		</t-cell-group>
+		<t-cell-group v-if="canReadFollowUpReminder" title="客户跟进" theme="card">
+			<t-cell title="跟进提醒" note="查看客户提醒" arrow @click="toFollowUpReminderList" />
+		</t-cell-group>
 		<t-button
 			v-can="permissionCodes.customer.delete"
 			class="delete-action"
@@ -142,7 +146,7 @@ import TagAPI from "@/api/TagAPI";
 import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
 import CustomerRemoveDialog from "@/pages/customer/component/CustomerRemoveDialog.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import TagSelector from "@/components/TagSelector.vue";
 import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -177,6 +181,7 @@ const canReadSalesOrder = computed(() => userStore.hasPermissions(permissionCode
 const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
 const canApplyTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.apply));
 const canUpdateCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.update));
+const canReadFollowUpReminder = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.read));
 
 // ---------- 资料 ----------
 
@@ -389,6 +394,16 @@ async function toInviteeList(): Promise<void> {
 	await router.push(`/management/customers/${customer.value.id}/invitees`);
 }
 
+async function toFollowUpReminderList(): Promise<void> {
+	if (!customer.value?.id || !canReadFollowUpReminder.value) {
+		return;
+	}
+	await router.push({
+		name: "CustomerFollowUpReminderList",
+		query: { customerId: customer.value.id }
+	});
+}
+
 async function toEventRecordList(): Promise<void> {
 	if (!canReadEventRecord.value || !customer.value?.id) {
 		return;
@@ -531,7 +546,7 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
-	:deep(.photo-scroller) {
+	:deep(.media-selector) {
 		padding: 1rem;
 	}
 

src/pages/customer/CustomerEdit.vue

@@ -71,7 +71,7 @@
 			</t-form-item>
 			<t-form-item label-width="0">
 				<div class="photo">
-					<photo-scroller
+					<media-selector
 						v-model="photoList"
 						v-model:photo-items="photoItemList"
 						:edit-mode="true"
@@ -80,9 +80,11 @@
 						:show-viewer-actions="!isCustomerBound"
 						:add-actions="photoAddActions"
 						:loading="isPhotoUploading"
-						@add-photo="openPhotoPicker('PHOTO')"
+						show-type-label
-						@add-point-card="openPhotoPicker('POINT_CARD')"
+						@add="openPhotoPicker('OTHER')"
-						@add-other="openPhotoPicker('OTHER')"
+						@action="handlePhotoAction"
+						@capture-photo="capturePhoto"
+						@capture-video="captureVideo"
 					/>
 					<div class="tips orange" v-if="!hasCustomerDeletePermission">当前账户权限编辑客户需要上传照片和积分卡</div>
 				</div>
@@ -176,7 +178,23 @@
 			ref="photoInputRef"
 			class="file-input"
 			type="file"
+			accept="*/*"
+			@change="handlePhotoSelected"
+		>
+		<input
+			ref="photoCameraInputRef"
+			class="file-input"
+			type="file"
 			accept="image/*"
+			capture="environment"
+			@change="handlePhotoSelected"
+		>
+		<input
+			ref="videoInputRef"
+			class="file-input"
+			type="file"
+			accept="video/*"
+			capture="environment"
 			@change="handlePhotoSelected"
 		>
 		<customer-selector
@@ -213,7 +231,8 @@ import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
 import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
+import type { MediaSelectorAddAction } from "@/components/mediaSelector/types";
 import TagSelector from "@/components/TagSelector.vue";
 import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
@@ -226,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"
@@ -442,6 +462,40 @@ function openPhotoPicker(target: CustomerAttachmentType): void {
 	photoInputRef.value?.click();
 }
 
+function capturePhoto(): void {
+	if (isCustomerBound.value) {
+		return;
+	}
+	photoPickerTarget.value = "PHOTO";
+	photoCameraInputRef.value?.click();
+}
+
+function capturePointCard(): void {
+	if (isCustomerBound.value) {
+		return;
+	}
+	photoPickerTarget.value = "POINT_CARD";
+	photoCameraInputRef.value?.click();
+}
+
+function captureVideo(): void {
+	if (isCustomerBound.value) {
+		return;
+	}
+	photoPickerTarget.value = "OTHER";
+	videoInputRef.value?.click();
+}
+
+function handlePhotoAction(action: MediaSelectorAddAction): void {
+	if (action.emit === "add-point-card") {
+		capturePointCard();
+		return;
+	}
+	if (action.emit === "add-other") {
+		openPhotoPicker("OTHER");
+	}
+}
+
 watch(isCustomerBound, (value) => {
 	navBarStore.setRightDisabled(value);
 	if (!value) {
@@ -485,6 +539,7 @@ async function loadDetail() {
 			.map(item => ({
 				attachment: item,
 				attachType: normalizeAttachmentType(item.attachType),
+				mimeType: item.mimeType,
 				previewUrl: getAttachmentReadURL(item.id || ""),
 				url: getAttachmentReadURL(item.id || "", 90)
 			}));
@@ -531,24 +586,14 @@ watch(() => formData.birthdate, (value) => {
 // ---------- 照片 ----------
 
 const photoInputRef = ref<HTMLInputElement>();
+const photoCameraInputRef = ref<HTMLInputElement>();
+const videoInputRef = ref<HTMLInputElement>();
 const photoAddActions = [
-	{
-		icon: "user-avatar",
-		text: "拍照片",
-		emit: "add-photo",
-		theme: "primary"
-	},
 	{
 		icon: "cardmembership",
 		text: "拍积分卡",
 		emit: "add-point-card",
 		theme: "primary"
-	},
-	{
-		icon: "file-attachment",
-		text: "其他文件",
-		emit: "add-other",
-		theme: "default"
 	}
 ] as const;
 const photoPickerTarget = ref<CustomerAttachmentType>("PHOTO");
@@ -595,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);
@@ -602,6 +648,7 @@ async function handlePhotoSelected(event: Event): Promise<void> {
 		if (tempFile?.id) {
 			photoItemList.value.push({
 				attachType: photoPickerTarget.value,
+				mimeType: file.type,
 				tempFileId: tempFile.id,
 				url: AttachmentAPI.getTempReadURL(tempFile.id)
 			});

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"
@@ -175,7 +175,7 @@ defineOptions({
 	name: "CustomerList"
 });
 
-type DateFilterType = "today" | "yesterday" | "lastWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 
 const router = useRouter();
 const userStore = useUserStore();
@@ -201,7 +201,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "全部", value: "all" },
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "上个月", value: "lastMonth" },
 	{ label: "自定义范围", value: "custom" }
@@ -506,7 +506,7 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 .customer-list {
 	padding: var(--app-nav-height) 0 1rem 0;
 
-	.filter {
+	.filters {
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
@@ -514,17 +514,14 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #f5f5f8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.search {
 			--td-button-border-radius: .75rem;
 			--td-input-vertical-padding: .25rem 1rem;
 
-			border: 1px solid rgba(148, 163, 184, .28);
+			border: 1px solid var(--td-component-border);
 			z-index: 2;
-			background: #f8fbff;
 			padding-right: .3rem;
 			border-radius: 1rem;
 		}
@@ -533,11 +530,10 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 			--td-spacer-1: 6px;
 
 			width: 100%;
+			border: 1px solid var(--td-component-border);
 			overflow: hidden;
 			margin-top: -1rem;
 			padding-top: .8rem;
-			background: #fff;
-			border: 1px solid rgba(148, 163, 184, .18);
 			border-radius: 0 0 1rem 1rem;
 		}
 	}
@@ -565,7 +561,6 @@ function buildCreatedAtRange(): [number | undefined, number | undefined] {
 		gap: 1rem;
 		display: flex;
 		flex-direction: column;
-		padding: 1rem 0;
 
 		.summary {
 			overflow: hidden;

src/pages/event/EventRecordDetail.vue

@@ -65,7 +65,7 @@
 			核销登记记录
 		</t-button>
 		<div v-if="record" class="photo-wrapper" v-entrance-transition="350">
-			<photo-scroller
+			<media-selector
 				:model-value="recordPhotoList"
 				:photo-items="recordPhotoItemList"
 				:show-viewer-actions="canUpdateRecord"
@@ -105,7 +105,7 @@ import CardContainer from "@/components/CardContainer.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import EventOptionSelector from "@/components/EventOptionSelector.vue";
 import EventRecordVerifyDialog from "@/components/EventRecordVerifyDialog.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { EventRecord } from "@/types/EventRecord";
 import type { PhotoItem } from "@/types/Photo";

src/pages/event/EventRecordEdit.vue

@@ -110,14 +110,16 @@
 			</t-form-item>
 
 			<div class="photo-part">
-				<photo-scroller
+				<media-selector
 					title="登记事件照片"
 					:required="selectedRequiredPhotoEventList.length > 0"
 					v-model="photoList"
 					v-model:photo-items="photoItemList"
 					:edit-mode="true"
 					:loading="isPhotoUploading"
-					@add="capturePhoto"
+					@add="selectPhotoFile"
+					@capture-photo="capturePhoto"
+					@capture-video="captureVideo"
 				/>
 			</div>
 		</t-form>
@@ -170,10 +172,26 @@
 			ref="recordPhotoInputRef"
 			class="file-input"
 			type="file"
-			accept="image/*"
+			accept="*/*"
 			multiple
 			@change="handleRecordPhotoSelected"
 		>
+		<input
+			ref="recordPhotoCameraInputRef"
+			class="file-input"
+			type="file"
+			accept="image/*"
+			capture="environment"
+			@change="handleRecordPhotoSelected"
+		>
+		<input
+			ref="videoInputRef"
+			class="file-input"
+			type="file"
+			accept="video/*"
+			capture="environment"
+			@change="handleRecordPhotoSelected"
+		>
 	</div>
 	<t-popup v-model="registeredAtPickerVisible" placement="bottom">
 		<t-date-time-picker
@@ -201,7 +219,7 @@ import CustomerList from "@/components/CustomerList.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import EventOptionSelector from "@/components/EventOptionSelector.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import EventSelector from "@/components/EventSelector.vue";
 import { useEventRecordPhoto } from "@/pages/event/component/useEventRecordPhoto";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -476,10 +494,14 @@ function validateNumberValueList(): boolean {
 
 const {
 	recordPhotoInputRef,
+	recordPhotoCameraInputRef,
+	videoInputRef,
 	photoItemList,
 	isPhotoUploading,
 	photoList,
 	capturePhoto,
+	selectPhotoFile,
+	captureVideo,
 	handleRecordPhotoSelected,
 	setExistingPhotoList,
 	buildTempFileIdList,

src/pages/event/EventRecordList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.eventRecord.read" class="registration-record-list">
-		<div class="search-bar">
+		<div class="filters glass">
 			<div class="search-date">
 				<t-input
 					v-model.trim="keyword"
@@ -153,7 +153,7 @@ import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/util
 import { permissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message.ts";
 
-type DateFilterType = "today" | "yesterday" | "lastWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 type VerificationFilter = "ALL" | VerificationStatus;
 
 defineOptions({
@@ -168,7 +168,7 @@ const userStore = useUserStore();
 const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "上个月", value: "lastMonth" },
 	{ label: "全部", value: "all" },
@@ -684,12 +684,11 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .registration-record-list {
-	gap: 1rem;
 	display: flex;
-	padding: calc(var(--app-nav-height)) 0 6rem 0;
+	padding: var(--app-nav-height) 0 6rem 0;
 	flex-direction: column;
 
-	.search-bar {
+	.filters {
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
@@ -697,8 +696,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.search-date {
@@ -709,9 +706,8 @@ onUnmounted(() => {
 				--td-input-vertical-padding: .25rem 1rem;
 
 				flex: 1;
-				border: 1px solid rgba(148, 163, 184, .28);
+				border: 1px solid var(--td-component-border);
 				z-index: 2;
-				background: #f8fbff;
 				padding-right: .3rem;
 				border-radius: 1rem;
 			}
@@ -720,7 +716,7 @@ onUnmounted(() => {
 				--td-spacer: 4px;
 				--td-spacer-1: 6px;
 
-				border: 1px solid rgba(148, 163, 184, .18);
+				border: 1px solid var(--td-component-border);
 				z-index: 1;
 				margin-left: -2.5rem;
 				padding-left: 3rem;
@@ -737,11 +733,10 @@ onUnmounted(() => {
 			--td-spacer-1: 6px;
 
 			width: 100%;
+			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
 			padding-top: .8rem;
-			background: #fff;
-			border: 1px solid rgba(148, 163, 184, .18);
 			border-top: none;
 			border-radius: 0 0 1rem 1rem;
 

src/pages/event/EventRecordRank.vue

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

src/pages/event/component/useEventRecordPhoto.ts

@@ -3,9 +3,12 @@ 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>();
+	const recordPhotoCameraInputRef = ref<HTMLInputElement>();
+	const videoInputRef = ref<HTMLInputElement>();
 	const photoItemList = ref<PhotoItem[]>([]);
 	const isPhotoUploading = ref(false);
 	const photoList = computed<string[]>({
@@ -19,24 +22,34 @@ export function useEventRecordPhoto() {
 	});
 
 	function capturePhoto(): void {
+		recordPhotoCameraInputRef.value?.click();
+	}
+
+	function selectPhotoFile(): void {
 		recordPhotoInputRef.value?.click();
 	}
 
+	function captureVideo(): void {
+		videoInputRef.value?.click();
+	}
+
 	async function handleRecordPhotoSelected(event: Event): Promise<void> {
 		const input = event.target as HTMLInputElement;
 		const fileList = Array.from(input.files || []);
 		if (!fileList.length) {
 			return;
 		}
+		saveCapturedFilesFromInput(input, fileList);
 		isPhotoUploading.value = true;
 		try {
 			const compressedFileList = await compressUploadImageList(fileList);
 			const tempFileList = await AttachmentAPI.upload(compressedFileList);
-			for (const item of tempFileList) {
+			for (const [index, item] of tempFileList.entries()) {
 				if (!item.id) {
 					continue;
 				}
 				photoItemList.value.push({
+					mimeType: fileList[index]?.type,
 					tempFileId: item.id,
 					url: AttachmentAPI.getTempReadURL(item.id)
 				});
@@ -53,6 +66,7 @@ export function useEventRecordPhoto() {
 			.filter(item => !!item.id)
 			.map(item => ({
 				attachment: item,
+				mimeType: item.mimeType,
 				previewUrl: getAttachmentReadURL(item.id || ""),
 				url: getAttachmentReadURL(item.id || "", 90)
 			}));
@@ -80,10 +94,14 @@ export function useEventRecordPhoto() {
 
 	return {
 		recordPhotoInputRef,
+		recordPhotoCameraInputRef,
+		videoInputRef,
 		photoItemList,
 		isPhotoUploading,
 		photoList,
 		capturePhoto,
+		selectPhotoFile,
+		captureVideo,
 		handleRecordPhotoSelected,
 		setExistingPhotoList,
 		buildTempFileIdList,

src/pages/followUpReminder/FollowUpReminderDetail.vue

@@ -0,0 +1,377 @@
+<template>
+	<div v-can="permissionCodes.customerFollowUpReminder.read" class="follow-up-reminder-detail">
+		<t-empty v-if="!detail" :description="isLoading ? '正在加载跟进提醒' : '跟进提醒不存在'" />
+		<template v-else>
+			<customer-profile-card
+				class="customer"
+				:customer="detail.customer"
+				v-entrance-transition
+				@click="toCustomer"
+			/>
+			<t-cell-group title="提醒信息" theme="card" v-entrance-transition="70">
+				<t-cell title="业务状态">
+					<template #note>
+						<t-tag size="small" :theme="getStatusTheme(detail.status)" :content="getStatusText(detail.status)" />
+					</template>
+				</t-cell>
+				<t-cell title="负责人" :note="getResponsibleName(detail)" />
+				<t-cell title="提醒时间" :note="detail.remindAt ? Time.toDateTime(detail.remindAt) : '-'" />
+				<t-cell title="创建时间">
+					<template #note>
+						<pass-time-label :timestamp="detail.createdAt" underline />
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<t-cell-group title="跟进内容" theme="card" v-entrance-transition="140">
+				<div class="content bg-white" v-text="detail.content || '未填写跟进内容'" />
+				<div class="media-wrap bg-white">
+					<media-selector
+						:model-value="attachmentUrlList"
+						:photo-items="attachmentItemList"
+						:show-add="false"
+						:show-remove="false"
+						:show-viewer-actions="false"
+						empty-text="暂无附件"
+						title="附件"
+					/>
+				</div>
+			</t-cell-group>
+			<t-cell-group title="通知方式" theme="card" v-entrance-transition="210">
+				<t-cell v-if="hasChannel('INTERNAL')" title="站内通知">
+					<template #note>
+						<t-tag
+							size="small"
+							variant="outline"
+							:theme="internalNotifyStatus ? getNotifyStatusTheme(internalNotifyStatus.status) : 'primary'"
+							:content="internalNotifyStatus ? getNotifyStatusText(internalNotifyStatus.status) : '已配置'"
+						/>
+					</template>
+				</t-cell>
+				<t-cell v-if="hasChannel('SMS')" title="短信通知">
+					<template #note>
+						<t-tag
+							size="small"
+							theme="primary"
+							variant="outline"
+							:content="detail.smsNotifyDetailId ? '已进入当天批次' : '等待当天 08:00 批次'"
+						/>
+					</template>
+				</t-cell>
+				<t-cell v-if="!detail.notifyChannelList?.length" title="通知方式" note="不发送通知" />
+				<div class="tips gray bg-white" v-text="'站内通知在提醒时间后生效；短信按提醒日期在 08:00 聚合发送。通知状态仅作辅助展示，不代表跟进提醒业务状态。'" />
+			</t-cell-group>
+			<div class="actions" v-entrance-transition="350">
+				<t-button
+					v-if="canComplete && detail.status === 'PENDING'"
+					theme="primary"
+					:disabled="isOperating"
+					:loading="isCompleting"
+					@click="confirmComplete"
+				>完成跟进</t-button>
+				<t-button
+					v-if="canDelete"
+					theme="danger"
+					:loading="isDeleting"
+					:disabled="isOperating"
+					@click="confirmDelete"
+				>删除提醒</t-button>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { DialogPlugin } from "tdesign-mobile-vue";
+import { NotifyAPI, type NotifyDetail, useUserStore } from "timi-web-api";
+import { PassTimeLabel, Time } from "timi-web";
+import { Message } from "@/utils/message";
+import { getErrorMessage } from "@/utils/error";
+import FollowUpReminderAPI from "@/api/FollowUpReminderAPI";
+import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { FollowUpReminder, FollowUpReminderNotifyChannel, FollowUpReminderStatus } from "@/types/FollowUpReminder";
+import type { PhotoItem } from "@/types/Photo";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { corePermissionCodes, permissionCodes } from "@/utils/permission";
+
+type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
+
+defineOptions({
+	name: "FollowUpReminderDetail"
+});
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+
+const detail = ref<FollowUpReminder>();
+const isLoading = ref(false);
+const isCompleting = ref(false);
+const isDeleting = ref(false);
+const internalNotifyStatus = ref<NotifyDetail>();
+let loadToken = 0;
+
+const canUpdate = computed(() => detail.value?.status === "PENDING"
+	&& userStore.hasPermissions(permissionCodes.customerFollowUpReminder.update));
+const canComplete = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.complete));
+const canDelete = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.delete));
+const isOperating = computed(() => isCompleting.value || isDeleting.value);
+const attachmentItemList = computed<PhotoItem[]>(() => (detail.value?.attachmentList || [])
+	.filter(item => !!item.id)
+	.map(item => ({
+		attachment: item,
+		attachType: item.attachType || "PHOTO",
+		mimeType: item.mimeType,
+		previewUrl: getAttachmentReadURL(item.id || ""),
+		url: getAttachmentReadURL(item.id || "", 90)
+	})));
+const attachmentUrlList = computed(() => attachmentItemList.value.map(item => item.url));
+
+function hasChannel(channel: FollowUpReminderNotifyChannel): boolean {
+	const item = detail.value;
+	if (!item) {
+		return false;
+	}
+	return item.notifyChannelList?.includes(channel)
+		|| (channel === "INTERNAL" && item.internalNotifyEnabled === true)
+		|| (channel === "SMS" && item.smsNotifyEnabled === true)
+		|| false;
+}
+
+function getResponsibleName(item: FollowUpReminder): string {
+	return item.responsibleUser?.nick || item.responsibleUser?.name || item.responsibleUserId || "未命名负责人";
+}
+
+function getStatusText(status?: FollowUpReminderStatus): string {
+	return status === "COMPLETED" ? "已完成" : "待完成";
+}
+
+function getStatusTheme(status?: FollowUpReminderStatus): "success" | "warning" {
+	return status === "COMPLETED" ? "success" : "warning";
+}
+
+function getNotifyStatusText(status?: NotifyDetail["status"]): string {
+	const map: Record<NonNullable<NotifyDetail["status"]>, string> = {
+		WAITING: "等待生效",
+		REMINDED: "已生效",
+		TIMEOUT: "已超时",
+		CANCEL: "已取消",
+		FAIL: "发送失败"
+	};
+	return status ? map[status] : "状态未知";
+}
+
+function getNotifyStatusTheme(status?: NotifyDetail["status"]): NotifyTagTheme {
+	if (status === "REMINDED") {
+		return "success";
+	}
+	if (status === "FAIL" || status === "TIMEOUT") {
+		return "danger";
+	}
+	if (status === "WAITING") {
+		return "warning";
+	}
+	return "primary";
+}
+
+async function loadDetail(): Promise<void> {
+	const token = loadToken + 1;
+	loadToken = token;
+	detail.value = undefined;
+	internalNotifyStatus.value = undefined;
+	navBarStore.clearRight();
+	const id = String(route.params.id || "");
+	if (!id) {
+		return;
+	}
+
+	isLoading.value = true;
+	try {
+		const result = await FollowUpReminderAPI.detail(id);
+		if (token !== loadToken) {
+			return;
+		}
+		detail.value = result;
+		setEditAction();
+		await loadInternalNotifyStatus(result, token);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "跟进提醒详情加载失败"));
+	} finally {
+		if (token === loadToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+function setEditAction(): void {
+	if (canUpdate.value) {
+		navBarStore.setRightText("编辑", "var(--td-brand-color)", toEdit);
+	}
+}
+
+async function loadInternalNotifyStatus(item: FollowUpReminder, token: number): Promise<void> {
+	if (!item.internalNotifyDetailId || !userStore.hasPermissions(corePermissionCodes.notify.read)) {
+		return;
+	}
+	try {
+		const result = await NotifyAPI.internalDetail(item.internalNotifyDetailId);
+		if (token === loadToken) {
+			internalNotifyStatus.value = result;
+		}
+	} catch {
+		// 站内通知详情只对当前接收用户开放，无法读取时不影响提醒详情。
+	}
+}
+
+async function toCustomer(): Promise<void> {
+	if (detail.value?.customerId) {
+		await router.push({
+			name: "CustomerDetail",
+			params: { id: detail.value.customerId },
+			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 toEdit(): Promise<void> {
+	if (detail.value?.id && canUpdate.value) {
+		await router.push({ name: "CustomerFollowUpReminderEdit", params: { id: detail.value.id } });
+	}
+}
+
+function confirmComplete(): void {
+	if (!detail.value?.id || !canComplete.value || detail.value.status !== "PENDING" || isOperating.value) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "完成跟进提醒",
+		content: "完成后不能重新打开，确定完成此跟进提醒吗？",
+		cancelBtn: "取消",
+		confirmBtn: "完成",
+		onCancel() {
+			dialog.destroy();
+		},
+		onConfirm: async () => {
+			dialog.destroy();
+			await complete(detail.value?.id || "");
+		}
+	});
+}
+
+async function complete(id: string): Promise<void> {
+	isCompleting.value = true;
+	try {
+		await FollowUpReminderAPI.complete(id);
+		Message.success("跟进提醒已完成");
+		await loadDetail();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "跟进提醒完成失败"));
+	} finally {
+		isCompleting.value = false;
+	}
+}
+
+function confirmDelete(): void {
+	if (!detail.value?.id || !canDelete.value || isOperating.value) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "删除跟进提醒",
+		content: "删除后列表中将不再显示，确定删除这条跟进提醒吗？",
+		cancelBtn: "取消",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		onConfirm: async () => {
+			dialog.destroy();
+			await remove(detail.value?.id || "");
+		}
+	});
+}
+
+async function remove(id: string): Promise<void> {
+	isDeleting.value = true;
+	navBarStore.clearRight();
+	try {
+		await FollowUpReminderAPI.remove(id);
+		Message.success("跟进提醒已删除");
+		await router.replace({ name: "CustomerFollowUpReminderList" });
+	} catch (error) {
+		Message.error(getErrorMessage(error, "跟进提醒删除失败"));
+		setEditAction();
+	} finally {
+		isDeleting.value = false;
+	}
+}
+
+watch(() => route.params.id, async () => {
+	await loadDetail();
+}, { immediate: true });
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.follow-up-reminder-detail {
+	gap: 1rem;
+	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
+	display: flex;
+	flex-direction: column;
+
+	.customer {
+		margin: 0 1rem;
+	}
+
+	.content {
+		padding: 1rem;
+		line-height: 1.7;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	.media-wrap {
+		padding: 1rem;
+	}
+
+	.tips {
+		padding: 1rem;
+		font-size: .875rem;
+	}
+
+	.actions {
+		--td-button-border-radius: 1rem;
+
+		gap: .5rem;
+		padding: 0 1rem;
+		display: flex;
+
+		.t-button {
+			flex: 1;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.follow-up-reminder-detail {
+		.content,
+		.attachment-wrapper {
+			background: rgba(30, 41, 59, .9);
+			border-color: rgba(148, 163, 184, .16);
+		}
+	}
+}
+</style>

src/pages/followUpReminder/FollowUpReminderEdit.vue

@@ -0,0 +1,645 @@
+<template>
+	<div v-can="pageAccess" class="follow-up-reminder-edit">
+		<t-form class="form" label-width="6rem">
+			<t-form-item label="客户" content-align="right" required-mark>
+				<div class="customer-picker">
+					<span v-if="!selectedCustomer" class="picker-text" v-text="'请选择客户'" />
+					<t-button
+						theme="primary"
+						size="extra-small"
+						content="选择"
+						@click="customerSelectorVisible = true"
+					/>
+				</div>
+			</t-form-item>
+			<t-form-item v-if="selectedCustomer" label-width="0">
+				<customer-profile-card class="customer-profile" :customer="selectedCustomer" />
+			</t-form-item>
+			<t-form-item
+				label="负责人"
+				content-align="right"
+				required-mark
+				arrow
+				@click="responsibleSelectorVisible = true"
+			>
+				<span v-text="selectedResponsibleName" />
+			</t-form-item>
+			<t-form-item label="跟进内容" required-mark>
+				<t-textarea
+					v-model="formModel.content"
+					class="textarea"
+					:autosize="{ minRows: 1, maxRows: 8 }"
+					maxlength="1000"
+					borderless
+					placeholder="请输入跟进内容"
+				/>
+			</t-form-item>
+			<t-form-item label-width="0">
+				<media-selector
+					:model-value="photoUrlList"
+					v-model:photo-items="photoItems"
+					:upload="uploadReminderPhotoList"
+					:edit-mode="true"
+					:loading="isSaving || isUploading"
+					add-text="选择照片"
+					:show-type-label="false"
+					title="附件照片"
+				/>
+			</t-form-item>
+		</t-form>
+		<t-form class="form">
+			<t-form-item class="remind-at" label="提醒时间" content-align="right" required-mark>
+				<span class="picker-text" v-text="formModel.remindAtText || '请选择提醒时间'" />
+			</t-form-item>
+			<t-form-item label-width="0" content-align="right">
+				<t-radio-group
+					v-model="selectedRemindAtPreset"
+					@change="handleRemindAtPresetChange"
+				>
+					<t-radio :block="false" borderless value="tomorrow">明天</t-radio>
+					<t-radio :block="false" borderless value="afterTomorrow">后天</t-radio>
+					<t-radio :block="false" borderless value="custom">指定时间</t-radio>
+				</t-radio-group>
+			</t-form-item>
+			<t-form-item label="站内通知" content-align="right">
+				<t-switch
+					size="small"
+					:model-value="hasChannel('INTERNAL')"
+					borderless
+					@change="value => setChannel('INTERNAL', value === true)"
+				/>
+			</t-form-item>
+			<t-form-item label="短信通知" content-align="right">
+				<t-switch
+					size="small"
+					:model-value="hasChannel('SMS')"
+					:disabled="!canSelectSms"
+					borderless
+					@change="value => setChannel('SMS', value === true)"
+				/>
+			</t-form-item>
+		</t-form>
+		<div class="tips red"
+		     v-text="'提醒时间精确到分钟，不能早于当前时间。短信会在提醒日期 08:00 聚合发送，不会在你选择的精确时间发送。'" />
+		<customer-selector
+			v-model="formModel.customerId"
+			v-model:visible="customerSelectorVisible"
+			:store-id="customerPickerStoreId"
+			@change="handleCustomerChange"
+		/>
+		<managed-user-selector
+			v-model="formModel.responsibleUserId"
+			v-model:visible="responsibleSelectorVisible"
+			:store-id="responsiblePickerStoreId"
+			@change="handleResponsibleChange"
+		/>
+		<t-popup v-model="remindAtPickerVisible" placement="bottom">
+			<t-date-time-picker
+				v-if="remindAtPickerVisible"
+				v-model="remindAtDraftText"
+				:start="minimumDateTimeText"
+				format="YYYY-MM-DD HH:mm"
+				:mode="['date', 'minute']"
+				title="提醒时间"
+				@cancel="cancelRemindAtPicker"
+				@confirm="confirmRemindAt"
+			/>
+		</t-popup>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import { AttachmentAPI, type User, useUserStore } from "timi-web-api";
+import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
+import { Message } from "@/utils/message";
+import { getErrorMessage } from "@/utils/error";
+import FollowUpReminderAPI from "@/api/FollowUpReminderAPI";
+import CustomerAPI from "@/api/CustomerAPI";
+import CustomerSelector from "@/components/CustomerSelector.vue";
+import ManagedUserSelector from "@/pages/followUpReminder/component/ManagedUserSelector.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { Customer } from "@/types/Customer";
+import type { ManagedUser } from "@/types/ManagedUser";
+import type {
+	FollowUpReminder,
+	FollowUpReminderAttachment,
+	FollowUpReminderNotifyChannel,
+	FollowUpReminderPayload
+} from "@/types/FollowUpReminder";
+import type { PhotoItem } from "@/types/Photo";
+import { compressUploadImageList } from "@/utils/imageCompression";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { parseDateTime } from "@/utils/date";
+import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+
+defineOptions({
+	name: "FollowUpReminderEdit"
+});
+
+const route = useRoute();
+const router = useRouter();
+const userStore = useUserStore();
+const currentStoreStore = useCurrentStoreStore();
+const navBarStore = useNavBarStore();
+
+const routeId = computed(() => String(route.params.id || ""));
+const isEditMode = computed(() => !!routeId.value);
+const pageAccess = computed(() => isEditMode.value
+	? permissionCodes.customerFollowUpReminder.update
+	: permissionCodes.customerFollowUpReminder.create);
+
+// ---------- 表单 ----------
+
+const isSaving = ref(false);
+const formModel = reactive({
+	id: "",
+	storeId: "",
+	customerId: "",
+	responsibleUserId: "",
+	content: "",
+	remindAtText: "",
+	notifyChannelList: [] as FollowUpReminderNotifyChannel[]
+});
+const selectedCustomer = ref<Customer>();
+const selectedResponsible = ref<ManagedUser>();
+const photoItems = ref<PhotoItem[]>([]);
+const photoUrlList = computed(() => photoItems.value.map(item => item.previewUrl || item.url));
+const customerSelectorVisible = ref(false);
+const responsibleSelectorVisible = ref(false);
+const customerPickerStoreId = computed(() => formModel.storeId || currentStoreStore.currentStoreId);
+const responsiblePickerStoreId = computed(() => selectedCustomer.value?.storeId || customerPickerStoreId.value);
+const currentUserId = computed(() => userStore.loginUser.user?.id || userStore.loginUser.id || "");
+const selectedResponsibleName = computed(() => {
+	if (!selectedResponsible.value) {
+		return "请选择负责人";
+	}
+	if (selectedResponsible.value.userId === currentUserId.value) {
+		return "本人";
+	}
+	return getResponsibleName(selectedResponsible.value);
+});
+
+// ---------- 通知方式 ----------
+
+const hasSmsChannel = computed(() => hasChannel("SMS"));
+const isTodayReminder = computed(() => {
+	const remindAt = parseRemindAt();
+	if (!remindAt) {
+		return false;
+	}
+	return Time.formatDate(new Date(remindAt)) === Time.formatDate(new Date(Time.now()));
+});
+const isBeforeSmsCutoff = computed(() => {
+	const now = new Date(Time.now());
+	return now.getHours() < 8;
+});
+const canSelectSms = computed(() => isResponsiblePhoneValid(selectedResponsible.value)
+	&& (!isTodayReminder.value || isBeforeSmsCutoff.value));
+const smsRuleText = computed(() => {
+	if (!selectedResponsible.value) {
+		return "短信通知要求负责人有有效的已验证手机号。";
+	}
+	if (!isResponsiblePhoneValid(selectedResponsible.value)) {
+		return "当前负责人没有有效的已验证手机号，短信通知不可用。";
+	}
+	if (isTodayReminder.value && !isBeforeSmsCutoff.value) {
+		return "今天 08:00 后创建今天的提醒不能选择短信通知。";
+	}
+	return "短信将在提醒日期 08:00 聚合发送，允许与站内通知同时选择。";
+});
+
+function hasChannel(channel: FollowUpReminderNotifyChannel): boolean {
+	return formModel.notifyChannelList.includes(channel);
+}
+
+function setChannel(channel: FollowUpReminderNotifyChannel, checked: boolean): void {
+	if (channel === "SMS" && checked && !canSelectSms.value) {
+		Message.warning(smsRuleText.value);
+		return;
+	}
+	const channelSet = new Set(formModel.notifyChannelList);
+	if (checked) {
+		channelSet.add(channel);
+	} else {
+		channelSet.delete(channel);
+	}
+	formModel.notifyChannelList = Array.from(channelSet);
+}
+
+function isResponsiblePhoneValid(item?: ManagedUser): boolean {
+	const phone = item?.user?.phoneNo;
+	return Boolean(phone && item?.user?.phoneNoVerified && /^1\d{10}$/.test(phone));
+}
+
+function getResponsibleName(item: ManagedUser): string {
+	return item.user?.nick || item.user?.name || item.userId || "未命名负责人";
+}
+
+// ---------- 客户和负责人 ----------
+
+async function handleCustomerChange(customerId: string): Promise<void> {
+	formModel.customerId = customerId;
+	selectedCustomer.value = customerId ? await loadCustomer(customerId) : undefined;
+	formModel.storeId = selectedCustomer.value?.storeId || currentStoreStore.currentStoreId;
+	if (selectedResponsible.value && selectedResponsible.value.storeId !== formModel.storeId) {
+		formModel.responsibleUserId = "";
+		selectedResponsible.value = undefined;
+		setChannel("SMS", false);
+	}
+}
+
+function handleResponsibleChange(item: ManagedUser): void {
+	selectedResponsible.value = item;
+	formModel.responsibleUserId = item.userId || "";
+	if (isResponsiblePhoneValid(item) && canSelectSms.value) {
+		setChannel("SMS", true);
+	}
+}
+
+function selectCurrentUser(): void {
+	if (!currentUserId.value) {
+		Message.warning("当前登录用户信息不可用");
+		return;
+	}
+	handleResponsibleChange({
+		storeId: responsiblePickerStoreId.value,
+		userId: currentUserId.value,
+		enabled: true,
+		user: userStore.loginUser.user as Partial<User> | undefined
+	});
+}
+
+async function loadCustomer(customerId: string): Promise<Customer | undefined> {
+	try {
+		return await CustomerAPI.detail(customerId);
+	} catch {
+		Message.warning("客户详情加载失败");
+		return undefined;
+	}
+}
+
+// ---------- 时间 ----------
+
+type RemindAtPreset = "tomorrow" | "afterTomorrow" | "custom";
+
+const selectedRemindAtPreset = ref<RemindAtPreset>("tomorrow");
+const remindAtPickerVisible = ref(false);
+const remindAtDraftText = ref("");
+const minimumDateTimeText = computed(() => {
+	const date = new Date(Time.now());
+	date.setSeconds(0, 0);
+	date.setMinutes(date.getMinutes() + 1);
+	return Time.formatDateTime(date);
+});
+
+function getQuickRemindAt(dayOffset: number): string {
+	const date = new Date(Time.now());
+	date.setSeconds(0, 0);
+	date.setDate(date.getDate() + dayOffset);
+	return Time.formatDateTime(date);
+}
+
+function getQuickRemindDate(dayOffset: number): string {
+	const date = new Date(Time.now());
+	date.setDate(date.getDate() + dayOffset);
+	return Time.formatDate(date);
+}
+
+function getRemindAtPreset(value: string): RemindAtPreset {
+	const remindAt = Time.toTimestamp(parseDateTime(value, false));
+	if (!remindAt) {
+		return "tomorrow";
+	}
+	const remindDate = Time.formatDate(new Date(remindAt));
+	if (remindDate === getQuickRemindDate(1)) {
+		return "tomorrow";
+	}
+	if (remindDate === getQuickRemindDate(2)) {
+		return "afterTomorrow";
+	}
+	return "custom";
+}
+
+function selectRemindAtPreset(preset: RemindAtPreset): void {
+	selectedRemindAtPreset.value = preset;
+	if (preset === "custom") {
+		openRemindAtPicker();
+		return;
+	}
+	formModel.remindAtText = getQuickRemindAt(preset === "tomorrow" ? 1 : 2);
+}
+
+function handleRemindAtPresetChange(value: string | number | boolean): void {
+	if (value !== "tomorrow" && value !== "afterTomorrow" && value !== "custom") {
+		return;
+	}
+	selectRemindAtPreset(value);
+}
+
+function openRemindAtPicker(): void {
+	remindAtDraftText.value = formModel.remindAtText || minimumDateTimeText.value;
+	remindAtPickerVisible.value = true;
+}
+
+function cancelRemindAtPicker(): void {
+	remindAtPickerVisible.value = false;
+	selectedRemindAtPreset.value = getRemindAtPreset(formModel.remindAtText);
+}
+
+function confirmRemindAt(value?: string | number): void {
+	formModel.remindAtText = String(value || remindAtDraftText.value);
+	selectedRemindAtPreset.value = "custom";
+	remindAtPickerVisible.value = false;
+}
+
+function parseRemindAt(): number | undefined {
+	if (!formModel.remindAtText) {
+		return undefined;
+	}
+	return Time.toTimestamp(parseDateTime(formModel.remindAtText, false));
+}
+
+// ---------- 附件 ----------
+
+const isUploading = ref(false);
+
+async function uploadReminderPhotoList(fileList: File[]): Promise<PhotoItem[]> {
+	isUploading.value = true;
+	try {
+		const tempFileList = await AttachmentAPI.upload(await compressUploadImageList(fileList));
+		return tempFileList.flatMap((item, index) => {
+			if (!item.id) {
+				return [];
+			}
+			return [
+				{
+					attachment: {
+						tempFileId: item.id,
+						mimeType: fileList[index]?.type,
+						name: fileList[index]?.name,
+						title: fileList[index] ? getFileTitle(fileList[index].name) : undefined
+					},
+					tempFileId: item.id,
+					attachType: "PHOTO",
+					mimeType: fileList[index]?.type,
+					url: AttachmentAPI.getTempReadURL(item.id || "")
+				}
+			];
+		});
+	} catch (error) {
+		Message.error(getErrorMessage(error, "附件上传失败"));
+		return [];
+	} finally {
+		isUploading.value = false;
+	}
+}
+
+function getFileTitle(name: string): string {
+	return name.replace(/\.[^.]+$/, "");
+}
+
+function getAttachmentURL(item: FollowUpReminderAttachment): string {
+	if (item.id) {
+		return getAttachmentReadURL(item.id);
+	}
+	if (item.tempFileId) {
+		return AttachmentAPI.getTempReadURL(item.tempFileId);
+	}
+	return "";
+}
+
+function toPhotoItems(items: readonly FollowUpReminderAttachment[]): PhotoItem[] {
+	const result: PhotoItem[] = [];
+	for (const item of items) {
+		const url = getAttachmentURL(item);
+		if (!url) {
+			continue;
+		}
+		result.push({
+			attachment: item,
+			tempFileId: item.tempFileId,
+			attachType: item.attachType || "PHOTO",
+			url
+		});
+	}
+	return result;
+}
+
+function toAttachmentList(items: readonly PhotoItem[]): FollowUpReminderAttachment[] {
+	return items.map(item => ({
+		...(item.attachment || {}),
+		tempFileId: item.tempFileId || item.attachment?.tempFileId,
+		attachType: item.attachType || item.attachment?.attachType || "PHOTO"
+	})).filter(item => !!item.id || !!item.tempFileId);
+}
+
+// ---------- 加载和保存 ----------
+
+async function loadStoreScope(): Promise<void> {
+	if (userStore.hasRoles(gaoRoleCodes.globalManager)) {
+		await currentStoreStore.loadStoreList();
+		formModel.storeId = currentStoreStore.currentStoreId;
+		return;
+	}
+	const store = await currentStoreStore.loadLoginStore();
+	formModel.storeId = store?.id || "";
+}
+
+async function loadForm(): Promise<void> {
+	await loadStoreScope();
+	if (!routeId.value) {
+		formModel.notifyChannelList = ["INTERNAL"];
+		const queryCustomerId = String(route.query.customerId || "");
+		if (queryCustomerId) {
+			await handleCustomerChange(queryCustomerId);
+		}
+		selectCurrentUser();
+		formModel.remindAtText = getQuickRemindAt(1);
+		selectedRemindAtPreset.value = "tomorrow";
+		return;
+	}
+
+	const current = await FollowUpReminderAPI.detail(routeId.value);
+	if (current.status !== "PENDING") {
+		Message.warning("已完成的跟进提醒不能修改");
+		await router.replace({ name: "CustomerFollowUpReminderDetail", params: { id: routeId.value } });
+		return;
+	}
+	applyReminder(current);
+}
+
+function applyReminder(current: FollowUpReminder): void {
+	Object.assign(formModel, {
+		id: current.id || "",
+		storeId: current.storeId || "",
+		customerId: current.customerId || "",
+		responsibleUserId: current.responsibleUserId || "",
+		content: current.content || "",
+		remindAtText: current.remindAt ? Time.formatDateTime(new Date(current.remindAt)) : minimumDateTimeText.value,
+		notifyChannelList: current.notifyChannelList || buildChannelList(current)
+	});
+	selectedCustomer.value = current.customer;
+	selectedResponsible.value = current.responsibleUserId
+		? {
+			storeId: current.storeId,
+			userId: current.responsibleUserId,
+			enabled: true,
+			user: current.responsibleUser as Partial<User> | undefined
+		}
+		: undefined;
+	photoItems.value = toPhotoItems(current.attachmentList || []);
+	selectedRemindAtPreset.value = getRemindAtPreset(formModel.remindAtText);
+}
+
+function buildChannelList(item: FollowUpReminder): FollowUpReminderNotifyChannel[] {
+	const result: FollowUpReminderNotifyChannel[] = [];
+	if (item.internalNotifyEnabled) {
+		result.push("INTERNAL");
+	}
+	if (item.smsNotifyEnabled) {
+		result.push("SMS");
+	}
+	return result;
+}
+
+function validateForm(remindAt?: number): boolean {
+	if (!formModel.customerId || !selectedCustomer.value?.id) {
+		Message.warning("请选择客户");
+		return false;
+	}
+	if (!formModel.responsibleUserId || !selectedResponsible.value?.userId) {
+		Message.warning("请选择负责人");
+		return false;
+	}
+	if (!formModel.content.trim()) {
+		Message.warning("请填写跟进内容");
+		return false;
+	}
+	if (!remindAt || !(0 === remindAt % 60000) || !(Time.now() < remindAt)) {
+		Message.warning("请选择晚于当前时间的分钟提醒时间");
+		return false;
+	}
+	if (hasSmsChannel.value && !canSelectSms.value) {
+		Message.warning(smsRuleText.value);
+		return false;
+	}
+	return true;
+}
+
+async function save(): Promise<void> {
+	if (isSaving.value || isUploading.value) {
+		return;
+	}
+	const remindAt = parseRemindAt();
+	if (!validateForm(remindAt)) {
+		return;
+	}
+
+	const payload: FollowUpReminderPayload = {
+		id: formModel.id || undefined,
+		storeId: formModel.storeId || undefined,
+		customerId: formModel.customerId,
+		responsibleUserId: formModel.responsibleUserId,
+		content: formModel.content.trim(),
+		remindAt: remindAt as number,
+		notifyChannelList: [...formModel.notifyChannelList],
+		attachmentList: toAttachmentList(photoItems.value)
+	};
+
+	isSaving.value = true;
+	try {
+		let id = formModel.id;
+		if (isEditMode.value) {
+			await FollowUpReminderAPI.update(payload);
+		} else {
+			id = await FollowUpReminderAPI.create(payload);
+		}
+		Message.success("跟进提醒已保存");
+		await router.replace({ name: "CustomerFollowUpReminderDetail", params: { id } });
+	} catch (error) {
+		Message.error(getErrorMessage(error, "跟进提醒保存失败"));
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+onMounted(async () => {
+	navBarStore.setRightText(isEditMode.value ? "保存" : "提交", "var(--td-brand-color)", save);
+	try {
+		await loadForm();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "跟进提醒加载失败"));
+	}
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.follow-up-reminder-edit {
+	gap: 1rem;
+	display: flex;
+	padding: calc(var(--app-nav-height) + 1rem) 0 4rem;
+	flex-direction: column;
+
+	.form {
+		border-radius: 1rem;
+
+		.customer-picker {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
+		}
+
+		.customer-profile {
+			flex: 1;
+		}
+
+		.responsible-picker {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
+		}
+
+		.textarea {
+			width: 100%;
+		}
+
+		.remind-at {
+
+			&:after {
+				display: none;
+			}
+		}
+
+		.warning {
+			color: var(--td-error-color);
+		}
+
+	}
+
+	.tips {
+		margin: 0 2rem;
+		font-size: .875rem;
+		line-height: 1.5;
+	}
+}
+
+:global(html.theme-dark) {
+	.follow-up-reminder-edit {
+		.form {
+			.picker-text {
+				color: #e2e8f0;
+			}
+
+			.textarea {
+				background: rgba(15, 23, 42, .72);
+				border-color: rgba(148, 163, 184, .16);
+			}
+		}
+	}
+}
+</style>

src/pages/followUpReminder/FollowUpReminderList.vue

@@ -0,0 +1,836 @@
+<template>
+	<div v-can="permissionCodes.customerFollowUpReminder.read" class="follow-up-reminder-list">
+		<div class="filters glass">
+			<t-input
+				v-model="customerSearchKeyword"
+				class="customer"
+				type="search"
+				borderless
+				placeholder="输入客户编码、姓名或拼音"
+				@enter="applyCustomerSearch"
+				@clear="clearCustomer"
+			>
+				<template #suffix-icon>
+					<t-button
+						size="extra-small"
+						theme="primary"
+						variant="outline"
+						content="选择客户"
+						@click.stop="customerSelectorVisible = true"
+					/>
+				</template>
+			</t-input>
+			<t-dropdown-menu ref="dropdownMenuRef" class="menus">
+				<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="[]"
+					@open="openResponsibleSelector"
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh
+			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="selectedResponsibleId" title="负责人" :note="selectedResponsibleName" />
+				</t-cell-group>
+				<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
+					<t-swipe-cell
+						v-for="(item, index) in pageResult.list"
+						:key="item.id || index"
+						class="item"
+					>
+						<t-cell
+							v-entrance-transition="index * 30"
+							class="cell"
+							arrow
+							@click="toDetail(item)"
+						>
+							<template #leftIcon>
+								<t-image
+									v-if="getCustomerPhotoURL(item.customer, 64)"
+									:src="getCustomerPhotoURL(item.customer, 64)"
+									:alt="getCustomerName(item)"
+									fit="cover"
+									class="avatar"
+								/>
+								<div v-else class="avatar fallback" v-text="getCustomerName(item).slice(0, 1)" />
+							</template>
+							<template #title>
+								<div class="title">
+									<div class="name-channel">
+										<span class="text-bold" v-text="getCustomerName(item)" />
+										<t-tag
+											v-if="item.notifyChannelList?.includes('INTERNAL')"
+											size="small"
+											theme="primary"
+											variant="outline"
+											content="站内信"
+										/>
+										<t-tag
+											v-if="item.notifyChannelList?.includes('SMS')"
+											size="small"
+											theme="warning"
+											variant="outline"
+											content="短信"
+										/>
+									</div>
+									<t-tag size="small" :theme="getStatusTheme(item.status)" :content="getStatusText(item.status)" />
+								</div>
+							</template>
+							<template #description>
+								<div class="description">
+									<div class="content clip-text" v-text="getContentSummary(item.content)" />
+									<div class="time-responsible">
+									<span
+										class="remind-time"
+										:class="getReminderTimeClass(item)"
+										v-text="getReminderTimeText(item.remindAt)"
+									/>
+										<span v-text="`负责人：${getResponsibleName(item)}`" />
+									</div>
+								</div>
+							</template>
+						</t-cell>
+						<template #right>
+							<div class="swipe-actions">
+								<t-button
+									v-if="canComplete && item.status === 'PENDING'"
+									class="complete swipe-cell-button"
+									variant="text"
+									:loading="operatingId === item.id && operatingType === 'complete'"
+									@click.stop="confirmComplete(item)"
+								>完成</t-button>
+								<t-button
+									v-if="canDelete"
+									class="delete swipe-cell-button"
+									variant="text"
+									:loading="operatingId === item.id && operatingType === 'delete'"
+									@click.stop="confirmDelete(item)"
+								>删除</t-button>
+							</div>
+						</template>
+					</t-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"
+			v-model:visible="customerSelectorVisible"
+			:initial-keyword="customerSearchKeyword"
+			:store-id="currentStoreStore.currentStoreId"
+			:enable-scan="true"
+			@change="handleCustomerSelected"
+		/>
+		<managed-user-selector
+			v-model="selectedResponsibleId"
+			v-model:visible="responsibleSelectorVisible"
+			:store-id="currentStoreStore.currentStoreId"
+			@change="handleResponsibleSelected"
+		/>
+		<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="提醒开始时间"
+				@cancel="startVisible = false"
+				@confirm="confirmStart"
+			/>
+		</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="提醒结束时间"
+				@cancel="endVisible = false"
+				@confirm="confirmEnd"
+			/>
+		</t-popup>
+	</div>
+	<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
+</template>
+
+<script setup lang="ts">
+import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
+import { Time } from "timi-web";
+import { type PageResult, useUserStore } from "timi-web-api";
+import { Message } from "@/utils/message";
+import { getErrorMessage } from "@/utils/error";
+import FollowUpReminderAPI from "@/api/FollowUpReminderAPI";
+import CustomerAPI from "@/api/CustomerAPI";
+import CustomerSelector from "@/components/CustomerSelector.vue";
+import ManagedUserSelector from "@/pages/followUpReminder/component/ManagedUserSelector.vue";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { Customer } from "@/types/Customer";
+import type { ManagedUser } from "@/types/ManagedUser";
+import type { FollowUpReminder, FollowUpReminderPage, FollowUpReminderStatus } from "@/types/FollowUpReminder";
+import { getCustomerPhotoURL } from "@/utils/customer";
+import { parseDateTime } from "@/utils/date";
+import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+
+type DateFilterType = "all" | "today" | "next7" | "custom";
+
+defineOptions({
+	name: "FollowUpReminderList"
+});
+
+const router = useRouter();
+const route = useRoute();
+const userStore = useUserStore();
+const currentStoreStore = useCurrentStoreStore();
+const navBarStore = useNavBarStore();
+
+const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.create));
+const canComplete = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.complete));
+const canDelete = computed(() => userStore.hasPermissions(permissionCodes.customerFollowUpReminder.delete));
+
+// ---------- 筛选 ----------
+
+const statusFilter = ref<"" | FollowUpReminderStatus>("");
+const statusOptions = [
+	{ label: "全部状态", value: "" },
+	{ label: "待完成", value: "PENDING" },
+	{ label: "已完成", value: "COMPLETED" }
+];
+const statusFilterLabel = computed(() => statusOptions.find(item => item.value === statusFilter.value)?.label || "全部状态");
+const dateFilterType = ref<DateFilterType>("all");
+const dateRange = ref<[string, string]>(["", ""]);
+const dateOptions = [
+	{ label: "全部时间", value: "all" },
+	{ label: "今天", value: "today" },
+	{ label: "未来 7 天", value: "next7" },
+	{ label: "自定义范围", value: "custom" }
+];
+const dateFilterLabel = computed(() => {
+	if (dateFilterType.value === "custom" && dateRange.value[0]) {
+		return `${dateRange.value[0]} 至 ${dateRange.value[1]}`;
+	}
+	return dateOptions.find(item => item.value === dateFilterType.value)?.label || "全部时间";
+});
+const selectedCustomerId = ref("");
+const selectedCustomer = ref<Customer>();
+const customerSearchKeyword = ref("");
+const customerSelectorVisible = ref(false);
+const selectedResponsibleId = ref("");
+const selectedResponsible = ref<ManagedUser>();
+const responsibleSelectorVisible = ref(false);
+const dropdownMenuRef = ref<{ collapseMenu: () => void }>();
+const selectedResponsibleName = computed(() => selectedResponsible.value
+	? getManagedUserName(selectedResponsible.value)
+	: "全部负责人");
+const startVisible = ref(false);
+const endVisible = ref(false);
+const startDraft = ref("");
+const endDraft = ref("");
+
+const actionList = computed(() => [{
+	action: toCreate,
+	icon: "add",
+	key: "create",
+	text: "新增跟进提醒",
+	theme: "primary" as const
+}]);
+
+async function handleStatusChange(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	statusFilter.value = String(value) as "" | FollowUpReminderStatus;
+	await refresh();
+}
+
+async function handleDateFilterChange(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	dateFilterType.value = String(value) as DateFilterType;
+	if (dateFilterType.value === "custom") {
+		openStartDate();
+		return;
+	}
+	dateRange.value = buildPresetDateRange(dateFilterType.value);
+	await refresh();
+}
+
+function openStartDate(): void {
+	startDraft.value = dateRange.value[0] || `${Time.formatDate(new Date())} 00:00`;
+	startVisible.value = true;
+}
+
+function openEndDate(): void {
+	endDraft.value = dateRange.value[1] || `${Time.formatDate(new Date())} 23:59`;
+	endVisible.value = true;
+}
+
+function confirmStart(value?: string | number): void {
+	startVisible.value = false;
+	dateRange.value = [String(value || startDraft.value), dateRange.value[1]];
+	openEndDate();
+}
+
+async function confirmEnd(value?: string | number): Promise<void> {
+	endVisible.value = false;
+	dateRange.value = [dateRange.value[0], String(value || endDraft.value)];
+	if (dateRange.value[1] < dateRange.value[0]) {
+		dateRange.value = [dateRange.value[1], dateRange.value[0]];
+	}
+	await refresh();
+}
+
+function buildPresetDateRange(type: DateFilterType): [string, string] {
+	const begin = new Date();
+	begin.setHours(0, 0, 0, 0);
+	const end = new Date(begin);
+	if (type === "next7") {
+		end.setDate(end.getDate() + 6);
+	}
+	end.setHours(23, 59, 0, 0);
+	return type === "all" ? ["", ""] : [Time.formatDateTime(begin), Time.formatDateTime(end)];
+}
+
+async function handleCustomerSelected(id: string): Promise<void> {
+	selectedCustomerId.value = id;
+	selectedCustomer.value = id ? await loadCustomer(id) : undefined;
+	customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
+	await refresh();
+}
+
+async function applyCustomerSearch(): Promise<void> {
+	const keyword = customerSearchKeyword.value.trim();
+	if (!keyword) {
+		await clearCustomer();
+		return;
+	}
+	if (keyword === getCustomerSearchKeyword(selectedCustomer.value)) {
+		return;
+	}
+
+	try {
+		const result = await CustomerAPI.list({
+			index: 0,
+			size: 20,
+			storeId: currentStoreStore.currentStoreId || undefined,
+			keyword
+		});
+		const customer = result.list?.[0];
+		if (!customer?.id) {
+			Message.warning("未找到匹配客户");
+			return;
+		}
+		if (1 < (result.total || 0)) {
+			Message.warning("匹配到多个客户，请点击选择客户");
+			customerSelectorVisible.value = true;
+			return;
+		}
+		selectedCustomerId.value = customer.id;
+		selectedCustomer.value = customer;
+		customerSearchKeyword.value = getCustomerSearchKeyword(customer);
+		await refresh();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "客户信息加载失败"));
+	}
+}
+
+function getCustomerSearchKeyword(customer?: Customer): string {
+	return customer?.name?.trim() || customer?.code?.trim() || "";
+}
+
+async function clearCustomer(): Promise<void> {
+	selectedCustomerId.value = "";
+	selectedCustomer.value = undefined;
+	customerSearchKeyword.value = "";
+	await refresh();
+}
+
+async function handleResponsibleSelected(item: ManagedUser): Promise<void> {
+	selectedResponsible.value = item;
+	await refresh();
+}
+
+function openResponsibleSelector(): void {
+	dropdownMenuRef.value?.collapseMenu();
+	responsibleSelectorVisible.value = true;
+}
+
+// ---------- 列表 ----------
+
+const isRefreshing = ref(false);
+const isLoading = ref(false);
+const isNoMore = ref(false);
+const pageResult = reactive<PageResult<FollowUpReminder>>({
+	total: 0,
+	list: []
+});
+const page = reactive<FollowUpReminderPage>({
+	index: 0,
+	size: 16
+});
+let fetchTask: Promise<void> | undefined;
+
+async function fetch(): Promise<void> {
+	if (isNoMore.value) {
+		return;
+	}
+	if (fetchTask) {
+		await fetchTask;
+		return;
+	}
+
+	const task = (async () => {
+		isLoading.value = true;
+		try {
+			const [beginRemindAt, endRemindAt] = buildDateTimestampRange();
+			const result = await FollowUpReminderAPI.list({
+				...page,
+				storeId: currentStoreStore.currentStoreId || undefined,
+				customerId: selectedCustomerId.value || undefined,
+				responsibleUserId: selectedResponsibleId.value || undefined,
+				status: statusFilter.value || undefined,
+				beginRemindAt,
+				endRemindAt
+			});
+			const list = result.list || [];
+			pageResult.total = result.total || 0;
+			pageResult.list = pageResult.list.concat(list);
+			page.index += 1;
+			isNoMore.value = list.length < page.size || pageResult.list.length >= pageResult.total;
+		} finally {
+			isLoading.value = false;
+		}
+	})();
+	fetchTask = task;
+	try {
+		await task;
+	} finally {
+		if (fetchTask === task) {
+			fetchTask = undefined;
+		}
+	}
+}
+
+async function refresh(): Promise<void> {
+	if (fetchTask) {
+		await fetchTask;
+	}
+	isRefreshing.value = true;
+	try {
+		page.index = 0;
+		pageResult.total = 0;
+		pageResult.list = [];
+		isNoMore.value = false;
+		await fetch();
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+function buildDateTimestampRange(): [number | undefined, number | undefined] {
+	return [
+		dateRange.value[0] ? Time.toTimestamp(parseDateTime(dateRange.value[0], false)) : undefined,
+		dateRange.value[1] ? Time.toTimestamp(parseDateTime(dateRange.value[1], true)) : undefined
+	];
+}
+
+async function loadCustomer(id: string): Promise<Customer | undefined> {
+	try {
+		return await CustomerAPI.detail(id);
+	} catch {
+		return undefined;
+	}
+}
+
+async function loadStoreScope(): Promise<void> {
+	if (isGlobalManager.value) {
+		await currentStoreStore.loadStoreList();
+		return;
+	}
+	await currentStoreStore.loadLoginStore();
+}
+
+// ---------- 展示 ----------
+
+function getCustomerName(item: FollowUpReminder): string {
+	return item.customer?.name || item.customer?.code || item.customerId || "未命名客户";
+}
+
+function getManagedUserName(item: ManagedUser): string {
+	return item.user?.nick || item.user?.name || item.userId || "未命名负责人";
+}
+
+function getResponsibleName(item: FollowUpReminder): string {
+	return item.responsibleUser?.nick || item.responsibleUser?.name || item.responsibleUserId || "未命名负责人";
+}
+
+function getReminderTimeText(remindAt?: number): string {
+	return remindAt ? Time.toDateTime(remindAt) : "-";
+}
+
+function getReminderTimeClass(item: FollowUpReminder): "near" | "soon" | "later" | "normal" {
+	if (item.status === "COMPLETED" || !item.remindAt) {
+		return "normal";
+	}
+	const distance = item.remindAt - Time.now();
+	if (distance < 24 * 60 * 60 * 1000) {
+		return "near";
+	}
+	if (distance < 3 * 24 * 60 * 60 * 1000) {
+		return "soon";
+	}
+	return "later";
+}
+
+function getContentSummary(content?: string): string {
+	const text = content?.trim() || "未填写跟进内容";
+	return 60 < text.length ? `${text.slice(0, 60)}...` : text;
+}
+
+function getStatusText(status?: FollowUpReminderStatus): string {
+	return status === "COMPLETED" ? "已完成" : "待完成";
+}
+
+function getStatusTheme(status?: FollowUpReminderStatus): "success" | "warning" {
+	return status === "COMPLETED" ? "success" : "warning";
+}
+
+// ---------- 操作 ----------
+
+const operatingId = ref("");
+const operatingType = ref<"complete" | "delete">();
+
+function confirmComplete(item: FollowUpReminder): void {
+	if (!item.id || !canComplete.value || item.status !== "PENDING" || operatingId.value) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "完成跟进提醒",
+		content: "完成后不能重新打开，确定完成此跟进提醒吗？",
+		cancelBtn: "取消",
+		confirmBtn: "完成",
+		onCancel() {
+			dialog.destroy();
+		},
+		onConfirm: async () => {
+			dialog.destroy();
+			await complete(item.id || "");
+		}
+	});
+}
+
+async function complete(id: string): Promise<void> {
+	operatingId.value = id;
+	operatingType.value = "complete";
+	try {
+		await FollowUpReminderAPI.complete(id);
+		const item = pageResult.list.find(current => current.id === id);
+		if (item) {
+			item.status = "COMPLETED";
+		}
+		Message.success("跟进提醒已完成");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "跟进提醒完成失败"));
+	} finally {
+		operatingId.value = "";
+		operatingType.value = undefined;
+	}
+}
+
+function confirmDelete(item: FollowUpReminder): void {
+	if (!item.id || !canDelete.value || operatingId.value) {
+		return;
+	}
+	const dialog = DialogPlugin.confirm({
+		title: "删除跟进提醒",
+		content: "删除后列表中将不再显示，确定删除这条跟进提醒吗？",
+		cancelBtn: "取消",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		onConfirm: async () => {
+			dialog.destroy();
+			await remove(item.id || "");
+		}
+	});
+}
+
+async function remove(id: string): Promise<void> {
+	operatingId.value = id;
+	operatingType.value = "delete";
+	try {
+		await FollowUpReminderAPI.remove(id);
+		pageResult.list = pageResult.list.filter(item => item.id !== id);
+		pageResult.total = Math.max(0, pageResult.total - 1);
+		Message.success("跟进提醒已删除");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "跟进提醒删除失败"));
+	} finally {
+		operatingId.value = "";
+		operatingType.value = undefined;
+	}
+}
+
+// ---------- 导航和生命周期 ----------
+
+async function toCreate(): Promise<void> {
+	await router.push({
+		name: "CustomerFollowUpReminderCreate",
+		query: selectedCustomerId.value ? { customerId: selectedCustomerId.value } : undefined
+	});
+}
+
+async function toDetail(item: FollowUpReminder): Promise<void> {
+	if (item.id) {
+		await router.push({ name: "CustomerFollowUpReminderDetail", params: { id: item.id } });
+	}
+}
+
+onMounted(async () => {
+	navBarStore.setCustomRightVisible(canCreate.value);
+	try {
+		await loadStoreScope();
+		const queryCustomerId = String(route.query.customerId || "");
+		if (queryCustomerId) {
+			selectedCustomerId.value = queryCustomerId;
+			selectedCustomer.value = await loadCustomer(queryCustomerId);
+			customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
+		}
+		await fetch();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "跟进提醒列表加载失败"));
+	}
+});
+
+watch(() => route.query.customerId, async value => {
+	const id = String(value || "");
+	if (id === selectedCustomerId.value) {
+		return;
+	}
+	selectedCustomerId.value = id;
+	selectedCustomer.value = id ? await loadCustomer(id) : undefined;
+	customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
+	await refresh();
+});
+
+onUnmounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.follow-up-reminder-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		flex-direction: column;
+
+		.customer {
+			--td-button-border-radius: .75rem;
+			--td-input-vertical-padding: .25rem 1rem;
+
+			width: 100%;
+			border: 1px solid var(--td-component-border);
+			z-index: 1;
+			padding-right: .3rem;
+			border-radius: 1rem;
+		}
+
+		.menus {
+			--td-spacer-1: 6px;
+
+			width: 100%;
+			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;
+		}
+
+	}
+
+	.selected-filter {
+		gap: .5rem;
+		width: 100%;
+		min-width: 0;
+		display: flex;
+		overflow: auto;
+		align-items: center;
+
+		:deep(.t-tag) {
+			flex: 0 0 auto;
+		}
+
+		.t-button {
+			flex: 0 0 auto;
+		}
+	}
+
+	.list-wrap {
+		gap: 1rem;
+		display: flex;
+		flex-direction: column;
+
+		.customer {
+			margin: 0 1rem;
+		}
+
+		.items {
+
+			.item {
+
+				.cell {
+					padding: 10px;
+					min-width: 0;
+
+					:deep(.t-cell__title),
+					:deep(.t-cell__title-text) {
+						min-width: 0;
+						overflow: hidden;
+					}
+
+					.avatar {
+						width: 3.5rem;
+						height: 3.5rem;
+					}
+
+					.title {
+						gap: .5rem;
+						width: 100%;
+						display: flex;
+						min-width: 0;
+						font-size: .875rem;
+						align-items: center;
+						justify-content: space-between;
+
+						.name-channel {
+							gap: .5rem;
+							display: flex;
+							min-width: 0;
+							overflow: hidden;
+							align-items: center;
+
+							> .text-bold {
+								min-width: 0;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								white-space: nowrap;
+							}
+						}
+					}
+
+					.description {
+						font-size: .75rem;
+						width: 100%;
+						min-width: 0;
+						max-width: 100%;
+						overflow: hidden;
+						line-height: 1.25;
+
+						.remind-time {
+							font-weight: 600;
+
+							&.near {
+								color: var(--td-error-color);
+							}
+
+							&.soon {
+								color: var(--td-warning-color);
+							}
+
+							&.later {
+								color: var(--td-success-color);
+							}
+						}
+
+						.content {
+							color: var(--td-text-color-secondary);
+							width: 100%;
+							min-width: 0;
+							max-width: 100%;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						.time-responsible {
+							display: flex;
+							justify-content: space-between;
+						}
+					}
+				}
+			}
+
+			.swipe-actions {
+				--td-button-border-radius: 0;
+
+				.complete {
+					color: #fff;
+					background: var(--td-success-color);
+				}
+
+				.delete {
+					color: #fff;
+					background: var(--td-error-color);
+				}
+			}
+	}
+}
+}
+
+:global(html.theme-dark) {
+	.follow-up-reminder-list {
+		.filter {
+			background: #10161f;
+		}
+
+		.filter .menus {
+			background: #172033;
+		}
+
+		.summary,
+		.items .item,
+		.items .cell {
+			color: #e2e8f0;
+			background: rgba(30, 41, 59, .9);
+			border-color: rgba(148, 163, 184, .16);
+		}
+
+		.description .content {
+			color: #94a3b8;
+		}
+
+	}
+}
+</style>

src/pages/followUpReminder/component/ManagedUserSelector.vue

@@ -0,0 +1,221 @@
+<template>
+	<bottom-popup
+		v-model="popupVisible"
+		:title="title"
+		height="80vh"
+		left-button-text="关闭"
+		right-button-text=""
+		@left-button-click="close"
+	>
+		<div class="managed-user-selector">
+			<div class="search-wrap">
+				<t-input
+					v-model.trim="keyword"
+					class="search"
+					borderless
+					clearable
+					placeholder="搜索姓名、昵称或手机号"
+				/>
+			</div>
+			<t-cell-group v-if="filteredUserList.length" class="list">
+				<t-cell
+					v-for="item in filteredUserList"
+					:key="item.id || item.userId"
+					class="item"
+					:class="{ selected: item.userId === modelValue }"
+					:title="getUserName(item)"
+					:description="getUserDescription(item)"
+					@click="select(item)"
+				>
+					<template #leftIcon>
+						<t-image
+							:src="buildUserAvatar(item)"
+							:alt="getUserName(item)"
+							fit="cover"
+							class="avatar"
+						/>
+					</template>
+					<template #rightIcon>
+						<t-icon v-if="item.userId === modelValue" name="check" class="selected-icon" />
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="loading ? '正在加载负责人' : '暂无可选负责人'" />
+		</div>
+	</bottom-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import { UserAPI } from "timi-web-api";
+import ManagedUserAPI from "@/api/ManagedUserAPI";
+import { buildFallbackAvatar } from "@/utils/avatar";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import type { ManagedUser } from "@/types/ManagedUser";
+
+interface Props {
+	modelValue: string;
+	visible: boolean;
+	storeId?: string;
+	title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	storeId: "",
+	title: "选择负责人"
+});
+
+const emit = defineEmits<{
+	"update:modelValue": [value: string];
+	"update:visible": [value: boolean];
+	change: [value: ManagedUser];
+}>();
+
+const popupVisible = computed({
+	get: () => props.visible,
+	set: value => emit("update:visible", value)
+});
+const keyword = ref("");
+const loading = ref(false);
+const userList = ref<ManagedUser[]>([]);
+
+const filteredUserList = computed(() => {
+	const normalizedKeyword = keyword.value.toLowerCase();
+	return userList.value.filter(item => {
+		const user = item.user;
+		return !normalizedKeyword || [item.userId, user?.name, user?.nick, user?.phoneNo]
+			.some(value => Boolean(value?.toLowerCase().includes(normalizedKeyword)));
+	});
+});
+
+function getUserName(item: ManagedUser): string {
+	return item.user?.nick || item.user?.name || item.userId || "未命名用户";
+}
+
+function getUserDescription(item: ManagedUser): string {
+	const phone = item.user?.phoneNo || "未填写手机号";
+	const verified = item.user?.phoneNoVerified ? "已验证" : "未验证";
+	return `${phone} · ${verified}`;
+}
+
+function buildUserAvatar(item: ManagedUser): string {
+	return UserAPI.getAvatarURL(item.user) || buildFallbackAvatar(getUserName(item), "#0f766e");
+}
+
+async function loadUsers(): Promise<void> {
+	loading.value = true;
+	try {
+		const result = await ManagedUserAPI.list({
+			index: 0,
+			size: 1000,
+			equalsExample: {
+				storeId: props.storeId || undefined,
+				enabled: true
+			}
+		}, {
+			storeId: props.storeId || undefined
+		});
+		userList.value = result.list || [];
+	} catch (error) {
+		userList.value = [];
+		Message.error(getErrorMessage(error, "负责人列表加载失败"));
+	} finally {
+		loading.value = false;
+	}
+}
+
+function select(item: ManagedUser): void {
+	if (!item.userId) {
+		return;
+	}
+	emit("update:modelValue", item.userId);
+	emit("change", item);
+	emit("update:visible", false);
+}
+
+function close(): void {
+	emit("update:visible", false);
+}
+
+watch(() => props.visible, async value => {
+	if (!value) {
+		keyword.value = "";
+		return;
+	}
+	await loadUsers();
+});
+
+watch(() => props.storeId, async () => {
+	if (props.visible) {
+		await loadUsers();
+	}
+});
+</script>
+
+<style scoped lang="less">
+.managed-user-selector {
+	height: 100%;
+	overflow: auto;
+	background: var(--td-bg-color-page, #f5f5f8);
+
+	.search-wrap {
+		padding: .75rem 1rem;
+		background: var(--td-bg-color-container, #fff);
+	}
+
+	.search {
+		--td-input-vertical-padding: 8px 14px;
+
+		border: 1px solid var(--td-component-border);
+		border-radius: .75rem;
+	}
+
+	.item {
+		padding: .25rem 1rem;
+
+		&.selected {
+			background: color-mix(in srgb, var(--td-brand-color) 8%, var(--td-bg-color-container, #fff));
+		}
+
+		.avatar {
+			flex: none;
+			width: 3.5rem;
+			height: 3.5rem;
+			overflow: hidden;
+			border-radius: 50%;
+		}
+
+		.selected-icon {
+			color: var(--td-brand-color);
+		}
+	}
+}
+
+:deep(.avatar .t-image__img) {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: inherit;
+}
+
+:global(html.theme-dark) {
+	.managed-user-selector {
+		background: #10161f;
+
+		.search-wrap,
+		.item {
+			background: rgba(30, 41, 59, .9);
+		}
+
+		.item.selected {
+			background: rgba(37, 99, 235, .2);
+		}
+
+		.search {
+			background: rgba(15, 23, 42, .72);
+			border-color: rgba(148, 163, 184, .16);
+		}
+	}
+}
+</style>

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -42,11 +42,10 @@
 								v-if="item.skuCodeSnapshot || item.skuSpecSnapshot?.length || item.skuNameSnapshot || item.specSummarySnapshot || item.unitSnapshot"
 								class="sku-tags"
 							>
-								<product-sku-snapshot-tags
+								<product-sku-tags
 									:product-name="item.productNameSnapshot"
 									:snapshot="item.skuSpecSnapshot"
 									:fallback="item.specSummarySnapshot || item.skuNameSnapshot"
-									:unit="item.unitSnapshot"
 								/>
 							</div>
 							<t-input
@@ -57,6 +56,7 @@
 								align="right"
 								:disabled="!getFulfillmentUnit(item)"
 								placeholder="请输入履约数量"
+								@change="refreshStockPreview"
 							>
 								<template #suffix-icon>
 									<t-button
@@ -81,20 +81,30 @@
 		<div v-else class="empty" v-text="'暂无可履约明细，请返回订单详情检查'" />
 		<t-form class="form" label-width="7rem">
 			<t-form-item label="履约时间" content-align="right">
-				<t-button
+				<div class="time-actions">
-					theme="primary"
+					<t-button
-					variant="outline"
+						theme="primary"
-					size="extra-small"
+						variant="outline"
-					:content="deliveredAtText || '此刻'"
+						size="extra-small"
-					@click="pickerVisible = true"
+						:content="deliveredAtText || '此刻'"
-				/>
+						@click="openDeliveredAtPicker"
+					/>
+					<t-button
+						v-if="deliveredAtText"
+						theme="primary"
+						variant="text"
+						size="extra-small"
+						content="此刻"
+						@click="resetDeliveredAt"
+					/>
+				</div>
 			</t-form-item>
 			<t-form-item v-if="canDirectVerify" label="直接核销履约" content-align="right">
 				<t-switch v-model="directVerify" size="small" :disabled="isSaving || isStockChecking" />
 			</t-form-item>
-			<t-form-item v-if="directVerify" label-width="0">
+			<t-form-item v-if="directVerify || stockPreviewList.length" label-width="0">
 				<div class="stock-tips">
-					<span class="tips red">直接核销会立即扣减实物库存</span>
+					<span v-if="directVerify" class="tips red">直接核销会立即扣减实物库存</span>
 					<product-stock-preview v-if="stockPreviewList.length" :items="stockPreviewList" />
 				</div>
 			</t-form-item>
@@ -102,7 +112,7 @@
 				<t-textarea v-model="remark" borderless autosize maxlength="500" />
 			</t-form-item>
 			<t-form-item label-width="0">
-				<photo-scroller
+				<media-selector
 					v-if="order"
 					:model-value="photoUrlList"
 					v-model:photo-items="photoItems"
@@ -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,8 +144,9 @@
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import ProductAPI from "@/api/ProductAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import { Time } from "timi-web";
-import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
+import ProductSkuTags from "@/components/ProductSkuTags.vue";
 import ProductStockPreview from "@/components/ProductStockPreview.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Attachment } from "timi-web-api";
@@ -145,6 +164,7 @@ import {
 	toPackageBaseQuantity
 } from "@/utils/package";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import type { ProductStockPreviewItem } from "@/utils/productStock";
@@ -302,9 +322,7 @@ async function fillAllQuantity(item: GaoSalesOrderItem): Promise<void> {
 		return;
 	}
 	quantityMap[item.id] = quantity;
-	if (directVerify.value) {
+	await refreshStockPreview();
-		await previewDirectStock();
-	}
 }
 
 function getFulfillmentUnitList(item: GaoSalesOrderItem): ProductSkuUnit[] {
@@ -357,7 +375,7 @@ function openUnitPicker(item: GaoSalesOrderItem): void {
 	unitPickerVisible.value = true;
 }
 
-function confirmUnitPicker(value: Array<string | number>): void {
+async function confirmUnitPicker(value: Array<string | number>): Promise<void> {
 	const skuUnitId = String(value[0] || "");
 	const item = sourceItems.value.find(sourceItem => sourceItem.id === unitPickerSourceItemId.value);
 	const selectedUnit = item ? getFulfillmentUnitList(item).find(unit => unit.id === skuUnitId) : undefined;
@@ -366,6 +384,7 @@ function confirmUnitPicker(value: Array<string | number>): void {
 		setFulfillmentUnit(item, fulfillmentUnit);
 	}
 	unitPickerVisible.value = false;
+	await refreshStockPreview();
 }
 
 function confirmTime(value: string | number): void {
@@ -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();
@@ -386,7 +415,7 @@ function buildAttachments(): Partial<Attachment>[] {
 	}] : []);
 }
 
-async function validateDirectStock(): Promise<boolean> {
+async function validateDirectStock(showShortageMessage = true): Promise<boolean> {
 	stockPreviewList.value = [];
 	const selected = sourceItems.value.filter(item => !!item.id && quantityMap[item.id]);
 	const skuMap = new Map<string, ProductSku>();
@@ -427,7 +456,9 @@ async function validateDirectStock(): Promise<boolean> {
 		stockPreviewList.value = buildProductStockPreview(stockList, requirementList);
 		const shortageMessage = getProductStockShortageMessage(stockList, requirementList);
 		if (shortageMessage) {
-			Message.warning(`${shortageMessage}，不能直接核销履约`);
+			if (showShortageMessage) {
+				Message.warning(`${shortageMessage}，不能直接核销履约`);
+			}
 			return false;
 		}
 		return true;
@@ -438,15 +469,16 @@ async function validateDirectStock(): Promise<boolean> {
 	}
 }
 
-async function previewDirectStock(): Promise<void> {
+async function previewDirectStock(force = false): Promise<void> {
-	if (!directVerify.value || isStockChecking.value) {
+	if ((!directVerify.value && !force) || isStockChecking.value) {
 		return;
 	}
 	stockCheckToken += 1;
 	const token = stockCheckToken;
+	const showShortageMessage = directVerify.value;
 	isStockChecking.value = true;
 	try {
-		if (!await validateDirectStock() && token === stockCheckToken && directVerify.value) {
+		if (!await validateDirectStock(showShortageMessage) && token === stockCheckToken && directVerify.value) {
 			directVerify.value = false;
 		}
 	} finally {
@@ -456,6 +488,13 @@ async function previewDirectStock(): Promise<void> {
 	}
 }
 
+async function refreshStockPreview(): Promise<void> {
+	if (!directVerify.value && !stockPreviewList.value.length) {
+		return;
+	}
+	await previewDirectStock(!directVerify.value);
+}
+
 function validate(): boolean {
 	if (!order.value?.id) {
 		Message.warning("请从订单详情进入履约创建");
@@ -523,10 +562,15 @@ async function save(): Promise<void> {
 			attachmentList: buildAttachments(),
 			remark: remark.value.trim() || null
 		};
-		if (directVerify.value && !await validateDirectStock()) return;
+		if (directVerify.value && !await validateDirectStock(true)) {
+			directVerify.value = false;
+			return;
+		}
 		const result = directVerify.value
 			? await FulfillmentAPI.createAndVerify(request)
 			: await FulfillmentAPI.create(request);
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, request.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		Message.success(directVerify.value ? "履约单创建并核销成功" : "履约单已提交");
 		await router.replace(`/management/order-fulfillments/${result.id}`);
 	} catch (error) {
@@ -648,6 +692,13 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
+	.time-actions {
+		gap: .5rem;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
 	.tips {
 		font-size: .875rem;
 	}

src/pages/fulfillment/OrderFulfillmentDetail.vue

@@ -14,36 +14,23 @@
 				<t-cell title="处理人" :note="fulfillment.verifier?.name || fulfillment.verifierUserId || '未处理'" />
 				<t-cell v-if="fulfillment.reason" title="原因" :note="fulfillment.reason" />
 				<t-cell v-if="fulfillment.remark" title="备注" :note="fulfillment.remark" />
+				<div class="photo-wrap bg-white">
+					<media-selector
+						:model-value="fulfillmentPhotoURLList"
+						:photo-items="fulfillmentPhotoItems"
+						:show-add="false"
+						:show-remove="false"
+						:show-viewer-actions="false"
+						title="履约照片"
+					/>
+				</div>
 			</t-cell-group>
-			<div class="photos" v-entrance-transition="35">
-				<photo-scroller
-					:model-value="fulfillmentPhotoURLList"
-					:photo-items="fulfillmentPhotoItems"
-					:show-add="false"
-					:show-remove="false"
-					:show-viewer-actions="false"
-					title="履约照片"
-				/>
-			</div>
 			<t-cell-group class="items" title="履约明细" theme="card" v-entrance-transition="70">
 				<t-cell
 					class="item"
 					v-for="item in fulfillment.itemList || []"
 					:key="item.id"
-					:title="item.productNameSnapshot || '未命名产品'"
 				>
-					<template #description>
-						<div class="item-description">
-							<t-tag v-if="isGiftedFulfillmentItem(item)" size="small" theme="success" content="赠送" />
-							<product-sku-snapshot-tags
-								:product-name="item.productNameSnapshot"
-								:snapshot="item.skuSpecSnapshot"
-								:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
-								:unit="item.unitSnapshot"
-							/>
-							<span v-text="getFulfillmentQuantityText(item)" />
-						</div>
-					</template>
 					<template #leftIcon>
 						<t-image
 							v-if="getProductPhotoURL(item)"
@@ -58,9 +45,33 @@
 							v-text="(item.productNameSnapshot || '产').slice(0, 1)"
 						/>
 					</template>
+					<template #title>
+						<div class="title">
+							<span class="clip-text" v-text="item.productNameSnapshot || '未命名产品'" />
+							<t-tag v-if="isGiftedFulfillmentItem(item)" size="small" theme="success" content="赠送" />
+							<product-sku-tags
+								class="tags"
+								:product-name="item.productNameSnapshot"
+								:snapshot="item.skuSpecSnapshot"
+								:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
+							/>
+						</div>
+					</template>
+					<template #note>
+						<span class="keep-text" v-text="getFulfillmentQuantityText(item)" />
+					</template>
 				</t-cell>
 				<t-cell v-if="!fulfillment.itemList?.length" title="暂无履约明细" />
 			</t-cell-group>
+			<section
+				v-if="stockPreviewVisible && (stockPreviewLoading || stockPreviewList.length)"
+				class="stock-preview"
+				v-entrance-transition="105"
+			>
+				<div class="title">库存预览</div>
+				<t-loading v-if="stockPreviewLoading" size="1.5rem" text="加载中" />
+				<product-stock-preview v-else-if="stockPreviewList.length" :items="stockPreviewList" />
+			</section>
 			<section
 				v-if="(!isOrderCancelled && isWaitingStock && (canVerify || canCreate)) || (!isOrderCancelled && isPending && (canVerify || canCreate)) || (isVerified && canRevoke)"
 				class="actions"
@@ -86,7 +97,7 @@
 					v-if="isVerified && canRevoke"
 					theme="danger"
 					content="履约冲正"
-					@click="openRevoke"
+					@click="revokeVisible = true"
 				/>
 			</section>
 		</template>
@@ -101,61 +112,39 @@
 		>
 			<t-textarea v-model.trim="reason" borderless autosize placeholder="请输入原因" />
 		</t-dialog>
-		<bottom-popup
+		<order-fulfillment-revoke
-			v-model="revokeVisible"
+			v-if="fulfillment"
-			title="履约冲正"
+			v-model:visible="revokeVisible"
-			left-button-text="取消"
+			:fulfillment="fulfillment"
-			right-button-text="提交"
+			@success="loadData"
-			@left-button-click="revokeVisible = false"
+		/>
-			@right-button-click="submitRevoke"
-		>
-			<t-form class="revoke-form">
-				<t-form-item label="冲正原因" required-mark>
-					<t-textarea
-						v-model="revokeReason"
-						borderless
-						autosize
-					/>
-				</t-form-item>
-				<t-form-item label="库存退回门店" content-align="right">
-					<t-switch v-model="returnedToStore" />
-				</t-form-item>
-				<t-form-item label-width="0">
-					<photo-scroller
-						:model-value="photoUrlList"
-						v-model:photo-items="photoItems"
-						:upload="uploadPhotoList"
-						:edit-mode="true"
-						required
-						title="冲正凭证照片"
-					/>
-				</t-form-item>
-			</t-form>
-		</bottom-popup>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { BottomPopup } from "timi-tdesign-mobile";
 import { PassTimeLabel } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
+import ProductAPI from "@/api/ProductAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
-import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
+import ProductSkuTags from "@/components/ProductSkuTags.vue";
+import ProductStockPreview from "@/components/ProductStockPreview.vue";
+import OrderFulfillmentRevoke from "@/pages/fulfillment/components/OrderFulfillmentRevoke.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { OrderFulfillment, OrderFulfillmentItem } from "@/types/Fulfillment";
 import type { GaoSalesOrderItemType, SalesOrder } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
-import type { Attachment } from "timi-web-api";
+import { addPackageQuantity, getPackageQuantityText } from "@/utils/package";
-import { createPackageRequestNo, getPackageQuantityText } from "@/utils/package";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { getProductPhotoURL } from "@/utils/product";
 import { getFulfillmentStatusText, getSalesOrderItemTypeText, getStatusTheme } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
-import { uploadPhotoList } from "@/utils/photo";
+import type { ProductStockPreviewItem } from "@/utils/productStock";
+import { buildProductStockPreview, mergeProductStockRequirements } from "@/utils/productStock";
 
 type ReasonAction = "reject" | "cancel";
 defineOptions({ name: "OrderFulfillmentDetail" });
@@ -171,11 +160,8 @@ const reasonVisible = ref(false);
 const reasonAction = ref<ReasonAction>("reject");
 const reason = ref("");
 const revokeVisible = ref(false);
-const revokeReason = ref("");
+const stockPreviewList = ref<ProductStockPreviewItem[]>([]);
-const returnedToStore = ref(true);
+const stockPreviewLoading = ref(false);
-const revokeRequestNo = ref("");
-const photoItems = ref<PhotoItem[]>([]);
-const photoUrlList = computed(() => photoItems.value.map(item => item.url));
 const fulfillmentPhotoItems = computed<PhotoItem[]>(() => (fulfillment.value?.attachmentList || [])
 	.filter(item => !!item.id)
 	.map(item => ({
@@ -192,19 +178,92 @@ const isOrderCancelled = computed(() => order.value?.status === "CANCELLED");
 const canVerify = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.verify));
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
 const canRevoke = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.revoke));
+const stockPreviewVisible = computed(() => (isWaitingStock.value || isPending.value)
+	&& userStore.hasPermissions(permissionCodes.product.read)
+	&& userStore.hasPermissions(permissionCodes.productStock.read));
 const sourceItemType = computed<GaoSalesOrderItemType | undefined>(() => {
 	const sourceOrderItemId = fulfillment.value?.itemList?.[0]?.sourceOrderItemId;
 	return order.value?.itemList?.find(item => item.id === sourceOrderItemId)?.itemType;
 });
 
 function getFulfillmentQuantityText(item: OrderFulfillmentItem): string {
-	return `履约数量 ${getPackageQuantityText(item.quantity)} ${item.unitSnapshot || "单位"}`;
+	return `${getPackageQuantityText(item.quantity)} ${item.unitSnapshot || "单位"}`;
 }
 
 function isGiftedFulfillmentItem(item: OrderFulfillmentItem): boolean {
 	return Boolean(order.value?.itemList?.find(orderItem => orderItem.id === item.sourceOrderItemId)?.gifted);
 }
 
+const stockEnabledCache = new Map<string, Promise<boolean | null>>();
+
+function loadStockEnabled(skuId: string): Promise<boolean | null> {
+	const cached = stockEnabledCache.get(skuId);
+	if (cached) {
+		return cached;
+	}
+	const request = (async () => {
+		try {
+			const sku = await ProductAPI.skuDetail(skuId);
+			return sku.stockEnabled;
+		} catch {
+			return null;
+		}
+	})();
+	stockEnabledCache.set(skuId, request);
+	return request;
+}
+
+async function loadStockPreview(target: OrderFulfillment): Promise<void> {
+	stockPreviewList.value = [];
+	if (!stockPreviewVisible.value) {
+		return;
+	}
+	stockPreviewLoading.value = true;
+	try {
+		const requirementList = mergeProductStockRequirements((await Promise.all((target.itemList || []).map(async item => {
+			if (!item.skuId || item.baseQuantity === undefined || item.baseQuantity === null) {
+				return undefined;
+			}
+			const stockEnabled = await loadStockEnabled(item.skuId);
+			if (stockEnabled === null) {
+				throw new Error(`${item.productNameSnapshot || "产品"} 的库存信息加载失败`);
+			}
+			if (!stockEnabled) {
+				return undefined;
+			}
+			return {
+				skuId: item.skuId,
+				baseQuantity: getPackageQuantityText(item.baseQuantity),
+				productName: item.productNameSnapshot || "未命名产品",
+				unitName: "基础单位",
+				stockEnabled
+			};
+		}))).filter((item): item is NonNullable<typeof item> => !!item));
+		if (!requirementList.length) {
+			return;
+		}
+		const stockList = await ProductAPI.stockBatchDetail({ skuIdList: requirementList.map(item => item.skuId) });
+		const ownReservationMap = new Map(requirementList.map(item => [item.skuId, item.baseQuantity]));
+		const previewStockList = target.status === "PENDING"
+			? stockList.map(stock => {
+				const ownReservation = ownReservationMap.get(stock.skuId || "");
+				if (!ownReservation) {
+					return stock;
+				}
+				return {
+					...stock,
+					availableQuantity: addPackageQuantity(stock.availableQuantity ?? "0", ownReservation) || stock.availableQuantity
+				};
+			})
+			: stockList;
+		stockPreviewList.value = buildProductStockPreview(previewStockList, requirementList);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存预览加载失败"));
+	} finally {
+		stockPreviewLoading.value = false;
+	}
+}
+
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) return;
@@ -215,6 +274,7 @@ async function loadData(): Promise<void> {
 		order.value = result.salesOrderId && userStore.hasPermissions(permissionCodes.salesOrder.read)
 			? await SalesOrderAPI.detail(result.salesOrderId)
 			: undefined;
+		await loadStockPreview(result);
 	}
 	catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); }
 	finally { loading.value = false; }
@@ -243,6 +303,8 @@ async function prepareStock(): Promise<void> {
 	operating.value = true;
 	try {
 		fulfillment.value = await FulfillmentAPI.prepareStock({ fulfillmentId: fulfillment.value.id, reason: "库存已备齐" });
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, fulfillment.value.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		Message.success("库存准备已提交");
 		await loadData();
 	} catch (error) { Message.error(getErrorMessage(error, "库存准备失败")); }
@@ -254,6 +316,8 @@ async function verify(): Promise<void> {
 	operating.value = true;
 	try {
 		fulfillment.value = await FulfillmentAPI.verify({ fulfillmentId: fulfillment.value.id, reason: "" });
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, fulfillment.value.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		Message.success("履约已核销");
 		await loadData();
 	} catch (error) { Message.error(getErrorMessage(error, "履约核销失败")); }
@@ -268,35 +332,14 @@ async function submitReason(): Promise<void> {
 		fulfillment.value = reasonAction.value === "reject"
 			? await FulfillmentAPI.reject(payload)
 			: await FulfillmentAPI.cancel(payload);
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, fulfillment.value.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
 		reasonVisible.value = false;
 		Message.success(reasonAction.value === "reject" ? "履约已拒绝" : "履约已撤销");
 		await loadData();
 	} catch (error) { Message.error(getErrorMessage(error, "履约状态操作失败")); }
 	finally { operating.value = false; }
 }
-function openRevoke(): void { revokeReason.value = ""; returnedToStore.value = true; revokeRequestNo.value = ""; photoItems.value = []; revokeVisible.value = true; }
-function buildAttachments(): Partial<Attachment>[] {
-	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
-}
-async function submitRevoke(): Promise<void> {
-	if (!fulfillment.value?.id || !revokeReason.value || operating.value) return;
-	if (fulfillment.value.stockRecordList?.length && !buildAttachments().length) { Message.warning("实物履约冲正必须上传退回照片"); return; }
-	if (!revokeRequestNo.value) revokeRequestNo.value = createPackageRequestNo();
-	operating.value = true;
-	try {
-		fulfillment.value = await FulfillmentAPI.revoke({
-			fulfillmentId: fulfillment.value.id,
-			requestNo: revokeRequestNo.value,
-			reason: revokeReason.value.trim(),
-			returnedToStore: returnedToStore.value,
-			attachmentList: buildAttachments()
-		});
-		revokeVisible.value = false;
-		Message.success("履约单已冲正");
-		await loadData();
-	} catch (error) { Message.error(getErrorMessage(error, "履约冲正失败，重试会复用同一请求号")); }
-	finally { operating.value = false; }
-}
 onMounted(loadData);
 onUnmounted(() => navBarStore.clearRight());
 </script>
@@ -308,6 +351,59 @@ onUnmounted(() => navBarStore.clearRight());
 	display: flex;
 	flex-direction: column;
 
+	.photo-wrap {
+		padding: .75rem 1rem;
+	}
+
+	.items {
+
+		.item {
+			padding: 10px;
+
+			:deep(.t-cell__title) {
+				display: flex;
+				align-items: center;
+			}
+
+			.avatar {
+				width: 2rem;
+				height: 2rem;
+				border-radius: .5rem !important;
+			}
+
+			.title {
+				gap: .375rem;
+				display: flex;
+				min-width: 0;
+				flex-wrap: nowrap;
+				align-items: center;
+
+				.tags {
+					flex-wrap: nowrap;
+				}
+			}
+		}
+	}
+
+	.stock-preview {
+		margin: 0 1rem;
+		padding: 1rem .5rem .75rem;
+		background: var(--td-bg-color-container, #fff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.title {
+			padding: 0 .5rem .5rem;
+			font-size: .875rem;
+			font-weight: 600;
+		}
+
+		:deep(.t-loading) {
+			justify-content: center;
+			padding: 1rem 0;
+		}
+	}
+
 	.actions {
 		--td-button-border-radius: 1rem;
 
@@ -330,36 +426,6 @@ onUnmounted(() => navBarStore.clearRight());
 
 		.t-button { flex: 1 1 auto; }
 	}
-
-	.photos {
-		margin: 0 1rem;
-		padding: 1rem;
-		background: var(--td-bg-color-container, #fff);
-		box-shadow: var(--td-shadow-1);
-		border-radius: 1.25rem;
-	}
-
-	.items {
-
-		.item {
-			padding: 10px;
-
-			.item-description {
-				gap: .375rem;
-				display: flex;
-				flex-wrap: wrap;
-				align-items: center;
-			}
-
-			.avatar {
-				width: 3.5rem;
-				height: 3.5rem;
-			}
-		}
-	}
 }
 
-.revoke-form {
-	margin: 0;
-}
 </style>

src/pages/fulfillment/OrderFulfillmentList.vue

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

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

src/pages/fulfillment/components/OrderFulfillmentRevoke.vue

@@ -0,0 +1,197 @@
+<template>
+	<bottom-popup
+		v-model="visible"
+		title="履约冲正"
+		left-button-text="取消"
+		:right-button-text="operating ? '提交中' : '提交'"
+		:z-index="revokePopupZIndex"
+		:overlay-props="{ zIndex: revokePopupZIndex - 1 }"
+		@left-button-click="visible = false"
+		@right-button-click="submit"
+	>
+		<t-form class="revoke-form" label-width="7rem">
+			<t-form-item label="冲正原因" required-mark>
+				<div class="reason">
+					<t-textarea
+						v-model.trim="reason"
+						borderless
+						autosize
+						maxlength="500"
+						placeholder="请输入或选择冲正原因"
+					/>
+					<t-button
+						size="extra-small"
+						theme="primary"
+						variant="outline"
+						@click="openReasonPicker"
+					>选择</t-button>
+				</div>
+			</t-form-item>
+			<t-form-item label="库存退回门店" content-align="right">
+				<t-switch v-model="returnedToStore" />
+			</t-form-item>
+			<t-form-item label-width="0">
+				<media-selector
+					:model-value="photoUrlList"
+					v-model:photo-items="photoItems"
+					:upload="uploadPhotoList"
+					:edit-mode="true"
+					required
+					title="冲正凭证照片"
+				/>
+			</t-form-item>
+		</t-form>
+	</bottom-popup>
+	<t-popup
+		v-model="reasonPickerVisible"
+		placement="bottom"
+		:z-index="reasonPickerZIndex"
+		:overlay-props="{ zIndex: reasonPickerZIndex - 1 }"
+	>
+		<t-picker
+			v-model="reasonPickerDraft"
+			:columns="reasonPickerColumns"
+			title="选择冲正原因"
+			@cancel="reasonPickerVisible = false"
+			@confirm="confirmReason"
+		/>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import type { Attachment } from "timi-web-api";
+import FulfillmentAPI from "@/api/FulfillmentAPI";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
+import type { OrderFulfillment } from "@/types/Fulfillment";
+import type { PhotoItem } from "@/types/Photo";
+import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
+import { createPackageRequestNo } from "@/utils/package";
+import { Message } from "@/utils/message";
+import { uploadPhotoList } from "@/utils/photo";
+
+defineOptions({ name: "OrderFulfillmentRevoke" });
+
+const props = defineProps<{
+	fulfillment: OrderFulfillment;
+}>();
+const emit = defineEmits<{
+	success: [];
+}>();
+const visible = defineModel<boolean>("visible", { default: false });
+
+const revokePopupZIndex = 12000;
+const reasonPickerZIndex = revokePopupZIndex + 1;
+const operating = ref(false);
+const reason = ref("");
+const returnedToStore = ref(true);
+const photoItems = ref<PhotoItem[]>([]);
+const reasonPickerVisible = ref(false);
+const reasonPickerDraft = ref<string[]>([]);
+const requestNo = ref("");
+const photoUrlList = computed(() => photoItems.value.map(item => item.url));
+const reasonOptions = [
+	"客户申请撤销履约",
+	"履约数量填写有误",
+	"商品或服务与实际不符",
+	"重复履约",
+	"履约操作有误",
+	"库存扣减有误"
+];
+const reasonPickerColumns = reasonOptions.map(item => ({ label: item, value: item }));
+
+function resetForm(): void {
+	reason.value = "";
+	returnedToStore.value = true;
+	photoItems.value = [];
+	reasonPickerVisible.value = false;
+	reasonPickerDraft.value = [];
+	requestNo.value = "";
+}
+
+function openReasonPicker(): void {
+	const currentReason = reasonOptions.includes(reason.value) ? reason.value : 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 buildAttachments(): Partial<Attachment>[] {
+	return photoItems.value.flatMap(item => item.tempFileId ? [{
+		tempFileId: item.tempFileId,
+		attachType: "PHOTO"
+	}] : []);
+}
+
+async function submit(): Promise<void> {
+	if (operating.value) {
+		return;
+	}
+	if (!reason.value.trim()) {
+		Message.warning("冲正原因不能为空");
+		return;
+	}
+	const attachmentList = buildAttachments();
+	if (props.fulfillment.stockRecordList?.length && !attachmentList.length) {
+		Message.warning("实物履约冲正必须上传退回照片");
+		return;
+	}
+	if (!props.fulfillment.id) {
+		Message.error("履约单编号缺失，无法冲正");
+		return;
+	}
+	if (!requestNo.value) {
+		requestNo.value = createPackageRequestNo();
+	}
+	operating.value = true;
+	try {
+		await FulfillmentAPI.revoke({
+			fulfillmentId: props.fulfillment.id,
+			requestNo: requestNo.value,
+			reason: reason.value.trim(),
+			returnedToStore: returnedToStore.value,
+			attachmentList
+		});
+		visible.value = false;
+		emitListDataChanged(listDataEventKeys.salesOrderChanged, props.fulfillment.salesOrderId);
+		emitListDataChanged(listDataEventKeys.productStockChanged);
+		Message.success("履约单已冲正");
+		emit("success");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "履约冲正失败，重试会复用同一请求号"));
+	} finally {
+		operating.value = false;
+	}
+}
+
+watch(visible, value => {
+	if (value) {
+		resetForm();
+	} else {
+		reasonPickerVisible.value = false;
+	}
+});
+</script>
+
+<style scoped lang="less">
+.revoke-form {
+	margin: 0;
+
+	.reason {
+		gap: .5rem;
+		flex: 1;
+		display: flex;
+		align-items: flex-start;
+
+		.t-textarea {
+			min-width: 0;
+			flex: 1;
+		}
+	}
+}
+</style>

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

@@ -75,14 +75,16 @@
 			</t-form-item>
 		</t-form>
 		<div v-if="showRecordPhotoInput" class="input-form photo-form content-margin">
-			<photo-scroller
+			<media-selector
 				title="登记事件照片"
 				:required="selectedRequiredPhotoEventList.length > 0"
 				v-model="recordPhotoList"
 				v-model:photo-items="recordPhotoItemList"
 				:edit-mode="true"
 				:loading="recordPhotoUploading"
-				@add="capturePhoto"
+				@add="selectPhotoFile"
+				@capture-photo="capturePhoto"
+				@capture-video="captureVideo"
 			/>
 		</div>
 		<t-cell-group
@@ -115,10 +117,26 @@
 			ref="recordPhotoInputRef"
 			class="file-input"
 			type="file"
-			accept="image/*"
+			accept="*/*"
 			multiple
 			@change="handleRecordPhotoSelected"
 		>
+		<input
+			ref="recordPhotoCameraInputRef"
+			class="file-input"
+			type="file"
+			accept="image/*"
+			capture="environment"
+			@change="handleRecordPhotoSelected"
+		>
+		<input
+			ref="videoInputRef"
+			class="file-input"
+			type="file"
+			accept="video/*"
+			capture="environment"
+			@change="handleRecordPhotoSelected"
+		>
 	</div>
 	<bottom-popup
 		v-model="eventPopupVisible"
@@ -153,7 +171,7 @@ import EventRecordAPI from "@/api/EventRecordAPI";
 import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import EventOptionSelector from "@/components/EventOptionSelector.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import { useSettingStore } from "@/store/settingStore";
 import type { Customer } from "@/types/Customer";
 import type { EventItem, EventOptionSelectionMap } from "@/types/EventItem";
@@ -165,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";
@@ -386,6 +405,8 @@ function validateNumberValueList(): boolean {
 // ---------- 照片 ----------
 
 const recordPhotoInputRef = ref<HTMLInputElement>();
+const recordPhotoCameraInputRef = ref<HTMLInputElement>();
+const videoInputRef = ref<HTMLInputElement>();
 const recordPhotoItemList = ref<PhotoItem[]>([]);
 const recordPhotoUploading = ref(false);
 const showRecordPhotoInput = computed(() => selectedRequiredPhotoEventList.value.length > 0 || recordPhotoItemList.value.length > 0);
@@ -400,26 +421,36 @@ const recordPhotoList = computed<string[]>({
 });
 
 function capturePhoto(): void {
+	recordPhotoCameraInputRef.value?.click();
+}
+
+function selectPhotoFile(): void {
 	recordPhotoInputRef.value?.click();
 }
 
+function captureVideo(): void {
+	videoInputRef.value?.click();
+}
+
 async function handleRecordPhotoSelected(event: Event): Promise<void> {
 	const input = event.target as HTMLInputElement;
 	const fileList = Array.from(input.files || []);
 	if (!fileList.length) {
 		return;
 	}
+	saveCapturedFilesFromInput(input, fileList);
 	recordPhotoUploading.value = true;
 	try {
 		const compressedFileList = await compressUploadImageList(fileList);
 		const tempFileList = await AttachmentAPI.upload(compressedFileList);
-		for (const item of tempFileList) {
+		for (const [index, item] of tempFileList.entries()) {
 			if (!item.id) {
 				continue;
 			}
 			recordPhotoItemList.value.push({
 				tempFileId: item.id,
 				attachType: "PHOTO",
+				mimeType: fileList[index]?.type,
 				url: AttachmentAPI.getTempReadURL(item.id)
 			});
 		}

src/pages/package/PackageConfigDetail.vue

@@ -20,6 +20,13 @@
 					</div>
 				</div>
 			</section>
+			<t-cell-group v-if="canReadSalesOrder" theme="card" v-entrance-transition="35">
+				<t-cell title="套餐订单列表" arrow @click="toPackageOrderList">
+					<template #left-icon>
+						<t-icon name="gift" />
+					</template>
+				</t-cell>
+			</t-cell-group>
 			<t-cell-group title="基本信息" theme="card" v-entrance-transition="70">
 				<t-cell title="标准价" :note="formatPackageAmount(config.standardAmount)" />
 				<t-cell title="起始日期" :note="config.beginAt ? Time.toDateTime(config.beginAt) : '不限'" />
@@ -30,7 +37,6 @@
 				<t-cell
 					class="item"
 					v-for="item in config.itemList || []"
-					:title="getItemTitle(item)"
 					:key="item.id || `${item.skuId}-${item.skuUnitId}`"
 					:note="`${item.defaultQuantity} ${item.unitSnapshot || ''}${item.remark ? `｜${item.remark}` : ''}`"
 				>
@@ -48,12 +54,14 @@
 							v-text="(item.productNameSnapshot || '产').slice(0, 1)"
 						/>
 					</template>
-					<template #description>
+					<template #title>
-						<t-tag
+						<div class="title">
-							:content="item.skuCodeSnapshot || item.sku?.code || 'SKU'"
+							<span v-text="item.productNameSnapshot || '未命名产品'" />
-							theme="primary"
+							<product-sku-tags
-							variant="light"
+								:product-name="item.productNameSnapshot"
-						/>
+								:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
+							/>
+						</div>
 					</template>
 				</t-cell>
 				<div v-if="!config.itemList?.length" class="empty" v-text="'暂无产品权益'" />
@@ -82,6 +90,7 @@ import { DialogPlugin } from "tdesign-mobile-vue";
 import { Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import PackageAPI from "@/api/PackageAPI";
+import ProductSkuTags from "@/components/ProductSkuTags.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoPackageConfig, PackageConfigItem, PackageConfigStatus } from "@/types/Package";
@@ -89,7 +98,7 @@ import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount, getPackageConfigStatusText } from "@/utils/package";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
-import { getProductPhotoURL as getProductPhotoUrl, getProductSkuSnapshotText } from "@/utils/product";
+import { getProductPhotoURL as getProductPhotoUrl } from "@/utils/product";
 
 defineOptions({ name: "PackageConfigDetail" });
 
@@ -102,6 +111,7 @@ const config = ref<GaoPackageConfig>();
 const isLoading = ref(false);
 const canUpdate = computed(() => !!config.value && userStore.hasPermissions(permissionCodes.packageConfig.update));
 const canDelete = computed(() => !!config.value && userStore.hasPermissions(permissionCodes.packageConfig.delete));
+const canReadSalesOrder = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.read));
 const canPurchase = computed(() =>
 	!!config.value
 	&& config.value.status === "ACTIVE"
@@ -116,11 +126,6 @@ function getItemPhotoURL(item: PackageConfigItem): string {
 	return getProductPhotoUrl(item.sku || {});
 }
 
-function getItemTitle(item: PackageConfigItem): string {
-	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
-}
-
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) {
@@ -153,6 +158,21 @@ async function toPurchase(): Promise<void> {
 	}
 }
 
+async function toPackageOrderList(): Promise<void> {
+	if (!config.value?.id || !canReadSalesOrder.value) {
+		return;
+	}
+	await router.push({
+		name: "SalesOrderList",
+		query: {
+			orderType: "PACKAGE",
+			packageConfigId: config.value.id,
+			packageConfigName: config.value.name || "未命名套餐",
+			transitionDepth: String(Number(route.meta.depth ?? 0) + 1)
+		}
+	});
+}
+
 function removeConfig(): void {
 	if (!config.value?.id || !canDelete.value) {
 		return;
@@ -286,16 +306,20 @@ onUnmounted(() => navBarStore.clearRight());
 		.item {
 			padding: 10px;
 
-			.item-title {
+			:deep(.t-cell__title) {
-				gap: .5rem;
 				display: flex;
 				align-items: center;
-				justify-content: space-between;
 			}
 
 			.avatar {
-				width: 3.5rem;
+				width: 2.5rem;
-				height: 3.5rem;
+				height: 2.5rem;
+			}
+
+			.title {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
 			}
 		}
 	}

src/pages/package/PackageConfigEdit.vue

@@ -52,9 +52,6 @@
 						@update:model-value="applyProduct(index, $event)"
 						@select="applyProductSelection(index, $event)"
 					/>
-					<t-form-item v-if="item.skuId" label="SKU 单位" content-align="right">
-						<span v-text="getUnit(item)?.name || '未选择单位'" />
-					</t-form-item>
 					<t-form-item label="默认配额" content-align="right" required-mark>
 						<t-stepper
 							v-model="item.defaultQuantity"

src/pages/package/PackageConfigList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.packageConfig.read" class="package-config-list">
-		<div class="filters">
+		<div class="filters glass">
 			<t-input
 				v-model.trim="keyword"
 				class="keyword"
@@ -193,7 +193,7 @@ function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning
 function getProductRightText(item: PackageConfigItem): string {
 	const quantity = getPackageQuantityText(item.defaultQuantity);
 	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? `（${skuText}）` : " "}${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
 }
 
 onMounted(async () => {
@@ -217,16 +217,14 @@ onUnmounted(() => {
 	padding: var(--app-nav-height) 0 1rem;
 
 	.filters {
+		gap: .5rem;
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
 		z-index: 10;
-		gap: .5rem;
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: var(--td-bg-color-page);
-		box-shadow: var(--td-shadow-1);
 
 		.keyword {
 			--td-input-vertical-padding: .25rem 1rem;
@@ -234,7 +232,6 @@ onUnmounted(() => {
 			flex: 1;
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -246,10 +243,6 @@ onUnmounted(() => {
 			margin-left: -2rem;
 			padding-left: 2rem;
 			border-radius: 1rem;
-
-			&:after {
-				display: none;
-			}
 		}
 	}
 

src/pages/package/PackageOrderConfigList.vue

@@ -0,0 +1,292 @@
+<template>
+	<div v-can="permissionCodes.packageConfig.read" class="package-order-config-list">
+		<div class="filters glass">
+			<t-input
+				v-model.trim="keyword"
+				class="keyword"
+				borderless
+				clearable
+				placeholder="搜索套餐名称或说明"
+			/>
+			<t-dropdown-menu class="status">
+				<t-dropdown-item
+					v-model="status"
+					label="状态"
+					:options="statusOptions"
+					@change="selectStatus"
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh
+			v-model="refreshing"
+			:refresh-timeout="30000"
+			@refresh="reload"
+			@scrolltolower="loadMore"
+		>
+			<t-cell-group
+				v-if="configList.length"
+				class="list fix-last-cell-line empty-cell-title-margin"
+				theme="card"
+			>
+				<t-cell
+					v-for="(item, index) in configList"
+					:key="item.id"
+					class="item"
+					arrow
+					v-entrance-transition="index * 30"
+					@click="selectConfig(item)"
+				>
+					<template #title>
+						<div class="title">
+							<strong class="name clip-text" v-text="item.name || '未命名套餐'" />
+							<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
+						</div>
+					</template>
+					<template #description>
+						<div class="description">
+							<div class="products">
+								<t-tag
+									v-for="productItem in item.itemList || []"
+									:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
+									:content="getProductText(productItem)"
+									theme="primary"
+									variant="light"
+								/>
+								<t-tag v-if="!item.itemList?.length" content="暂无产品权益" />
+							</div>
+							<div class="price">
+								<span class="label gray">标准价：</span>
+								<span class="value red" v-text="formatPackageAmount(item.standardAmount)" />
+							</div>
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-else class="center-tips" v-text="loading ? '正在加载套餐' : '暂无套餐'" />
+			<div class="center-tips" v-text="loadStateText" />
+		</t-pull-down-refresh>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type DropdownValue } from "tdesign-mobile-vue";
+import { Toolkit } from "timi-web";
+import PackageAPI from "@/api/PackageAPI";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { GaoPackageConfig, PackageConfigItem, PackageConfigStatus } from "@/types/Package";
+import { getErrorMessage } from "@/utils/error";
+import { Message } from "@/utils/message";
+import { formatPackageAmount, getPackageConfigStatusText, getPackageQuantityText } from "@/utils/package";
+import { permissionCodes } from "@/utils/permission";
+import { getProductSkuSnapshotText } from "@/utils/product";
+
+defineOptions({ name: "PackageOrderConfigList" });
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+
+const keyword = ref("");
+const status = ref("ALL");
+const configList = ref<GaoPackageConfig[]>([]);
+const pageIndex = ref(0);
+const total = ref(0);
+const loading = ref(false);
+const refreshing = ref(false);
+const noMore = ref(false);
+const pageSize = 15;
+const statusOptions = [
+	{ label: "全部状态", value: "ALL" },
+	{ label: "草稿", value: "DRAFT" },
+	{ label: "启用", value: "ACTIVE" },
+	{ label: "停用", value: "INACTIVE" }
+];
+const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
+
+async function loadMore(): Promise<void> {
+	if (loading.value || noMore.value) {
+		return;
+	}
+	loading.value = true;
+	try {
+		const result = await PackageAPI.configList({
+			index: pageIndex.value,
+			size: pageSize,
+			keyword: keyword.value || undefined,
+			status: status.value === "ALL" ? undefined : status.value as PackageConfigStatus
+		});
+		const rows = result.list || [];
+		configList.value = configList.value.concat(rows);
+		total.value = result.total || 0;
+		pageIndex.value += 1;
+		noMore.value = rows.length < pageSize || total.value <= configList.value.length;
+	} finally {
+		loading.value = false;
+	}
+}
+
+async function reload(): Promise<void> {
+	if (loading.value) {
+		return;
+	}
+	pageIndex.value = 0;
+	configList.value = [];
+	total.value = 0;
+	noMore.value = false;
+	try {
+		await loadMore();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "套餐加载失败"));
+	} finally {
+		refreshing.value = false;
+	}
+}
+
+async function selectStatus(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	status.value = String(value);
+	await reload();
+}
+
+const reloadByKeyword = Toolkit.debounce(async () => {
+	await reload();
+}, false);
+
+watch(keyword, () => {
+	reloadByKeyword();
+});
+
+async function selectConfig(config: GaoPackageConfig): Promise<void> {
+	if (!config.id) {
+		return;
+	}
+	await router.push({
+		name: "SalesOrderList",
+		query: {
+			orderType: "PACKAGE",
+			packageConfigId: config.id,
+			packageConfigName: config.name || "未命名套餐",
+			transitionDepth: String(Number(route.meta.depth ?? 0) + 1)
+		}
+	});
+}
+
+function getStatusTheme(statusValue?: PackageConfigStatus): "success" | "warning" | "default" {
+	return statusValue === "ACTIVE" ? "success" : statusValue === "INACTIVE" ? "warning" : "default";
+}
+
+function getProductText(item: PackageConfigItem): string {
+	const quantity = getPackageQuantityText(item.defaultQuantity);
+	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? `（${skuText}）` : " "}${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	try {
+		await reload();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "套餐加载失败"));
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	reloadByKeyword.cancel();
+});
+</script>
+
+<style scoped lang="less">
+.package-order-config-list {
+	padding: var(--app-nav-height) 0 1rem;
+
+	.filters {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		gap: .5rem;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+
+		.keyword {
+			--td-input-vertical-padding: .25rem 1rem;
+
+			flex: 1;
+			border: 1px solid var(--td-component-border);
+			z-index: 1;
+			border-radius: 1rem;
+		}
+
+		.status {
+			--td-spacer: 4px;
+			--td-spacer-1: 6px;
+
+			border: 1px solid rgba(148, 163, 184, .18);
+			margin-left: -2rem;
+			padding-left: 2rem;
+			border-radius: 1rem;
+		}
+	}
+
+	.list {
+		gap: 1rem;
+		display: flex;
+		padding-top: 1rem;
+		flex-direction: column;
+
+		.item {
+			padding: 10px;
+			min-width: 0;
+
+			:deep(.t-cell__title) {
+				min-width: 0;
+			}
+
+			.title {
+				gap: .5rem;
+				flex: 1;
+				display: flex;
+				min-width: 0;
+				align-items: center;
+				justify-content: space-between;
+			}
+
+			.description {
+				display: flex;
+				min-width: 0;
+				flex-direction: column;
+
+				.products {
+					gap: .35rem;
+					display: flex;
+					margin-top: .5rem;
+					overflow-x: auto;
+					white-space: nowrap;
+					scrollbar-width: none;
+
+					:deep(.t-tag) {
+						flex: 0 0 auto;
+					}
+
+					&::-webkit-scrollbar {
+						display: none;
+					}
+				}
+
+				.price {
+					margin-top: .5rem;
+					text-align: right;
+
+					.value {
+						font-size: 1.1rem;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

src/pages/package/PackagePurchase.vue

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

src/pages/permission/PermissionSettings.vue

@@ -92,12 +92,10 @@ const router = useRouter();
 const userStore = useUserStore();
 const permissionStore = usePermissionSettingsStore();
 const authorizationRoleList = ref<Role[]>([]);
-const directRoleIdSet = ref(new Set<string>());
-const manageableRoleIdSet = ref(new Set<string>());
 const isSystemAdmin = computed(() => userStore.hasRoles(coreRoleCodes.admin));
 const roleCount = computed(() => authorizationRoleList.value.length);
 const permissionCount = computed(() => permissionStore.permissionList.length);
-type RoleTreeItem = Pick<Role, "id" | "name" | "parentRoleId" | "protectedRole"> & { level: number };
+type RoleTreeItem = Pick<Role, "id" | "name" | "parentRoleId" | "protectedRole" | "ownerType"> & { level: number };
 
 const visibleRoleTree = computed<RoleTreeItem[]>(() => {
 	if (isSystemAdmin.value) {
@@ -147,36 +145,15 @@ function canAssignRole(role: Pick<Role, "protectedRole">): boolean {
 	return isSystemAdmin.value || role.protectedRole !== true;
 }
 
-function getRoleScopeLabel(role: Pick<Role, "id">): string {
+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([
+	authorizationRoleList.value = permissionStore.roleList;
-		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;
+	}
+
+	const storeRoleIdSet = new Set(permissionStore.roleList.map(item => item.id));
+	return roleList.filter(role => storeRoleIdSet.has(role.id)
+		|| (role.moduleCode === moduleCode && role.code === "STORE_MANAGER"));
 }
 
-function mergeRoleList(...roleLists: Role[][]): Role[] {
+async function loadAuthorizationScope(): Promise<void> {
-	const roleMap = new Map<string, Role>();
+	candidateRoleList.value = permissionStore.roleList;
-	for (const role of roleLists.flat()) {
+	inheritanceRoleList.value = [...permissionStore.roleList];
-		roleMap.set(role.id, role);
-	}
-	return Array.from(roleMap.values());
 }
 
 // ---------- 保存 ----------

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

@@ -51,6 +51,7 @@ import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import type { Customer } from "@/types/Customer";
 import type { PointAccount as PointAccountData } from "@/types/Point";
+import { formatWanInteger } from "@/utils/money";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 defineOptions({
@@ -149,7 +150,7 @@ async function toAdjust(): Promise<void> {
 // ---------- 展示 ----------
 
 function formatPoints(value?: number): string {
-	return `${(value ?? 0).toLocaleString("zh-CN")} 分`;
+	return `${formatWanInteger(value ?? 0)} 分`;
 }
 
 function formatTimestamp(timestamp?: number): string {
@@ -165,7 +166,7 @@ function formatTimestamp(timestamp?: number): string {
 
 function formatSignedPoints(value?: number): string {
 	const pointValue = value ?? 0;
-	return pointValue < 0 ? `扣除 ${Math.abs(pointValue).toLocaleString("zh-CN")} 分` : `增加 ${pointValue.toLocaleString("zh-CN")} 分`;
+	return pointValue < 0 ? `扣除 ${formatWanInteger(Math.abs(pointValue))} 分` : `增加 ${formatWanInteger(pointValue)} 分`;
 }
 
 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"
@@ -64,6 +64,7 @@ import CustomerSelector from "@/components/CustomerSelector.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import type { PointAccount, PointAccountPage } from "@/types/Point";
 import { Message } from "@/utils/message";
+import { formatWanInteger } from "@/utils/money";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 defineOptions({
@@ -196,7 +197,7 @@ async function load(): Promise<void> {
 // ---------- 展示 ----------
 
 function formatPoints(value?: number): string {
-	return `${(value ?? 0).toLocaleString("zh-CN")} 分`;
+	return `${formatWanInteger(value ?? 0)} 分`;
 }
 
 function getBalanceTheme(value?: number): string {
@@ -256,8 +257,6 @@ onMounted(async () => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -266,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;
 		}
@@ -276,7 +274,6 @@ onMounted(async () => {
 		gap: 1rem;
 		display: flex;
 		min-height: 70vh;
-		padding-top: 1rem;
 		flex-direction: column;
 
 		.list {

src/pages/point/PointAdjust.vue

@@ -83,6 +83,7 @@ import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import type { Customer } from "@/types/Customer";
 import type { PointAccount } from "@/types/Point";
 import { getErrorMessage } from "@/utils/error";
+import { formatWanInteger } from "@/utils/money";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 defineOptions({
@@ -113,7 +114,7 @@ const selectedCustomerId = ref(String(route.query.customerId || ""));
 const selectedCustomer = ref<Customer>();
 const account = ref<PointAccount>();
 const selectorVisible = ref(false);
-const balanceText = computed(() => `当前余额：${(account.value?.balance ?? 0).toLocaleString("zh-CN")} 分`);
+const balanceText = computed(() => `当前余额：${formatWanInteger(account.value?.balance ?? 0)} 分`);
 
 async function handleCustomerChange(value: string | string[]): Promise<void> {
 	selectedCustomerId.value = Array.isArray(value) ? String(value[0] || "") : value;

src/pages/point/PointLedgerDetail.vue

@@ -91,6 +91,7 @@ import type { EventItem } from "@/types/EventItem";
 import type { EventRecord } from "@/types/EventRecord";
 import type { PointLedger, PointRule, PointRuleStatus } from "@/types/Point";
 import { formatEventNumberValue, getEventValueUnitText } from "@/utils/eventValue";
+import { formatWanInteger } from "@/utils/money";
 import { permissionCodes } from "@/utils/permission";
 
 defineOptions({
@@ -220,18 +221,18 @@ function getPointDeltaText(pointDelta?: number): string {
 	if (pointDelta === undefined || pointDelta === null) {
 		return "-";
 	}
-	return `${0 < pointDelta ? "获得" : "消耗"} ${Math.abs(pointDelta)} 分`;
+	return `${0 < pointDelta ? "获得" : "消耗"} ${formatWanInteger(Math.abs(pointDelta))} 分`;
 }
 
 function getPointText(value?: number | null): string {
-	return value === undefined || value === null ? "-" : `${value} 分`;
+	return value === undefined || value === null ? "-" : `${formatWanInteger(value)} 分`;
 }
 
 function getSignedPointText(value?: number | null): string {
 	if (value === undefined || value === null) {
 		return "-";
 	}
-	return `${0 < value ? "获得" : "消耗"} ${Math.abs(value)} 分`;
+	return `${0 < value ? "获得" : "消耗"} ${formatWanInteger(Math.abs(value))} 分`;
 }
 
 function getEventValueTypeText(event: EventItem): string {
@@ -252,7 +253,7 @@ function getRulePointText(rule: PointRule): string {
 	if (rule.pointValue === undefined || rule.pointValue === null) {
 		return "-";
 	}
-	return `${0 < rule.pointValue ? "发放" : "消耗"} ${Math.abs(rule.pointValue)} 分`;
+	return `${0 < rule.pointValue ? "发放" : "消耗"} ${formatWanInteger(Math.abs(rule.pointValue))} 分`;
 }
 
 function getRuleScriptText(rule: PointRule): string {

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"
@@ -96,7 +96,7 @@
 									<span>时间：</span>
 									<pass-time-label :timestamp="item.occurredAt" underline />
 								</div>
-								<div v-text="`余额：${item.balanceBefore ?? 0} → ${item.balanceAfter ?? 0}`" />
+								<div v-text="`余额：${formatPointValue(item.balanceBefore)} → ${formatPointValue(item.balanceAfter)}`" />
 								<div v-text="item.remark" />
 							</div>
 						</template>
@@ -153,6 +153,7 @@ import type { PointLedger, PointLedgerChangeType, PointLedgerPage } from "@/type
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { buildPresetDateRange, parseDateTime } from "@/utils/date";
 import { Message } from "@/utils/message";
+import { formatWanInteger } from "@/utils/money";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 type DateFilter = "all" | "today" | "last7" | "last30" | "custom";
@@ -386,7 +387,11 @@ function buildListOptions(): { storeId: string } {
 
 function getLedgerDelta(item: PointLedger): string {
 	const value = item.pointDelta ?? 0;
-	return `${0 < value ? "+" : "-"}${Math.abs(value)} 分`;
+	return `${0 < value ? "+" : "-"}${formatWanInteger(Math.abs(value))} 分`;
+}
+
+function formatPointValue(value?: number): string {
+	return value === undefined || value === null ? "-" : formatWanInteger(value);
 }
 
 function getLedgerShortType(item: PointLedger): string {
@@ -477,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;
@@ -490,8 +494,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.customer {
@@ -500,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;
 		}
@@ -509,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/PointRedeemSkuEdit.vue

@@ -5,6 +5,7 @@
 				v-model="selection"
 				:selected-product="form.product"
 				required-mark
+				@select="handleProductSelection"
 			/>
 			<t-form-item label="默认积分" required-mark>
 				<t-input
@@ -34,10 +35,14 @@
 				<t-textarea v-model.trim="form.remark" maxlength="500" autosize />
 			</t-form-item>
 		</t-form>
-		<div v-if="form.id" class="actions" v-entrance-transition="70">
+		<t-button
-			<t-button class="bg-white" theme="danger" variant="outline" @click="disable">停用配置</t-button>
+			v-if="form.id"
-			<t-button theme="danger" @click="remove">删除</t-button>
+			class="cell-button"
-		</div>
+			theme="danger"
+			v-entrance-transition="70"
+			content="删除"
+			@click="remove"
+		/>
 	</div>
 	<t-popup v-model="statusVisible" placement="bottom">
 		<t-picker
@@ -55,6 +60,7 @@ import PointAPI from "@/api/PointAPI";
 import ProductSelector from "@/components/ProductSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { PointRedeemSku, PointRedeemSkuStatus } from "@/types/Point";
+import type { ProductSelection } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
 import { normalizePackageQuantity } from "@/utils/package";
@@ -71,6 +77,8 @@ const isSaving = ref(false);
 const form = reactive({
 	id: "",
 	product: undefined as PointRedeemSku["product"],
+	sku: undefined as PointRedeemSku["sku"],
+	unit: undefined as PointRedeemSku["unit"],
 	pointText: "",
 	status: "DRAFT" as PointRedeemSkuStatus,
 	totalText: "",
@@ -97,6 +105,12 @@ function parseLimit(value: string): string | null | undefined {
 	return value ? normalizePackageQuantity(value) : null;
 }
 
+function handleProductSelection(value: ProductSelection): void {
+	form.product = value.product;
+	form.sku = value.sku;
+	form.unit = value.unit;
+}
+
 function confirmStatus(value: Array<string | number>): void {
 	form.status = String(value[0]) as PointRedeemSkuStatus;
 	statusVisible.value = false;
@@ -110,6 +124,8 @@ async function load(): Promise<void> {
 	const item = await PointAPI.redeemSkuDetail(id);
 	form.id = item.id || "";
 	form.product = item.product;
+	form.sku = item.sku;
+	form.unit = item.unit;
 	selection.value = item.skuId && item.skuUnitId ? { skuId: item.skuId, skuUnitId: item.skuUnitId } : undefined;
 	form.pointText = String(item.defaultPointCost || "");
 	form.status = item.status || "DRAFT";
@@ -155,22 +171,6 @@ async function save(): Promise<void> {
 	}
 }
 
-async function disable(): Promise<void> {
-	if (!form.id || isSaving.value) {
-		return;
-	}
-	isSaving.value = true;
-	try {
-		await PointAPI.redeemSkuDisable(form.id);
-		Message.success("兑换配置已停用");
-		await router.replace({ name: "PointRedeemSkuList" });
-	} catch (error) {
-		Message.error(getErrorMessage(error, "兑换配置停用失败"));
-	} finally {
-		isSaving.value = false;
-	}
-}
-
 async function remove(): Promise<void> {
 	if (!form.id || isSaving.value) {
 		return;
@@ -209,17 +209,5 @@ onUnmounted(() => navBarStore.clearRight());
 	.tips {
 		font-size: .875rem;
 	}
-
-	.actions {
-		--td-button-border-radius: 1rem;
-
-		gap: .75rem;
-		margin: 0 1rem;
-		display: flex;
-
-		.t-button {
-			flex: 1;
-		}
-	}
 }
 </style>

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"
@@ -17,7 +17,6 @@
 					:key="item.id"
 					class="item"
 					arrow
-					:description="item.unit?.name || '单位未知'"
 					v-entrance-transition="index * 30"
 					@click="toEdit(item)"
 				>
@@ -36,18 +35,25 @@
 						/>
 					</template>
 					<template #title>
-						<div class="title">
+						<span class="clip-text" v-text="item.product?.name || item.sku?.name || '未命名产品'" />
-							<strong v-text="item.product?.name || item.sku?.name || '未命名产品'" />
+					</template>
+					<template #note>
+						<span class="orange keep-text" v-text="formatPoint(item.defaultPointCost)" />
+					</template>
+					<template #description>
+						<div class="description">
 							<t-tag
 								size="small"
 								:theme="item.status === 'ACTIVE' ? 'success' : 'default'"
 								:content="statusText(item.status)"
 							/>
+							<product-sku-tags
+								:product-name="item.product?.name"
+								:fallback="item.sku?.specSummary || item.sku?.name || '默认 SKU'"
+								:unit="item.unit?.name"
+							/>
 						</div>
 					</template>
-					<template #note>
-						<span class="orange" v-text="formatPoint(item.defaultPointCost)" />
-					</template>
 				</t-cell>
 			</t-cell-group>
 			<t-empty v-else :description="isLoading ? '正在加载兑换配置' : '暂无兑换配置'" />
@@ -63,9 +69,11 @@
 <script setup lang="ts">
 import { Toolkit } from "timi-web";
 import PointAPI from "@/api/PointAPI";
+import ProductSkuTags from "@/components/ProductSkuTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { PointRedeemSku, PointRedeemSkuStatus } from "@/types/Point";
 import { Message } from "@/utils/message";
+import { formatWanInteger } from "@/utils/money";
 import { getProductPhotoURL } from "@/utils/product";
 import { permissionCodes } from "@/utils/permission";
 
@@ -129,7 +137,7 @@ const reloadByKeyword = Toolkit.debounce(async () => {
 }, false);
 
 function formatPoint(value?: number): string {
-	return `${(value || 0).toLocaleString("zh-CN")} 分`;
+	return `${formatWanInteger(value ?? 0)} 分`;
 }
 
 function getProductPhoto(item: PointRedeemSku): string {
@@ -186,27 +194,28 @@ 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;
 		}
 	}
 
 	.item {
 		padding: 10px;
-		border-radius: 1rem;
 
 		.avatar {
 			width: 3.5rem;
 			height: 3.5rem;
-			border-radius: .875rem;
+		}
+
+		.description {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
 		}
 	}
 

src/pages/point/PointRedemptionCreate.vue

@@ -41,11 +41,15 @@
 				v-entrance-transition
 			/>
 			<t-form-item v-if="customer" label="积分余额" content-align="right">
-				<span v-text="pointBalanceText" />
+				<span class="orange" v-text="pointBalanceText" />
 			</t-form-item>
 			<t-form-item label="兑换商品" required-mark content-align="right" arrow @click="skuVisible = true">
 				<span v-text="skuName || '请选择兑换商品'" />
 			</t-form-item>
+			<product-sku-form-item
+				:sku="selectedSku?.sku"
+				:unit="selectedSku?.unit"
+			/>
 			<t-form-item label="兑换数量" content-align="right" required-mark>
 				<t-stepper
 					v-model="quantity"
@@ -68,7 +72,7 @@
 				</t-form-item>
 			</template>
 			<div class="photo-wrap">
-				<photo-scroller
+				<media-selector
 					v-model="photoUrls"
 					v-model:photo-items="photos"
 					:upload="uploadPhotoList"
@@ -97,10 +101,26 @@
 				v-for="item in skuList"
 				:key="item.id"
 				:title="item.product?.name || item.sku?.name || '未命名产品'"
-				:note="`${item.sku?.specSummary || item.sku?.code || '默认 SKU'} · ${item.unit?.name || ''} · ${formatPoint(item.defaultPointCost)} / 单位`"
+				:note="`${formatPoint(item.defaultPointCost)} / ${item.unit?.name || '单位未知'}`"
+				class="item"
 				arrow
 				@click="selectSku(item)"
-			/>
+		>
+				<template #left-icon>
+					<t-image
+						v-if="getProductPhoto(item)"
+						:src="getProductPhoto(item)"
+						:alt="item.product?.name || item.sku?.name || '产品图片'"
+						fit="cover"
+						class="avatar"
+					/>
+					<div
+						v-else
+						class="avatar fallback"
+						v-text="(item.product?.name || item.sku?.name || '产').slice(0, 1)"
+					/>
+				</template>
+			</t-cell>
 			<t-empty v-if="!skuList.length" description="暂无启用的兑换商品" />
 		</div>
 	</bottom-popup>
@@ -114,7 +134,7 @@ import PointAPI from "@/api/PointAPI";
 import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import { useSettingStore } from "@/store/settingStore";
 import type { Customer } from "@/types/Customer";
@@ -122,8 +142,9 @@ import type { PhotoItem } from "@/types/Photo";
 import type { PointAccount, PointRedeemSku } from "@/types/Point";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
+import { formatWanInteger } from "@/utils/money";
 import { normalizePackageQuantity } from "@/utils/package";
-import { getProductQuantityStep } from "@/utils/product";
+import { getProductPhotoURL, getProductQuantityStep } from "@/utils/product";
 import { uploadPhotoList } from "@/utils/photo";
 import { permissionCodes } from "@/utils/permission";
 
@@ -163,7 +184,7 @@ const pointBalanceText = computed(() => {
 	if (!canReadPointAccount.value) {
 		return "无余额读取权限";
 	}
-	return pointAccountLoading.value ? "正在加载" : `${(pointAccount.value?.balance ?? 0).toLocaleString("zh-CN")} 分`;
+	return pointAccountLoading.value ? "正在加载" : `${formatWanInteger(pointAccount.value?.balance ?? 0)} 分`;
 });
 const scannerVisible = ref(false);
 const scanStatus = ref("点击扫码开始识别。");
@@ -253,6 +274,11 @@ function selectSku(item: PointRedeemSku): void {
 	skuVisible.value = false;
 }
 
+function getProductPhoto(item: PointRedeemSku): string {
+	const product = item.product || item.sku;
+	return product ? getProductPhotoURL(product) : "";
+}
+
 function closeSkuPicker(): void {
 	skuVisible.value = false;
 }
@@ -302,7 +328,7 @@ async function save(): Promise<void> {
 }
 
 function formatPoint(value?: number): string {
-	return `${(value || 0).toLocaleString("zh-CN")} 分`;
+	return `${formatWanInteger(value ?? 0)} 分`;
 }
 
 onMounted(async () => {
@@ -350,6 +376,32 @@ onUnmounted(() => navBarStore.clearRight());
 	max-height: 70vh;
 	overflow: auto;
 	padding: 1rem 0;
+
+	.item {
+		padding: .625rem 1rem;
+		border-radius: 1rem;
+
+		:deep(.t-cell__title) {
+			display: flex;
+			align-items: center;
+		}
+
+		.avatar {
+			width: 2.5rem;
+			height: 2.5rem;
+			border-radius: .5rem !important;
+		}
+
+		.fallback {
+			color: var(--td-brand-color);
+			display: flex;
+			font-size: 1rem;
+			background: var(--td-brand-color-1);
+			font-weight: 600;
+			align-items: center;
+			justify-content: center;
+		}
+	}
 }
 
 :global(html.theme-dark) {

src/pages/point/PointRedemptionDetail.vue

@@ -15,7 +15,7 @@
 			<t-cell title="兑换时间" :note="timeText(item.redeemedAt)" />
 			<t-cell v-if="item.remark" title="备注" :note="item.remark" />
 			<div class="photo-wrap bg-white">
-				<photo-scroller
+				<media-selector
 					:model-value="attachmentUrls"
 					:show-add="false"
 					:show-remove="false"
@@ -62,7 +62,7 @@
 					<t-textarea v-model.trim="returnRemark" maxlength="500" autosize />
 				</t-form-item>
 				<t-form-item label-width="0">
-					<photo-scroller
+					<media-selector
 						v-model="returnPhotoUrls"
 						v-model:photo-items="returnPhotos"
 						:upload="uploadPhotoList"
@@ -82,12 +82,13 @@ import { AttachmentAPI, useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
 import PointAPI from "@/api/PointAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import type { Customer } from "@/types/Customer";
 import type { PhotoItem } from "@/types/Photo";
 import type { PointRedemption, PointRedemptionReturn, PointRedemptionStatus } from "@/types/Point";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
+import { formatWanInteger } from "@/utils/money";
 import { comparePackageQuantity, getPackageQuantityText, normalizePackageQuantity } from "@/utils/package";
 import { uploadPhotoList } from "@/utils/photo";
 import { permissionCodes } from "@/utils/permission";
@@ -193,7 +194,7 @@ async function submitReturn(): Promise<void> {
 }
 
 function formatPoint(value?: number): string {
-	return `${(value || 0).toLocaleString("zh-CN")} 分`;
+	return `${formatWanInteger(value ?? 0)} 分`;
 }
 
 function quantityText(value?: number | string): string {

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"
@@ -160,6 +160,7 @@ import type { Customer } from "@/types/Customer";
 import type { PointRedemption, PointRedemptionStatus } from "@/types/Point";
 import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/utils/date";
 import { Message } from "@/utils/message";
+import { formatWanInteger } from "@/utils/money";
 import { getPackageQuantityText } from "@/utils/package";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { permissionCodes } from "@/utils/permission";
@@ -170,11 +171,11 @@ const route = useRoute();
 const router = useRouter();
 const navBarStore = useNavBarStore();
 const result = reactive({ total: 0, list: [] as PointRedemption[] });
-type DateFilterType = "today" | "yesterday" | "lastWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 	{ label: "今天", value: "today" },
 	{ label: "昨天", value: "yesterday" },
-	{ label: "上周", value: "lastWeek" },
+	{ label: "本周", value: "thisWeek" },
 	{ label: "本月", value: "thisMonth" },
 	{ label: "上个月", value: "lastMonth" },
 	{ label: "全部", value: "all" },
@@ -258,7 +259,7 @@ async function load(): Promise<void> {
 }
 
 function formatPoint(value?: number): string {
-	return `${(value || 0).toLocaleString("zh-CN")} 分`;
+	return `${formatWanInteger(value ?? 0)} 分`;
 }
 
 function quantityText(value?: number | string): string {
@@ -420,8 +421,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #f5f5f8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -430,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;
 
@@ -447,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;
@@ -461,7 +458,6 @@ onUnmounted(() => {
 		gap: 1rem;
 		display: flex;
 		min-height: 70vh;
-		padding-top: 1rem;
 		flex-direction: column;
 
 		.items {

src/pages/point/PointRuleDetail.vue

@@ -101,6 +101,7 @@ import type { EventItem } from "@/types/EventItem";
 import type { PointRule, PointRuleStatus } from "@/types/Point";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
+import { formatWanInteger } from "@/utils/money";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 defineOptions({
@@ -217,7 +218,7 @@ function formatPointValue(value?: number | null): string {
 	if (value === 0) {
 		return "不产生积分流水";
 	}
-	return `${0 < value ? "发放" : "消耗"} ${Math.abs(value)} 分`;
+	return `${0 < value ? "发放" : "消耗"} ${formatWanInteger(Math.abs(value))} 分`;
 }
 
 function formatNumber(value?: number): string {

src/pages/point/PointRuleList.vue

@@ -70,6 +70,7 @@ import { useNavBarStore } from "@/store/navBarStore";
 import type { EventItem } from "@/types/EventItem";
 import type { NavBarAction } from "@/types/NavBarAction";
 import type { PointRule, PointRuleStatus } from "@/types/Point";
+import { formatWanInteger } from "@/utils/money";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { type Page, type PageResult, useUserStore } from "timi-web-api";
 import { Message } from "@/utils/message.ts";
@@ -242,7 +243,7 @@ function getPointText(rule: PointRule): string {
 	if (rule.pointValue === undefined || rule.pointValue === null) {
 		return "?";
 	}
-	return `${0 < rule.pointValue ? "+" : "-"}${Math.abs(rule.pointValue)}`;
+	return `${0 < rule.pointValue ? "+" : "-"}${formatWanInteger(Math.abs(rule.pointValue))}`;
 }
 
 function getStatusText(status?: PointRuleStatus): string {

src/pages/point/PointRuleSort.vue

@@ -52,6 +52,7 @@ import PointAPI from "@/api/PointAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { EventItem } from "@/types/EventItem";
 import type { PointRule } from "@/types/Point";
+import { formatWanInteger } from "@/utils/money";
 import { permissionCodes } from "@/utils/permission";
 
 defineOptions({ name: "PointRuleSort" });
@@ -72,7 +73,7 @@ function getPointText(rule: PointRule): string {
 	if (rule.pointValue === undefined || rule.pointValue === null) {
 		return "未配置";
 	}
-	return (0 < rule.pointValue ? "+" : "") + rule.pointValue;
+	return (0 < rule.pointValue ? "+" : "") + formatWanInteger(rule.pointValue);
 }
 
 async function loadData(): Promise<void> {

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

@@ -9,7 +9,7 @@
 				<t-cell title="状态" :note="getProductStatusText(product.status)" />
 				<t-cell title="备注" :note="Text.display(product.remark)"></t-cell>
 				<t-cell>
-					<photo-scroller
+					<media-selector
 						:model-value="attachmentUrlList"
 						:photo-items="attachmentItemList"
 						title="附件列表"
@@ -28,8 +28,9 @@
 					@click="viewStock"
 				/>
 			</t-cell-group>
-			<t-cell-group title="SKU 列表" theme="card" class="units" v-entrance-transition="210">
+			<t-cell-group title="SKU 列表" theme="card" class="skus" v-entrance-transition="210">
 				<t-cell
+					class="sku"
 					v-for="sku in product.skuList || []"
 					:key="sku.id || sku.code"
 					role="button"
@@ -38,14 +39,18 @@
 					hover
 					@click="openSkuDetail(sku)"
 				>
+					<template #leftIcon>
+						<t-image
+							v-if="getProductPhotoURL(sku)"
+							:src="getProductPhotoURL(sku)"
+							:alt="getSkuTitle(sku)"
+							fit="cover"
+							class="avatar"
+						/>
+						<div v-else class="avatar fallback" v-text="getSkuTitle(sku).slice(0, 1)" />
+					</template>
 					<template #title>
 						<div class="title">
-							<t-tag
-								class="code"
-								size="small"
-								variant="light"
-								:content="sku.code || '无编码'"
-							/>
 							<h5 class="name" v-text="getSkuTitle(sku)" />
 						</div>
 					</template>
@@ -78,38 +83,15 @@
 	<bottom-popup
 		v-model="skuDetailVisible"
 		title="SKU 详情"
-		height="min(88vh, 48rem)"
+		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">
-			<div class="sku-popup-header">
+			<t-cell-group>
-				<div class="sku-heading">
-					<strong v-text="getSkuTitle(selectedSku)" />
-					<span class="code" v-text="selectedSku.code || '无 SKU 编码'" />
-				</div>
-				<t-tag
-					size="small"
-					variant="light-outline"
-					:theme="selectedSku.status === 'ACTIVE' ? 'success' : 'warning'"
-					:content="selectedSku.status === 'ACTIVE' ? '启用' : '停用'"
-				/>
-			</div>
-			<div class="sku-spec-panel">
-				<div class="section-title">
-					<strong>销售规格</strong>
-					<span v-if="selectedSku.specSummary" v-text="`摘要：${selectedSku.specSummary}`" />
-				</div>
-				<div v-if="skuSpecEntries.length" class="sku-spec-list">
-					<div v-for="entry in skuSpecEntries" :key="`${entry.specName}-${entry.valueName}`" class="sku-spec-item">
-						<span class="spec-name" v-text="entry.specName" />
-						<strong v-text="entry.valueName" />
-					</div>
-				</div>
-				<div v-else class="sku-spec-empty" v-text="product?.specList?.length ? '暂无匹配的规格值' : '无多规格产品，使用默认 SKU'" />
-			</div>
-			<t-cell-group title="基本信息" theme="card">
 				<t-cell title="明细名称" :note="selectedSku.name || '未命名 SKU'" />
 				<t-cell title="SKU 编码" :note="selectedSku.code || '无编码'" />
 				<t-cell v-if="selectedSku.barcode" title="SKU 条码" :note="selectedSku.barcode" />
@@ -118,31 +100,24 @@
 				<t-cell v-if="selectedSku.stockEnabled" title="最低库存" :note="`${getProductQuantityText(selectedSku.minStockQuantity)} 基础单位`" />
 				<t-cell v-if="selectedSku.remark" title="备注" :note="Text.display(selectedSku.remark)" />
 			</t-cell-group>
-			<photo-scroller
+			<div class="media-wrap">
-				v-if="skuPhotoItemList.length"
+				<media-selector
-				:model-value="skuPhotoUrlList"
+					v-if="skuPhotoItemList.length"
-				:photo-items="skuPhotoItemList"
+					:model-value="skuPhotoUrlList"
-				title="SKU 图片"
+					:photo-items="skuPhotoItemList"
-				:show-add="false"
+					title="SKU 图片"
-				:show-remove="false"
+					:show-add="false"
-				:show-viewer-actions="false"
+					:show-remove="false"
-			/>
+					:show-viewer-actions="false"
-
+				/>
-			<div class="unit-section">
+			</div>
-				<div class="unit-heading">
+			<div class="unit">
+				<div class="header">
 					<strong>销售单位</strong>
 					<span>采购、销售和库存操作共用</span>
 				</div>
-				<div v-if="selectedSku.unitList?.length" class="unit-list">
+				<product-sku-unit-list v-if="selectedSku.unitList?.length" :unit-list="selectedSku.unitList" />
-					<div v-for="unit in selectedSku.unitList" :key="unit.id || unit.name" class="unit-item">
+				<div v-else class="center-tips" v-text="'暂无销售单位'" />
-						<div class="unit-name">
-							<strong v-text="unit.name || '未命名单位'" />
-							<t-tag v-if="unit.isBase" size="small" theme="primary" variant="light-outline" content="基础" />
-						</div>
-						<div class="unit-meta" v-text="getUnitSummary(unit)" />
-					</div>
-				</div>
-				<div v-else class="unit-empty" v-text="'暂无销售单位'" />
 			</div>
 		</div>
 	</bottom-popup>
@@ -154,15 +129,21 @@ import { BottomPopup } from "timi-tdesign-mobile";
 import { useUserStore } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductProfile from "@/pages/product/component/ProductProfile.vue";
+import ProductSkuUnitList from "@/pages/product/component/ProductSkuUnitList.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { NavBarAction } from "@/types/NavBarAction";
 import type { PhotoItem } from "@/types/Photo";
-import type { Product, ProductSku, ProductSkuUnit } from "@/types/Product";
+import type { Product, ProductSku } from "@/types/Product";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
-import { formatProductAmount, getProductQuantityText, getProductSkuSpecEntries, getProductStatusText } from "@/utils/product";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
+import {
+	getProductPhotoURL,
+	getProductQuantityText,
+	getProductStatusText
+} from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { Text } from "timi-web";
@@ -177,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 => ({
@@ -186,7 +168,6 @@ const attachmentItemList = computed<PhotoItem[]>(() => (product.value?.attachmen
 		url: getAttachmentReadURL(item.id || "", 90)
 	})));
 const attachmentUrlList = computed(() => attachmentItemList.value.map(item => item.url));
-const skuSpecEntries = computed(() => getProductSkuSpecEntries(selectedSku.value || { specValueIdList: [] }, product.value?.specList || []));
 const skuPhotoItemList = computed<PhotoItem[]>(() => (selectedSku.value?.attachmentList || [])
 	.filter(item => !!item.id)
 	.map(item => ({
@@ -203,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;
 });
@@ -253,14 +235,6 @@ function closeSkuDetail(): void {
 	skuDetailVisible.value = false;
 }
 
-function getUnitSummary(unit: ProductSkuUnit): string {
-	const quantityText = unit.isBase ? "基础单位" : `1 ${unit.name || "单位"} = ${getProductQuantityText(unit.baseQuantityPerUnit)} 基础单位`;
-	const priceText = unit.salePrice === null || unit.salePrice === undefined ? "未定价" : `￥${formatProductAmount(unit.salePrice)}`;
-	const saleText = unit.allowSale ? "可销售" : "停售";
-	const purchaseText = unit.allowPurchase ? "可采购" : "禁采购";
-	return `${quantityText} · ${priceText} · ${saleText} · ${purchaseText}`;
-}
-
 function getCurrentRouteDepth(): number {
 	const transitionDepth = Array.isArray(route.query.transitionDepth)
 		? route.query.transitionDepth[0]
@@ -285,6 +259,8 @@ function disable(): void {
 		onConfirm: async () => {
 			try {
 				await ProductAPI.disable(id);
+				emitListDataChanged(listDataEventKeys.productChanged, id);
+				emitListDataChanged(listDataEventKeys.productStockChanged, id);
 				await load();
 				Message.success("产品已停用");
 			} catch (error) {
@@ -296,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);
@@ -317,174 +319,62 @@ onUnmounted(() => navBarStore.clearRight());
 	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
 	flex-direction: column;
 
-	.units {
+	.skus {
 
-		.title {
+		.sku {
-			gap: .5rem;
+			padding: 10px;
-			display: flex;
-			align-items: center;
 
-			.name {
+			.avatar {
-				margin: 0;
+				width: 3.5rem;
+				height: 3.5rem;
 			}
-		}
 
-		.tags {
+			.title {
-			gap: .5rem;
+				gap: .5rem;
-			display: flex;
+				display: flex;
-			flex-wrap: wrap;
+				align-items: center;
+
+				.name {
+					margin: 0;
+				}
+			}
+
+			.tags {
+				gap: .5rem;
+				display: flex;
+				flex-wrap: wrap;
+			}
 		}
 	}
 }
 
 .sku-popup {
+	padding: 0 0 calc(1rem + env(safe-area-inset-bottom, 0px));
 	max-height: 100%;
-	padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
 	overflow-y: auto;
 
-	.sku-popup-header {
+	.media-wrap {
-		gap: .75rem;
+		margin: 0 1rem;
-		display: flex;
-		padding: 0 1rem .75rem;
-		align-items: center;
-		justify-content: space-between;
 	}
 
-	.sku-heading {
+	.unit {
-		gap: .5rem;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-
-		strong {
-			font-size: 1.125rem;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-
-		.code {
-			color: var(--td-text-color-secondary);
-			font-size: .75rem;
-		}
-	}
-
-	.sku-spec-panel {
-		margin: 0 .75rem .75rem;
-		padding: .75rem;
-		background: var(--td-bg-color-secondarycontainer);
-		border-radius: .875rem;
-	}
-
-	.section-title {
-		gap: .5rem;
-		display: flex;
-		align-items: baseline;
-		justify-content: space-between;
-
-		span {
-			color: var(--td-text-color-secondary);
-			font-size: .75rem;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-	}
-
-	.sku-spec-list {
-		gap: .5rem;
-		display: grid;
-		margin-top: .625rem;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-
-	.sku-spec-item {
-		gap: .375rem;
-		min-width: 0;
-		display: flex;
-		padding: .5rem .625rem;
-		align-items: baseline;
-		background: var(--td-bg-color-container);
-		border-radius: .625rem;
-
-		.spec-name {
-			color: var(--td-text-color-secondary);
-			font-size: .75rem;
-			flex: none;
-		}
-
-		strong {
-			min-width: 0;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-	}
-
-	.sku-spec-empty,
-	.unit-empty {
-		color: var(--td-text-color-secondary);
-		font-size: .75rem;
-	}
-
-	.sku-spec-empty {
-		margin-top: .5rem;
-	}
-
-	:deep(.t-cell-group) {
-		margin: 0 0 .75rem;
-	}
-
-	:deep(.photo-scroller) {
-		margin: 0 .75rem .75rem;
-	}
-
-	.unit-section {
 		margin-top: .75rem;
 		border-top: 1px solid var(--td-component-border);
-	}
 
-	.unit-heading {
+		.header {
-		gap: .5rem;
+			gap: .5rem;
-		display: flex;
+			display: flex;
-		padding: .75rem 1rem .5rem;
+			padding: .75rem 1rem .5rem;
-		align-items: baseline;
+			align-items: baseline;
-		justify-content: space-between;
+			justify-content: space-between;
 
-		span {
+			span {
-			color: var(--td-text-color-secondary);
+				color: var(--td-text-color-secondary);
-			font-size: .75rem;
+				font-size: .75rem;
-			text-align: right;
+				text-align: right;
+			}
 		}
-	}
 
-	.unit-list {
-		gap: .5rem;
-		display: flex;
-		padding: 0 1rem .75rem;
-		flex-direction: column;
-	}
-
-	.unit-item {
-		gap: .375rem;
-		display: flex;
-		padding: .625rem .75rem;
-		background: var(--td-bg-color-secondarycontainer);
-		border-radius: .75rem;
-		flex-direction: column;
-	}
-
-	.unit-name {
-		gap: .5rem;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.unit-meta {
-		color: var(--td-text-color-secondary);
-		font-size: .75rem;
-		line-height: 1.5;
 	}
 }
 

src/pages/product/ProductEdit.vue

@@ -23,7 +23,7 @@
 				<t-textarea v-model="form.remark" borderless maxlength="255" autosize placeholder="可填写产品说明" />
 			</t-form-item>
 			<t-form-item label-width="0">
-				<photo-scroller
+				<media-selector
 					v-model="attachmentUrlList"
 					v-model:photo-items="attachmentItemList"
 					title="产品公共图片及附件"
@@ -31,8 +31,10 @@
 					:loading="isAttachmentUploading"
 					:show-viewer-actions="false"
 					:add-actions="attachmentAddActions"
-					@add-photo="openAttachmentPicker('PHOTO')"
+					@add="openAttachmentPicker('OTHER')"
-					@add-other="openAttachmentPicker('OTHER')"
+					@action="handleAttachmentAction"
+					@capture-photo="capturePhoto"
+					@capture-video="captureVideo"
 				/>
 			</t-form-item>
 			<t-form-item label="纯色封面" label-width="8rem" content-align="right">
@@ -64,7 +66,6 @@
 							v-model="spec.name"
 							borderless
 							maxlength="32"
-							:readonly="!!spec.id"
 							placeholder="如 颜色、尺寸"
 						/>
 						<t-button
@@ -83,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">
@@ -183,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"
@@ -197,7 +200,9 @@
 		>
 			<t-color-picker v-if="coverColorPickerVisible" v-model="coverColorDraft" format="HEX" type="multiple" :swatch-colors="colorSwatchList" @palette-bar-change="updateCoverColorDraftFromPalette" />
 		</bottom-popup>
-		<input ref="attachmentInputRef" class="file-input" type="file" accept="image/*" @change="handleAttachmentSelected" />
+		<input ref="attachmentInputRef" class="file-input" type="file" accept="*/*" @change="handleAttachmentSelected" />
+		<input ref="photoInputRef" class="file-input" type="file" accept="image/*" capture="environment" @change="handleAttachmentSelected" />
+		<input ref="videoInputRef" class="file-input" type="file" accept="video/*" capture="environment" @change="handleAttachmentSelected" />
 	</div>
 </template>
 
@@ -206,10 +211,11 @@ import { BottomPopup } from "timi-tdesign-mobile";
 import { DialogPlugin, type ColorObject } from "tdesign-mobile-vue";
 import { type Attachment, AttachmentAPI, useUserStore } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductSkuEditor from "@/pages/product/component/ProductSkuEditor.vue";
 import ProductSkuUnitEditor from "@/pages/product/component/ProductSkuUnitEditor.vue";
 import ProductSkuUnitBatchEditor from "@/pages/product/component/ProductSkuUnitBatchEditor.vue";
+import type { MediaSelectorAddAction } from "@/components/mediaSelector/types";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { PhotoItem } from "@/types/Photo";
 import type { Product, ProductAttachmentType, ProductCategory, ProductSku, ProductSkuUnit, ProductSpec, ProductType } from "@/types/Product";
@@ -217,9 +223,11 @@ import type { ProductAttachmentItem, ProductForm, ProductSkuForm as SkuForm, Pro
 import { compressUploadImage } from "@/utils/imageCompression";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { formatProductAmount, getProductStatusText, getProductTypeText, normalizeProductQuantity, parseProductAmount } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
+import { saveCapturedFilesFromInput } from "@/utils/twaBridge";
 
 type PickerValue = string | number;
 
@@ -252,6 +260,8 @@ const typePickerVisible = ref(false);
 const categoryPickerVisible = ref(false);
 const statusPickerVisible = ref(false);
 const attachmentInputRef = ref<HTMLInputElement>();
+const photoInputRef = ref<HTMLInputElement>();
+const videoInputRef = ref<HTMLInputElement>();
 const attachmentPickerTarget = ref<ProductAttachmentType>("PHOTO");
 const isAttachmentUploading = ref(false);
 const coverColorPickerVisible = ref(false);
@@ -269,7 +279,6 @@ const statusOptions = [{ label: "启用", value: "ACTIVE" }, { label: "停用",
 const colorSwatchList = ["#2F88FF", "#0EA5E9", "#10B981", "#22C55E", "#F59E0B", "#F97316", "#EF4444", "#EC4899", "#8B5CF6", "#64748B"];
 const selectedCategoryName = computed(() => categoryList.value.find(item => item.id === form.categoryId)?.name || "不设置分类");
 const attachmentAddActions = [
-	{ icon: "camera", text: "产品图片", emit: "add-photo", theme: "primary" },
 	{ icon: "file-attachment", text: "其他文件", emit: "add-other", theme: "default" }
 ] as const;
 const attachmentItemList = ref<ProductAttachmentItem[]>([]);
@@ -298,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>();
 
@@ -318,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",
@@ -336,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
 	};
 }
@@ -346,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
+		}))
 	};
 }
 
@@ -377,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] = "";
 }
 
@@ -409,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;
 }
 
@@ -418,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,
@@ -435,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 统一配置销售单位`);
 }
@@ -444,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;
 	}
@@ -455,7 +477,7 @@ function removeSku(index: number): void {
 	}
 	form.skuList.splice(index, 1);
 	if (sku.id) {
-		Message.success("SKU 已移除，保存后将停用");
+		Message.success("SKU 已移除，保存后由后端检查引用并处理");
 	}
 }
 
@@ -552,6 +574,22 @@ function openAttachmentPicker(target: ProductAttachmentType): void {
 	attachmentInputRef.value?.click();
 }
 
+function capturePhoto(): void {
+	attachmentPickerTarget.value = "PHOTO";
+	photoInputRef.value?.click();
+}
+
+function captureVideo(): void {
+	attachmentPickerTarget.value = "OTHER";
+	videoInputRef.value?.click();
+}
+
+function handleAttachmentAction(action: MediaSelectorAddAction): void {
+	if (action.emit === "add-other") {
+		openAttachmentPicker("OTHER");
+	}
+}
+
 function openCoverColorPicker(): void {
 	coverColorDraft.value = solidColorCoverColor.value || DEFAULT_COVER_COLOR;
 	coverColorPickerVisible.value = true;
@@ -624,11 +662,12 @@ 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];
 		if (tempFile?.id) {
-			attachmentItemList.value.push({ attachType: attachmentPickerTarget.value, tempFileId: tempFile.id, url: AttachmentAPI.getTempReadURL(tempFile.id) });
+			attachmentItemList.value.push({ attachType: attachmentPickerTarget.value, mimeType: file.type, tempFileId: tempFile.id, url: AttachmentAPI.getTempReadURL(tempFile.id) });
 		}
 	} catch (error) {
 		Message.error(getErrorMessage(error, "产品附件上传失败"));
@@ -640,24 +679,33 @@ async function handleAttachmentSelected(event: Event): Promise<void> {
 
 function buildAttachmentList(): Attachment[] {
 	return attachmentItemList.value.flatMap(item => {
+		if (item.tempFileId) {
+			return [{
+				...item.attachment,
+				attachType: item.attachType || item.attachment?.attachType || "PHOTO",
+				tempFileId: item.tempFileId,
+				metadata: item.isSolidColorCover && item.solidColor ? { purpose: SOLID_COLOR_COVER_PURPOSE, color: item.solidColor } : undefined
+			} as Attachment];
+		}
 		if (item.attachment) {
 			return [{ ...item.attachment, attachType: item.attachType || item.attachment.attachType || "PHOTO" }];
 		}
-		if (item.tempFileId) {
-			return [{ attachType: item.attachType, tempFileId: item.tempFileId, metadata: item.isSolidColorCover && item.solidColor ? { purpose: SOLID_COLOR_COVER_PURPOSE, color: item.solidColor } : undefined }];
-		}
 		return [];
 	});
 }
 
 function buildSkuAttachmentList(photoItemList: PhotoItem[]): Attachment[] {
 	return photoItemList.flatMap(item => {
+		if (item.tempFileId) {
+			return [{
+				...item.attachment,
+				attachType: item.attachType || item.attachment?.attachType || "PHOTO",
+				tempFileId: item.tempFileId
+			} as Attachment];
+		}
 		if (item.attachment) {
 			return [{ ...item.attachment, attachType: item.attachType || item.attachment.attachType || "PHOTO" } as Attachment];
 		}
-		if (item.tempFileId) {
-			return [{ attachType: item.attachType || "PHOTO", tempFileId: item.tempFileId } as Attachment];
-		}
 		return [];
 	});
 }
@@ -833,7 +881,7 @@ function validate(): boolean {
 			return false;
 		}
 	}
-	if (!form.skuList.length) {
+	if (isCreateMode.value && !form.skuList.length) {
 		Message.warning("至少需要一个 SKU");
 		return false;
 	}
@@ -895,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;
 }
@@ -924,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
 	};
 }
 
@@ -939,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
 	};
@@ -953,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;
 			}
 		}
 	}
@@ -974,6 +1058,8 @@ async function save(): Promise<void> {
 				generateSkuList([], true);
 			}
 			const productId = await ProductAPI.create(buildProductPayload(form.skuList.map(buildSkuPayload), true));
+			emitListDataChanged(listDataEventKeys.productChanged, productId);
+			emitListDataChanged(listDataEventKeys.productStockChanged, productId);
 			Message.success("产品已创建");
 			await router.replace(`/management/products/${productId}`);
 			return;
@@ -982,23 +1068,19 @@ async function save(): Promise<void> {
 		await syncSpecs(productId!);
 		normalizeSkuSpecValueIds();
 		const latest = await ProductAPI.detail(productId!);
-		const previousSkuIdSet = new Set((latest.skuList || []).map(sku => sku.id).filter((id): id is string => !!id));
 		if (form.specList.length) {
 			const defaultSku = latest.skuList?.find(sku => !sku.specValueIdList?.length);
 			if (defaultSku?.id && form.skuList[0] && !form.skuList[0].id) {
 				form.skuList[0].id = defaultSku.id;
 			}
 			generateSkuList(latest.skuList || [], true);
-		} else if (!form.skuList.length) {
+		} 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));
+		emitListDataChanged(listDataEventKeys.productChanged, productId);
-		const disabledSkuIdList = [...previousSkuIdSet].filter(id => !retainedSkuIdSet.has(id));
+		emitListDataChanged(listDataEventKeys.productStockChanged, productId);
-		await Promise.all(disabledSkuIdList.map(async skuId => await ProductAPI.skuDisable(skuId)));
 		Message.success(isCreateMode.value ? "产品已创建" : "产品已保存");
 		await router.replace(`/management/products/${productId}`);
 	} catch (error) {
@@ -1135,12 +1217,16 @@ onUnmounted(() => navBarStore.clearRight());
 				}
 			}
 
-			.tags {
+		.tags {
-				gap: .5rem;
+			gap: .5rem;
-				display: flex;
+			display: flex;
-				flex-wrap: wrap;
+			flex-wrap: wrap;
+
+			.value-name {
+				width: 5rem;
 			}
 		}
+		}
 
 		.add {
 			--td-button-border-radius: 1rem;

src/pages/product/ProductList.vue

@@ -1,6 +1,6 @@
 <template>
-	<div v-can="permissionCodes.product.read" class="product-list">
+	<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"
@@ -68,11 +68,6 @@
 					</template>
 					<template #description>
 						<div class="description">
-							<t-tag
-								size="small"
-								variant="outline"
-								:content="item.code"
-							/>
 							<t-tag
 								size="small"
 								variant="outline"
@@ -86,12 +81,13 @@
 			<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
-	<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
+	<nav-bar-action-menu v-if="route.name === 'ProductList' && canCreate" :actions="actionList" />
 </template>
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
 import { useUserStore } from "timi-web-api";
+import { onBeforeRouteLeave } from "vue-router";
 import ProductAPI from "@/api/ProductAPI";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -99,12 +95,15 @@ import type { NavBarAction } from "@/types/NavBarAction";
 import type { Product, ProductCategory, ProductStatus, ProductType } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { getProductPhotoURL, getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
+import { events, isCurrentStoreEvent, listDataEventKeys, type ListDataChangedPayload } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
 defineOptions({ name: "ProductList" });
 
 const router = useRouter();
+const route = useRoute();
+const productListRef = ref<HTMLElement | null>(null);
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.product.create));
@@ -129,6 +128,46 @@ const isRefreshing = ref(false);
 const isNoMore = ref(false);
 let keywordTimer: number | undefined;
 let requestToken = 0;
+let savedPageScrollTop: number | undefined;
+let eventRefreshPromise: Promise<void> | undefined;
+let hasPendingEventRefresh = false;
+let unregisterProductListEvent: (() => void) | undefined;
+let isDisposed = false;
+
+function getProductListPage(): HTMLElement | null {
+	return productListRef.value?.closest<HTMLElement>(".page") || null;
+}
+
+function savePageScrollPosition(): void {
+	const page = getProductListPage();
+	if (!page) {
+		return;
+	}
+
+	savedPageScrollTop = page.scrollTop;
+}
+
+function restorePageScrollPosition(): void {
+	if (savedPageScrollTop === undefined) {
+		return;
+	}
+
+	const scrollTop = savedPageScrollTop;
+	requestAnimationFrame(() => {
+		const page = getProductListPage();
+		if (!page) {
+			return;
+		}
+
+		page.scrollTop = scrollTop;
+		savedPageScrollTop = undefined;
+	});
+}
+
+function syncNavBar(): void {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(route.name === "ProductList" && canCreate.value);
+}
 
 const statusOptions = [
 	{ label: "全部状态", value: "ALL" },
@@ -152,36 +191,81 @@ async function loadCategories(): Promise<void> {
 	categoryList.value = result.list || [];
 }
 
-async function fetch(reset = false): Promise<void> {
+async function fetch(reset = false, preserveScroll = false): Promise<void> {
 	if (!reset && (isLoading.value || isNoMore.value)) {
 		return;
 	}
+	const loadedPageCount = reset && preserveScroll ? Math.max(pageIndex.value, 1) : 1;
+	const preserveScrollTop = preserveScroll ? getProductListPage()?.scrollTop : undefined;
 	if (reset) {
 		pageIndex.value = 0;
-		productList.value = [];
 		total.value = 0;
 		isNoMore.value = false;
+		if (!preserveScroll) {
+			const page = getProductListPage();
+			if (page) {
+				page.scrollTop = 0;
+			}
+		}
 	}
 	const token = ++requestToken;
 	isLoading.value = true;
 	try {
 		const pageSize = 15;
-		const result = await ProductAPI.list({
+		if (reset && preserveScroll) {
-			index: pageIndex.value,
+			const nextList: Product[] = [];
-			size: pageSize,
+			let nextTotal = 0;
-			keyword: keyword.value || undefined,
+			let nextPageIndex = 0;
-			status: status.value === "ALL" ? undefined : status.value as ProductStatus,
+			for (let index = 0; index < loadedPageCount; index += 1) {
-			productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
+				const result = await ProductAPI.list({
-			categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
+					index,
-		});
+					size: pageSize,
-		if (token !== requestToken) {
+					keyword: keyword.value || undefined,
-			return;
+					status: status.value === "ALL" ? undefined : status.value as ProductStatus,
+					productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
+					categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
+				});
+				if (token !== requestToken) {
+					return;
+				}
+				const list = result.list || [];
+				nextList.push(...list);
+				nextTotal = result.total || 0;
+				nextPageIndex += 1;
+				if (list.length < pageSize || nextTotal <= nextList.length) {
+					break;
+				}
+			}
+			productList.value = nextList;
+			total.value = nextTotal;
+			pageIndex.value = nextPageIndex;
+			isNoMore.value = nextList.length < pageSize || nextList.length === nextTotal || nextTotal < nextList.length;
+		} else {
+			const result = await ProductAPI.list({
+				index: pageIndex.value,
+				size: pageSize,
+				keyword: keyword.value || undefined,
+				status: status.value === "ALL" ? undefined : status.value as ProductStatus,
+				productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
+				categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
+			});
+			if (token !== requestToken) {
+				return;
+			}
+			const list = result.list || [];
+			productList.value = reset ? list : productList.value.concat(list);
+			total.value = result.total || 0;
+			pageIndex.value += 1;
+			isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
+		}
+		if (preserveScrollTop !== undefined) {
+			requestAnimationFrame(() => {
+				const page = getProductListPage();
+				if (page) {
+					page.scrollTop = preserveScrollTop;
+				}
+			});
 		}
-		const list = result.list || [];
-		productList.value = reset ? list : productList.value.concat(list);
-		total.value = result.total || 0;
-		pageIndex.value += 1;
-		isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
 	} finally {
 		if (token === requestToken) {
 			isLoading.value = false;
@@ -189,6 +273,32 @@ async function fetch(reset = false): Promise<void> {
 	}
 }
 
+function startEventRefresh(): void {
+	if (isDisposed) {
+		return;
+	}
+	eventRefreshPromise = fetch(true, true)
+		.catch(error => Message.error(getErrorMessage(error, "产品列表加载失败")))
+		.finally(() => {
+			eventRefreshPromise = undefined;
+			if (!isDisposed && hasPendingEventRefresh) {
+				hasPendingEventRefresh = false;
+				startEventRefresh();
+			}
+		});
+}
+
+function requestEventRefresh(payload?: ListDataChangedPayload): void {
+	if (!isCurrentStoreEvent(payload)) {
+		return;
+	}
+	if (eventRefreshPromise) {
+		hasPendingEventRefresh = true;
+		return;
+	}
+	startEventRefresh();
+}
+
 async function refresh(): Promise<void> {
 	try {
 		await fetch(true);
@@ -265,8 +375,8 @@ async function toDetail(item: Product): Promise<void> {
 }
 
 onMounted(async () => {
-	navBarStore.clearRight();
+	unregisterProductListEvent = events.register(listDataEventKeys.productChanged, (payload: ListDataChangedPayload) => requestEventRefresh(payload));
-	navBarStore.setCustomRightVisible(canCreate.value);
+	syncNavBar();
 	try {
 		await Promise.all([loadCategories(), fetch(true)]);
 	} catch (error) {
@@ -274,6 +384,15 @@ onMounted(async () => {
 	}
 });
 
+onActivated(() => {
+	restorePageScrollPosition();
+	syncNavBar();
+});
+
+onDeactivated(() => {
+	savePageScrollPosition();
+});
+
 watch(keyword, () => {
 	window.clearTimeout(keywordTimer);
 	keywordTimer = window.setTimeout(async () => {
@@ -285,7 +404,15 @@ watch(keyword, () => {
 	}, 300);
 });
 
+onBeforeRouteLeave(() => {
+	savePageScrollPosition();
+	navBarStore.clearRight();
+});
+
 onUnmounted(() => {
+	isDisposed = true;
+	unregisterProductListEvent?.();
+	unregisterProductListEvent = undefined;
 	navBarStore.clearRight();
 	window.clearTimeout(keywordTimer);
 	requestToken += 1;
@@ -304,8 +431,6 @@ onUnmounted(() => {
 		display: flex;
 		padding: .75rem 1rem;
 		position: sticky;
-		background: #F5F5F8;
-		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
 		.keyword {
@@ -313,7 +438,6 @@ onUnmounted(() => {
 
 			border: 1px solid var(--td-component-border);
 			z-index: 1;
-			background: var(--td-bg-color-container);
 			border-radius: 1rem;
 		}
 
@@ -321,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

@@ -9,13 +9,24 @@
 				</template>
 			</product-profile>
 			<t-cell-group theme="card" title="库存" v-entrance-transition="70">
-				<t-cell
+				<t-cell v-if="1 < unitList.length" class="units" title="显示单位">
-					v-if="1 < unitList.length"
+					<template #note>
-					title="显示单位"
+						<div class="options" role="group" aria-label="选择库存展示单位">
-					:note="selectedUnitName"
+							<t-button
-					arrow
+								v-for="item in unitList"
-					@click="openUnitPicker"
+								:key="item.id"
-				/>
+								size="extra-small"
+								:theme="selectedUnit?.id === item.id ? 'primary' : 'default'"
+								:variant="selectedUnit?.id === item.id ? 'base' : 'outline'"
+								:aria-label="`切换到${item.name || '未命名单位'}`"
+								:aria-pressed="selectedUnit?.id === item.id"
+								@click="selectUnit(item.id || '')"
+							>
+								<span v-text="item.name || '未命名单位'" />
+							</t-button>
+						</div>
+					</template>
+				</t-cell>
 				<t-cell class="empty-cell-title-margin">
 					<template #title>
 						<span></span>
@@ -44,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"
@@ -81,15 +93,6 @@
 			:operation="operationType"
 			@success="loadAll"
 		/>
-		<t-popup v-model="unitPickerVisible" placement="bottom">
-			<t-picker
-				v-model="unitPickerDraft"
-				:columns="unitPickerOptions"
-				title="选择库存展示单位"
-				@cancel="unitPickerVisible = false"
-				@confirm="confirmUnit"
-			/>
-		</t-popup>
 	</div>
 </template>
 
@@ -98,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";
@@ -107,7 +111,6 @@ import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
 type ManualStockOperation = Extract<StockOperationType, "MANUAL_IN" | "MANUAL_OUT" | "STOCKTAKE_GAIN" | "STOCKTAKE_LOSS">;
-type PickerValue = string | number;
 
 defineOptions({ name: "ProductStockDetail" });
 
@@ -122,15 +125,12 @@ const isLoading = ref(false);
 const operationVisible = ref(false);
 const operationType = ref<ManualStockOperation>("MANUAL_IN");
 const selectedUnitId = shallowRef("");
-const unitPickerVisible = shallowRef(false);
-const unitPickerDraft = ref<PickerValue[]>([]);
 const canOperate = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
 const unitList = computed(() => (sku.value?.unitList || []).filter(unit => !!unit.id));
 const selectedUnit = computed<ProductSkuUnit | undefined>(() => unitList.value.find(unit => unit.id === selectedUnitId.value)
 	|| unitList.value.find(unit => unit.isBase)
 	|| unitList.value[0]);
 const selectedUnitName = computed(() => selectedUnit.value?.name || "基础单位");
-const unitPickerOptions = computed(() => [unitList.value.map(unit => ({ label: unit.name || "未命名单位", value: unit.id || "" }))]);
 const displayStock = computed(() => ({
 	onHandQuantity: getStockQuantityText(stock.value?.onHandQuantity),
 	availableQuantity: getStockQuantityText(stock.value?.availableQuantity),
@@ -173,20 +173,10 @@ function setDefaultUnit(nextSku: ProductSku): void {
 	selectedUnitId.value = nextUnitList.find(unit => unit.isBase)?.id || nextUnitList[0]?.id || "";
 }
 
-function openUnitPicker(): void {
+function selectUnit(unitId: string): void {
-	if (1 >= unitList.value.length) {
-		return;
-	}
-	unitPickerDraft.value = [selectedUnit.value?.id || ""];
-	unitPickerVisible.value = true;
-}
-
-function confirmUnit(value: PickerValue[]): void {
-	const unitId = String(value[0] || "");
 	if (unitList.value.some(unit => unit.id === unitId)) {
 		selectedUnitId.value = unitId;
 	}
-	unitPickerVisible.value = false;
 }
 
 async function loadAll(): Promise<void> {
@@ -211,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)
 			}
 		});
@@ -223,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)
@@ -341,6 +333,17 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
+	.units {
+
+		.options {
+			--td-button-border-radius: .5rem;
+
+			gap: .5rem;
+			display: flex;
+			flex-wrap: wrap;
+		}
+	}
+
 	.actions-wrap {
 
 		:deep(.content) {

src/pages/product/ProductStockList.vue

@@ -1,16 +1,15 @@
 <template>
-	<div v-can="permissionCodes.productStock.read" class="product-stock-list">
+	<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"
@@ -20,11 +19,11 @@
 		>
 			<t-cell-group v-if="productList.length" theme="card" class="list fix-last-cell-line">
 				<t-cell
+					class="item"
 					v-for="(item, index) in productList"
 					:key="item.productId"
+					:title="item.productName || '未命名产品'"
 					arrow
-					hover
-					class="item"
 					v-entrance-transition="index * 30"
 					@click="toSkuList(item)"
 				>
@@ -38,12 +37,6 @@
 						/>
 						<div v-else class="avatar fallback" v-text="(item.productName || '产').slice(0, 1)" />
 					</template>
-					<template #title>
-						<div class="title">
-							<strong v-text="item.productName || '未命名产品'" />
-							<t-tag size="small" variant="outline" :content="item.productCode || '无产品编码'" />
-						</div>
-					</template>
 					<template #description>
 						<div class="stock">
 							<span class="on-hand">
@@ -70,11 +63,13 @@
 
 <script setup lang="ts">
 import { useUserStore } from "timi-web-api";
+import { onBeforeRouteLeave } from "vue-router";
 import ProductAPI from "@/api/ProductAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { ProductStockProduct } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { getProductPhotoURL, getProductQuantityText } from "@/utils/product";
+import { events, isCurrentStoreEvent, listDataEventKeys, type ListDataChangedPayload } from "@/utils/listDataEvents";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -82,6 +77,7 @@ defineOptions({ name: "ProductStockList" });
 
 const router = useRouter();
 const route = useRoute();
+const productStockListRef = ref<HTMLElement | null>(null);
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const keyword = ref("");
@@ -93,6 +89,41 @@ const isRefreshing = ref(false);
 const isNoMore = ref(false);
 let keywordTimer: number | undefined;
 let requestToken = 0;
+let savedPageScrollTop: number | undefined;
+let eventRefreshPromise: Promise<void> | undefined;
+let hasPendingEventRefresh = false;
+let unregisterProductStockListEvent: (() => void) | undefined;
+let isDisposed = false;
+
+function getProductStockListPage(): HTMLElement | null {
+	return productStockListRef.value?.closest<HTMLElement>(".page") || null;
+}
+
+function savePageScrollPosition(): void {
+	const page = getProductStockListPage();
+	if (!page) {
+		return;
+	}
+
+	savedPageScrollTop = page.scrollTop;
+}
+
+function restorePageScrollPosition(): void {
+	if (savedPageScrollTop === undefined) {
+		return;
+	}
+
+	const scrollTop = savedPageScrollTop;
+	requestAnimationFrame(() => {
+		const page = getProductStockListPage();
+		if (!page) {
+			return;
+		}
+
+		page.scrollTop = scrollTop;
+		savedPageScrollTop = undefined;
+	});
+}
 
 const emptyText = computed(() => isLoading.value ? "正在加载产品" : keyword.value ? "未找到匹配产品" : "暂无启用库存管理的产品");
 
@@ -100,33 +131,75 @@ function getCurrentRouteDepth(): number {
 	return Number(route.meta.depth ?? 0);
 }
 
-async function fetch(reset = false): Promise<void> {
+async function fetch(reset = false, preserveScroll = false): Promise<void> {
 	if (!reset && (isLoading.value || isNoMore.value)) {
 		return;
 	}
+	const loadedPageCount = reset && preserveScroll ? Math.max(pageIndex.value, 1) : 1;
+	const preserveScrollTop = preserveScroll ? getProductStockListPage()?.scrollTop : undefined;
 	if (reset) {
 		pageIndex.value = 0;
-		productList.value = [];
 		total.value = 0;
 		isNoMore.value = false;
+		if (!preserveScroll) {
+			const page = getProductStockListPage();
+			if (page) {
+				page.scrollTop = 0;
+			}
+		}
 	}
 	const token = ++requestToken;
 	isLoading.value = true;
 	try {
 		const pageSize = 15;
-		const result = await ProductAPI.stockProductList({
+		if (reset && preserveScroll) {
-			index: pageIndex.value,
+			const nextList: ProductStockProduct[] = [];
-			size: pageSize,
+			let nextTotal = 0;
-			keyword: keyword.value || undefined
+			let nextPageIndex = 0;
-		});
+			for (let index = 0; index < loadedPageCount; index += 1) {
-		if (token !== requestToken) {
+				const result = await ProductAPI.stockProductList({
-			return;
+					index,
+					size: pageSize,
+					keyword: keyword.value.trim() || undefined
+				});
+				if (token !== requestToken) {
+					return;
+				}
+				const list = result.list || [];
+				nextList.push(...list);
+				nextTotal = result.total || 0;
+				nextPageIndex += 1;
+				if (list.length < pageSize || nextTotal <= nextList.length) {
+					break;
+				}
+			}
+			productList.value = nextList;
+			total.value = nextTotal;
+			pageIndex.value = nextPageIndex;
+			isNoMore.value = nextList.length < pageSize || nextList.length === nextTotal || nextTotal < nextList.length;
+		} else {
+			const result = await ProductAPI.stockProductList({
+				index: pageIndex.value,
+				size: pageSize,
+				keyword: keyword.value.trim() || undefined
+			});
+			if (token !== requestToken) {
+				return;
+			}
+			const list = result.list || [];
+			productList.value = reset ? list : productList.value.concat(list);
+			total.value = result.total || 0;
+			pageIndex.value += 1;
+			isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
+		}
+		if (preserveScrollTop !== undefined) {
+			requestAnimationFrame(() => {
+				const page = getProductStockListPage();
+				if (page) {
+					page.scrollTop = preserveScrollTop;
+				}
+			});
 		}
-		const list = result.list || [];
-		productList.value = reset ? list : productList.value.concat(list);
-		total.value = result.total || 0;
-		pageIndex.value += 1;
-		isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
 	} finally {
 		if (token === requestToken) {
 			isLoading.value = false;
@@ -134,6 +207,32 @@ async function fetch(reset = false): Promise<void> {
 	}
 }
 
+function startEventRefresh(): void {
+	if (isDisposed) {
+		return;
+	}
+	eventRefreshPromise = fetch(true, true)
+		.catch(error => Message.error(getErrorMessage(error, "产品列表加载失败")))
+		.finally(() => {
+			eventRefreshPromise = undefined;
+			if (!isDisposed && hasPendingEventRefresh) {
+				hasPendingEventRefresh = false;
+				startEventRefresh();
+			}
+		});
+}
+
+function requestEventRefresh(payload?: ListDataChangedPayload): void {
+	if (!isCurrentStoreEvent(payload)) {
+		return;
+	}
+	if (eventRefreshPromise) {
+		hasPendingEventRefresh = true;
+		return;
+	}
+	startEventRefresh();
+}
+
 async function refresh(): Promise<void> {
 	try {
 		await fetch(true);
@@ -156,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 },
@@ -164,6 +271,7 @@ async function toSkuList(item: ProductStockProduct): Promise<void> {
 }
 
 onMounted(async () => {
+	unregisterProductStockListEvent = events.register(listDataEventKeys.productStockChanged, (payload: ListDataChangedPayload) => requestEventRefresh(payload));
 	navBarStore.clearRight();
 	if (!userStore.hasPermissions(permissionCodes.productStock.read)) {
 		return;
@@ -175,6 +283,14 @@ onMounted(async () => {
 	}
 });
 
+onActivated(() => {
+	restorePageScrollPosition();
+});
+
+onDeactivated(() => {
+	savePageScrollPosition();
+});
+
 watch(keyword, () => {
 	window.clearTimeout(keywordTimer);
 	keywordTimer = window.setTimeout(async () => {
@@ -186,7 +302,15 @@ watch(keyword, () => {
 	}, 300);
 });
 
+onBeforeRouteLeave(() => {
+	savePageScrollPosition();
+	navBarStore.clearRight();
+});
+
 onUnmounted(() => {
+	isDisposed = true;
+	unregisterProductStockListEvent?.();
+	unregisterProductStockListEvent = undefined;
 	navBarStore.clearRight();
 	window.clearTimeout(keywordTimer);
 	requestToken += 1;
@@ -197,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;
 		}
 	}
@@ -217,7 +338,6 @@ onUnmounted(() => {
 		min-height: 70vh;
 
 		.list {
-			padding-top: .75rem;
 
 			.item {
 				padding: 10px;

src/pages/product/ProductStockOperationPopup.vue

@@ -60,7 +60,7 @@
 					</div>
 				</t-form-item>
 				<t-form-item label-width="0">
-					<photo-scroller
+					<media-selector
 						:model-value="photoUrlList"
 						v-model:photo-items="photoItems"
 						:upload="uploadPhotoList"
@@ -99,7 +99,7 @@ import { watch } from "vue";
 import { BottomPopup } from "timi-tdesign-mobile";
 import { Time } from "timi-web";
 import ProductAPI from "@/api/ProductAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import type {
 	Product,
 	ProductSku,
@@ -108,6 +108,7 @@ import type {
 	StockOperationType
 } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { createProductRequestNo, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import type { PhotoItem } from "@/types/Photo";
@@ -260,6 +261,7 @@ async function submit(): Promise<void> {
 				break;
 		}
 		visible.value = false;
+		emitListDataChanged(listDataEventKeys.productStockChanged, props.product.id);
 		Message.success("库存操作已提交");
 		emit("success");
 	} catch (error) {

src/pages/product/ProductStockRecordDetail.vue

@@ -5,7 +5,7 @@
 			<section class="snapshot-head" v-entrance-transition>
 				<div class="eyebrow">库存 SKU 快照</div>
 				<h2 v-text="record.productNameSnapshot || '未命名产品'" />
-				<product-sku-snapshot-tags
+		<product-sku-tags
 					class="sku"
 					:product-name="record.productNameSnapshot"
 					:snapshot="record.skuSpecSnapshot"
@@ -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>
@@ -83,7 +83,7 @@
 						<span></span>
 					</template>
 					<template #description>
-						<photo-scroller
+						<media-selector
 							:model-value="photoURLList"
 							:photo-items="photoItemList"
 							:show-add="false"
@@ -119,7 +119,7 @@
 						<t-textarea v-model="revokeRemark" borderless autosize maxlength="500" placeholder="请输入冲正备注" />
 					</t-form-item>
 				</t-form>
-				<photo-scroller
+				<media-selector
 					:model-value="revokePhotoUrlList"
 					v-model:photo-items="revokePhotoItems"
 					:upload="uploadPhotoList"
@@ -137,13 +137,14 @@ import { BottomPopup } from "timi-tdesign-mobile";
 import { PassTimeLabel } from "timi-web";
 import { useUserStore, type Attachment } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
-import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
+import ProductSkuTags from "@/components/ProductSkuTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { PhotoItem } from "@/types/Photo";
 import type { StockBizType, StockRecord } from "@/types/Product";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
 import { createProductRequestNo, getProductQuantityText, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
@@ -156,6 +157,7 @@ const navBarStore = useNavBarStore();
 const router = useRouter();
 const userStore = useUserStore();
 const record = ref<StockRecord>();
+const baseUnitName = ref("");
 const isLoading = ref(false);
 const isOperating = ref(false);
 const revokeVisible = ref(false);
@@ -279,6 +281,7 @@ async function submitManualRevoke(): Promise<void> {
 			attachmentList: buildAttachments()
 		});
 		revokeVisible.value = false;
+		emitListDataChanged(listDataEventKeys.productStockChanged, record.value.id);
 		Message.success("手工库存流水已冲正");
 		await loadData();
 	} catch (error) {
@@ -297,6 +300,15 @@ async function loadData(): Promise<void> {
 	try {
 		const result = await ProductAPI.recordDetail(id);
 		record.value = result;
+		baseUnitName.value = "";
+		if (result.skuId) {
+			try {
+				const sku = await ProductAPI.skuDetail(result.skuId);
+				baseUnitName.value = sku.unitList?.find(unit => unit.isBase)?.name || sku.unitList?.[0]?.name || "";
+			} catch {
+				baseUnitName.value = "";
+			}
+		}
 	} catch (error) {
 		Message.error(getErrorMessage(error, "库存流水加载失败"));
 	} finally {

src/pages/product/ProductStockRecordList.vue

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

src/pages/product/ProductStockSkuList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.productStock.read" class="product-stock-sku-list">
-		<div class="search bg-white">
+		<div class="filters glass">
 			<t-input
 				v-model="keyword"
 				class="keyword"
@@ -21,16 +21,43 @@
 				<t-cell-group theme="card">
 					<t-cell title="产品" :note="product?.name" />
 				</t-cell-group>
-				<t-cell-group v-if="skuStockList.length" theme="card" class="list fix-last-cell-line">
+				<t-cell-group
+					v-if="skuStockList.length"
+					theme="card"
+					class="list fix-last-cell-line empty-cell-title-margin"
+				>
 					<t-cell
+						class="item"
 						v-for="(item, index) in skuStockList"
 						:key="item.skuId || item.id"
 						arrow
-						hover
-						class="item"
 						v-entrance-transition="index * 30"
 						@click="toDetail(item)"
 					>
+						<template #title>
+							<div class="title">
+								<strong v-text="item.sku?.name || '未命名 SKU 明细'" />
+								<div
+									v-if="getUnitList(item).length"
+									class="unit-options"
+									role="group"
+									:aria-label="`切换${item.sku?.name || 'SKU'}库存单位`"
+								>
+									<t-button
+										v-for="unit in getUnitList(item)"
+										:key="unit.id"
+										size="extra-small"
+										:theme="getSelectedUnit(item)?.id === unit.id ? 'primary' : 'default'"
+										:variant="getSelectedUnit(item)?.id === unit.id ? 'base' : 'outline'"
+										:aria-label="`切换到${unit.name || '未命名单位'}`"
+										:aria-pressed="getSelectedUnit(item)?.id === unit.id"
+										@click.stop="selectUnit(item, unit.id || '')"
+									>
+										<span v-text="unit.name || '未命名单位'" />
+									</t-button>
+								</div>
+							</div>
+						</template>
 						<template #leftIcon>
 							<t-image
 								v-if="getSkuPhotoURL(item)"
@@ -41,26 +68,20 @@
 							/>
 							<div v-else class="avatar fallback" v-text="(item.sku?.name || 'S').slice(0, 1)" />
 						</template>
-						<template #title>
-							<div class="title">
-								<strong v-text="item.sku?.name || '未命名 SKU 明细'" />
-								<t-tag size="small" variant="outline" :content="item.sku?.code || '无 SKU 编码'" />
-							</div>
-						</template>
 						<template #description>
 							<div class="stock">
-							<span class="on-hand">
+								<span class="on-hand">
-								<span>库存</span>
+									<span>库存</span>
-								<strong v-text="getProductQuantityText(item.onHandQuantity)" />
+									<strong v-text="getStockQuantityText(item, item.onHandQuantity)" />
-							</span>
+								</span>
 								<span class="available">
-								<span>可用</span>
+									<span>可用</span>
-								<strong v-text="getProductQuantityText(item.availableQuantity)" />
+									<strong v-text="getStockQuantityText(item, item.availableQuantity)" />
-							</span>
+								</span>
 								<span class="reserved">
-								<span>预占</span>
+									<span>预占</span>
-								<strong v-text="getProductQuantityText(item.reservedQuantity)" />
+									<strong v-text="getStockQuantityText(item, item.reservedQuantity)" />
-							</span>
+								</span>
 							</div>
 						</template>
 					</t-cell>
@@ -76,8 +97,9 @@
 import { useUserStore } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { Product, ProductStock } from "@/types/Product";
+import type { Product, ProductSkuUnit, ProductStock } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
+import { convertBaseQuantityToPackageQuantity } from "@/utils/package";
 import { getProductPhotoURL, getProductQuantityText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
@@ -96,6 +118,7 @@ const total = ref(0);
 const isLoading = ref(false);
 const isRefreshing = ref(false);
 const isNoMore = ref(false);
+const selectedUnitIdMap = ref<Record<string, string>>({});
 const productId = computed(() => {
 	const value = route.params.productId;
 	return Array.isArray(value) ? String(value[0] || "") : String(value || "");
@@ -114,6 +137,48 @@ function getSkuPhotoURL(item: ProductStock): string {
 	return item.sku ? getProductPhotoURL(item.sku) : "";
 }
 
+function getStockKey(item: ProductStock): string {
+	return item.skuId || item.sku?.id || item.id || "";
+}
+
+function getUnitList(item: ProductStock): ProductSkuUnit[] {
+	if (item.sku?.unitList?.length) {
+		return item.sku.unitList.filter(unit => !!unit.id);
+	}
+	return product.value?.skuList?.find(sku => sku.id === item.skuId)?.unitList?.filter(unit => !!unit.id) || [];
+}
+
+function getSelectedUnit(item: ProductStock): ProductSkuUnit | undefined {
+	const unitList = getUnitList(item);
+	const selectedUnitId = selectedUnitIdMap.value[getStockKey(item)];
+	return unitList.find(unit => unit.id === selectedUnitId) || unitList.find(unit => unit.isBase) || unitList[0];
+}
+
+function getStockQuantityText(item: ProductStock, value?: number | string): string {
+	const quantity = convertBaseQuantityToPackageQuantity(value ?? "0", getSelectedUnit(item)?.baseQuantityPerUnit ?? "1");
+	return getProductQuantityText(quantity);
+}
+
+function selectUnit(item: ProductStock, unitId: string): void {
+	const stockKey = getStockKey(item);
+	if (!stockKey || !getUnitList(item).some(unit => unit.id === unitId)) {
+		return;
+	}
+	selectedUnitIdMap.value = { ...selectedUnitIdMap.value, [stockKey]: unitId };
+}
+
+function initializeSelectedUnits(list: ProductStock[]): void {
+	const nextSelectedUnitIdMap = { ...selectedUnitIdMap.value };
+	for (const item of list) {
+		const stockKey = getStockKey(item);
+		const selectedUnit = getSelectedUnit(item);
+		if (stockKey && selectedUnit?.id) {
+			nextSelectedUnitIdMap[stockKey] = selectedUnit.id;
+		}
+	}
+	selectedUnitIdMap.value = nextSelectedUnitIdMap;
+}
+
 let keywordTimer: number | undefined;
 let requestToken = 0;
 let suppressKeywordFetch = false;
@@ -136,6 +201,7 @@ async function fetch(reset = false): Promise<void> {
 	if (reset) {
 		pageIndex.value = 0;
 		skuStockList.value = [];
+		selectedUnitIdMap.value = {};
 		total.value = 0;
 		isNoMore.value = false;
 	}
@@ -154,6 +220,7 @@ async function fetch(reset = false): Promise<void> {
 		}
 		const list = result.list || [];
 		skuStockList.value = reset ? list : skuStockList.value.concat(list);
+		initializeSelectedUnits(list);
 		total.value = result.total || 0;
 		pageIndex.value += 1;
 		isNoMore.value = list.length < pageSize || skuStockList.value.length === total.value || total.value < skuStockList.value.length;
@@ -173,7 +240,8 @@ async function loadCurrent(): Promise<void> {
 		return;
 	}
 	try {
-		await Promise.all([loadProduct(), fetch(true)]);
+		await loadProduct();
+		await fetch(true);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "SKU 列表加载失败"));
 	}
@@ -181,7 +249,8 @@ async function loadCurrent(): Promise<void> {
 
 async function refresh(): Promise<void> {
 	try {
-		await Promise.all([loadProduct(), fetch(true)]);
+		await loadProduct();
+		await fetch(true);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "SKU 列表加载失败"));
 	} finally {
@@ -249,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;
@@ -279,6 +344,16 @@ onUnmounted(() => {
 				.item {
 					padding: 10px;
 
+					: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;
@@ -298,6 +373,7 @@ onUnmounted(() => {
 					.title {
 						gap: .5rem;
 						min-width: 0;
+						max-width: 100%;
 						flex: 1;
 						display: flex;
 						align-items: center;
@@ -309,6 +385,19 @@ onUnmounted(() => {
 							white-space: nowrap;
 							text-overflow: ellipsis;
 						}
+
+						.unit-options {
+							gap: .25rem;
+							max-width: 55%;
+							display: flex;
+							flex-shrink: 0;
+							overflow-x: auto;
+
+							:deep(.t-button) {
+								--td-button-border-radius: .5rem;
+								flex-shrink: 0;
+							}
+						}
 					}
 
 					.sku-spec {

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>