fix button size

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
@@ -3661,7 +3656,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

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/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/assets/styles/global.less

@@ -79,13 +79,16 @@ html.theme-dark body {
 	text-overflow: unset;
 }
 
-.t-cell__title {
+.t-cell {
+
+	.t-cell__title {
 
 		.t-cell__title-text {
 			min-width: unset;
 			white-space: nowrap;
 			text-overflow: unset;
 		}
+	}
 }
 
 .t-dialog__footer {
@@ -93,8 +96,8 @@ html.theme-dark body {
 }
 
 .t-pull-down-refresh {
-	overflow-x: hidden;
-	overflow-y: auto;
+	height: 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;

src/components/CachedRoutePage.vue

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

src/components/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/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,15 +29,31 @@
 		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";
@@ -65,6 +83,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,15 +107,24 @@ 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 || []);
@@ -107,12 +136,13 @@ async function handlePhotoSelected(event: Event): Promise<void> {
 	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

@@ -2,9 +2,14 @@
 	<div class="page-transition">
 		<router-view v-slot="{ Component }">
 			<transition :name="transitionName">
-				<div :key="route.path" class="pages">
-					<component :is="Component" />
-				</div>
+				<keep-alive :include="keepAlivePageNames">
+					<component
+						:is="isCachedPage ? CachedRoutePage : RoutePage"
+						:key="route.path"
+						:background="pageBackground"
+						:component="Component"
+					/>
+				</keep-alive>
 			</transition>
 		</router-view>
 	</div>
@@ -12,15 +17,21 @@
 
 <script setup lang="ts">
 import type { RouteLocationNormalized } from "vue-router";
+import CachedRoutePage from "@/components/CachedRoutePage.vue";
+import RoutePage from "@/components/RoutePage.vue";
 import { useGlobalUIStore } from "@/store/globalUI";
 
 defineOptions({
 	name: "PageTransition"
 });
 
-const router = useRouter();
 const route = useRoute();
+const router = useRouter();
 const globalUIStore = useGlobalUIStore();
+// KeepAlive 直接缓存的是单根路由边界，列表页面位于该边界子树中，仍会收到 activated / deactivated 生命周期。
+const keepAlivePageNames = ["CachedRoutePage"];
+const cachedPageRouteNameSet = new Set(["SalesOrderList", "ProductList", "ProductStockList"]);
+const isCachedPage = computed(() => cachedPageRouteNameSet.has(String(route.name)));
 
 const transitionName = ref("push-left");
 const pageBackground = computed(() => globalUIStore.bodyBackground);
@@ -46,7 +57,7 @@ function calcDepth(sourceRoute: RouteLocationNormalized): number {
 	}
 
 	const baseDepth = Number(sourceRoute.meta.baseDepth ?? 0);
-	const pathSegments = fullPath.split("?")[0].split("/").filter((pathSegment) => pathSegment !== "");
+	const pathSegments = fullPath.split("?")[0].split("/").filter(pathSegment => pathSegment !== "");
 	const depth = baseDepth + (pathSegments.length - 1);
 	pathCache.set(fullPath, depth);
 	return depth;
@@ -103,23 +114,15 @@ onUnmounted(() => {
 	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;
-	}
+	overflow-x: clip;
+	z-index: 0;
 
 	// ---------- push-left / push-right 公共激活状态 ----------
 
-	.push-left-enter-active,
-	.push-left-leave-active,
-	.push-right-enter-active,
-	.push-right-leave-active {
+	:deep(.push-left-enter-active),
+	:deep(.push-left-leave-active),
+	:deep(.push-right-enter-active),
+	:deep(.push-right-leave-active) {
 		width: 100%;
 		height: 100%;
 		position: fixed;
@@ -127,51 +130,51 @@ onUnmounted(() => {
 		backface-visibility: hidden;
 	}
 
-	// ---------- 前进：下一页从右滑入，当前页缩退到左侧 ----------
+	// ---------- push-left：下一页从右滑入，当前页缩退到左侧 ----------
 
-	.push-left-enter-from {
+	:deep(.push-left-enter-from) {
 		transform: translate3d(100%, 0, 0);
 		box-shadow: -4px 0 16px rgba(0, 0, 0, @shadow-intensity);
 	}
 
-	.push-left-enter-to {
+	:deep(.push-left-enter-to) {
 		transform: translate3d(0, 0, 0);
 	}
 
-	.push-left-leave-active {
+	:deep(.push-left-leave-active) {
 		transition: all @duration @easing, filter .3s;
 	}
 
-	.push-left-leave-to {
+	:deep(.push-left-leave-to) {
 		filter: brightness(@brightness);
 		transform: translate3d(-@page-offset, 0, 0);
 	}
 
-	// ---------- 返回：当前页从右滑出，上一页从左侧复位 ----------
+	// ---------- push-right：当前页从右滑出，上一页从左侧复位 ----------
 
-	.push-right-enter-active {
+	:deep(.push-right-enter-active) {
 		z-index: 0;
 		transition: transform @duration @easing, opacity .3s;
 	}
 
-	.push-right-enter-from {
+	:deep(.push-right-enter-from) {
 		transform: translate3d(-@page-offset, 0, 0);
 	}
 
-	.push-right-enter-to {
+	:deep(.push-right-enter-to) {
 		transform: translate3d(0, 0, 0);
 	}
 
-	.push-right-leave-active {
+	:deep(.push-right-leave-active) {
 		z-index: 1;
 		transition: transform @duration @easing, box-shadow .3s;
 	}
 
-	.push-right-leave-from {
+	:deep(.push-right-leave-from) {
 		transform: translate3d(0, 0, 0);
 	}
 
-	.push-right-leave-to {
+	:deep(.push-right-leave-to) {
 		transform: translate3d(105%, 0, 0);
 		box-shadow: 4px 0 16px rgba(0, 0, 0, @shadow-intensity);
 	}

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"
@@ -123,10 +104,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 +144,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,16 +245,10 @@ 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 {

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

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

src/components/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,296 @@
+<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"
+		: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";
+
+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;
+}
+
+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 = {
+	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;
+	}
+
+	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,145 @@
+<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"
+				/>
+				<span class="video-play" aria-hidden="true">▶</span>
+			</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;
+			}
+
+			.video-play {
+				inset: 50% auto auto 50%;
+				width: 2rem;
+				height: 2rem;
+				color: #fff;
+				position: absolute;
+				display: flex;
+				font-size: 1.125rem;
+				align-items: center;
+				justify-content: center;
+				background: rgba(15, 23, 42, .68);
+				border-radius: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+	}
+
+	.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,235 @@
+<template>
+	<t-image-viewer
+		v-model:visible="viewerVisible"
+		:images="images"
+		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>
+</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;
+}
+
+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;
+			justify-content: start;
+			flex-direction: column;
+
+			.button {
+				text-indent: 1.5em;
+			}
+		}
+
+		.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/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 || '当前门店'}经营助手`">
-		<ai-chat-message-list
+	<shared-ai-chat-panel
 		ref="messageList"
+		class="shared-panel"
 		:messages="messages"
 		:is-generating="isGenerating"
-			:quick-question-list="aiQuickQuestionList"
-			@select-question="submitMessage"
-			@refresh-questions="refreshQuickQuestions"
-		/>
-		<div class="bottom-area">
-			<div v-if="activeToolStatus" class="tool-status">
-				<t-icon name="loading" size="1rem" />
-				<span v-text="activeToolStatus" />
-			</div>
-			<ai-chat-composer
-				v-model="draft"
-				:is-generating="isGenerating"
-				:disabled="isLoadingConversation"
+		:is-loading="isLoadingConversation"
+		:active-tool-status="activeToolStatus"
 		:last-error="lastError"
 		:can-retry="canRetry"
+		:aria-label="`${props.storeName || '当前会话'}经营助手`"
+		:role-names="{ assistant: 'AI 小糕', user: '店长' }"
+		:placeholder="'问问小糕怎么个事…'"
+		:format-message-status="formatMessageStatus"
 		@send="submitMessage"
 		@stop="stopGeneration"
 		@retry="retryLastMessage"
-			/>
+	>
+		<template #welcome>
+			<div class="welcome">
+				<div class="welcome-icon" v-entrance-transition>
+					<t-icon name="robot-2" size="2rem" />
 				</div>
-	</section>
+				<h3 v-entrance-transition="70">今天想了解什么？</h3>
+				<p v-entrance-transition="140">我会根据当前门店的实时业务数据回答经营问题。</p>
+				<div class="quick-list" v-entrance-transition="210">
+					<t-button
+						v-for="question in aiQuickQuestionList"
+						:key="question"
+						class="quick-question"
+						variant="outline"
+						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>
+		</template>
+		<template #citation="{ citation }">
+			<div class="citation">
+				<span class="citation-label">数据来源</span>
+				<span v-text="formatCitation(citation)" />
+				<span v-if="citation.generatedAt" class="citation-time">
+					<span v-text="`生成时间：${citation.generatedAt}`" />
+				</span>
+			</div>
+		</template>
+	</shared-ai-chat-panel>
 	<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 type { GaoAiConversation } from "@/api/GaoAiAPI";
-import AiChatComposer from "@/pages/ai/components/AiChatComposer.vue";
+import {
+	AiChatHttpError,
+	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,15 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+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 +126,40 @@ const {
 	stopGeneration,
 	retryLastMessage,
 	resetConversation
-} = useAiChat({
+} = useAiChat<GaoAiConversationReadResponse, { storeId?: string }>({
 	sessionKey: () => props.sessionKey,
-	storeId: () => props.storeId,
-	scrollToBottom
+	context: () => ({ storeId: props.storeId }),
+	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 +188,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 +336,97 @@ watch(isBusy, value => navBarStore.setRightDisabled(value));
 
 onUnmounted(() => navBarStore.clearRight());
 </script>
+
 <style scoped lang="less">
-.ai-chat-panel {
-	height: 100%;
-	display: flex;
-	position: relative;
-	overflow: hidden;
-	min-height: 0;
-	background: var(--ai-background);
+.shared-panel {
+	:deep(.ai-chat-panel) {
 		padding-top: var(--app-nav-height);
-	flex-direction: column;
+	}
 
-	.bottom-area {
-		inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
-		width: auto;
-		margin: 0 auto;
-		z-index: 2;
-		position: absolute;
-		max-width: 40rem;
+	:deep(.welcome) {
+		margin: auto 0;
+		text-align: center;
 
-		.tool-status {
-			gap: .375rem;
-			margin-bottom: .5rem;
+		.welcome-icon {
 			color: #0f766e;
-			padding: .5rem .75rem;
-			border-radius: .75rem;
+			width: 4rem;
+			height: 4rem;
+			margin: 0 auto 1rem;
+			border-radius: 1.25rem;
 			display: flex;
-			font-size: .75rem;
-			background: var(--ai-soft);
+			background: #ccfbf1;
 			align-items: center;
+			justify-content: center;
+		}
 
-			.t-icon {
-				animation: rotate 1s linear infinite;
+		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(--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

@@ -235,7 +235,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;
 }

src/pages/customer/CustomerDetail.vue

@@ -34,8 +34,8 @@
 			</t-cell>
 		</t-cell-group>
 		<card-container v-entrance-transition="140">
-			<photo-scroller
-				class="photo-scroller"
+			<media-selector
+				class="media-selector"
 				:model-value="photoList"
 				:photo-items="photoItemList"
 				:show-viewer-actions="canUpdateCustomer"
@@ -98,6 +98,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 +145,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 +180,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 +393,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 +545,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,10 @@
 						:show-viewer-actions="!isCustomerBound"
 						:add-actions="photoAddActions"
 						:loading="isPhotoUploading"
-						@add-photo="openPhotoPicker('PHOTO')"
-						@add-point-card="openPhotoPicker('POINT_CARD')"
-						@add-other="openPhotoPicker('OTHER')"
+						@add="openPhotoPicker('OTHER')"
+						@action="handlePhotoAction"
+						@capture-photo="capturePhoto"
+						@capture-video="captureVideo"
 					/>
 					<div class="tips orange" v-if="!hasCustomerDeletePermission">当前账户权限编辑客户需要上传照片和积分卡</div>
 				</div>
@@ -176,7 +177,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 +230,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";
@@ -442,6 +460,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 +537,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 +584,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");
@@ -602,6 +645,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/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/component/useEventRecordPhoto.ts

@@ -6,6 +6,8 @@ import { compressUploadImageList } from "@/utils/imageCompression";
 
 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,9 +21,17 @@ 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 || []);
@@ -32,11 +42,12 @@ export function useEventRecordPhoto() {
 		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 +64,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 +92,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,869 @@
+<template>
+	<div v-can="permissionCodes.customerFollowUpReminder.read" class="follow-up-reminder-list">
+		<div class="filter bg-white">
+			<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="statusFilter"
+					:label="statusFilterLabel"
+					:options="statusOptions"
+					@change="handleStatusChange"
+				/>
+				<t-dropdown-item
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="handleDateFilterChange"
+				/>
+				<t-dropdown-item
+					:label="selectedResponsibleName"
+					:options="[]"
+					@open="openResponsibleSelector"
+				/>
+			</t-dropdown-menu>
+		</div>
+		<t-pull-down-refresh
+			class="list-wrap"
+			v-model="isRefreshing"
+			:refresh-timeout="30000"
+			@refresh="refresh"
+			@scrolltolower="fetch"
+		>
+			<t-cell-group class="summary" theme="card">
+				<t-cell title="提醒数量" :note="`共 ${pageResult.total} 条`" />
+				<t-cell v-if="dateFilterType !== 'all'" title="提醒时间" :note="dateFilterLabel" />
+				<t-cell v-if="selectedCustomer || selectedResponsibleId" title="筛选条件">
+					<template #note>
+						<div class="selected-filter">
+							<t-tag
+								v-if="selectedCustomer"
+								theme="primary"
+								variant="light-outline"
+								:content="`客户：${selectedCustomer.name || selectedCustomer.code || '未命名'}`"
+							/>
+							<t-tag
+								v-if="selectedResponsibleId"
+								theme="primary"
+								variant="light-outline"
+								:content="`负责人：${selectedResponsibleName}`"
+							/>
+							<t-button size="extra-small" variant="text" @click="clearFilters">清空筛选</t-button>
+						</div>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<t-cell-group v-if="pageResult.list.length" class="items fix-last-cell-line empty-cell-title-margin" theme="card">
+				<t-swipe-cell
+					v-for="(item, index) in pageResult.list"
+					:key="item.id || index"
+					class="item"
+				>
+					<t-cell
+						v-entrance-transition="index * 30"
+						class="cell"
+						arrow
+						@click="toDetail(item)"
+					>
+						<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 ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
+		</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;
+}
+
+async function clearFilters(): Promise<void> {
+	statusFilter.value = "";
+	dateFilterType.value = "all";
+	dateRange.value = ["", ""];
+	selectedCustomerId.value = "";
+	selectedCustomer.value = undefined;
+	customerSearchKeyword.value = "";
+	selectedResponsibleId.value = "";
+	selectedResponsible.value = undefined;
+	await refresh();
+}
+
+// ---------- 列表 ----------
+
+const isRefreshing = ref(false);
+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;
+
+	.filter {
+		top: var(--app-nav-height);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		display: flex;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: #f5f5f8;
+		box-shadow: var(--td-shadow-1);
+		flex-direction: column;
+
+		.customer {
+			--td-button-border-radius: .75rem;
+			--td-input-vertical-padding: .25rem 1rem;
+
+			width: 100%;
+			border: 1px solid var(--td-component-border);
+			background: var(--td-bg-color-container);
+			padding-right: .3rem;
+			border-radius: 1rem;
+		}
+
+		.menus {
+			--td-spacer-1: 6px;
+
+			width: 100%;
+			border: 1px solid rgba(148, 163, 184, .18);
+			z-index: -1;
+			overflow: hidden;
+			margin-top: -1rem;
+			background: #fff;
+			border-top: none;
+			padding-top: .8rem;
+			border-radius: 0 0 1rem 1rem;
+		}
+
+	}
+
+	.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 {
+		padding: 1rem 0;
+
+		.summary {
+			margin-bottom: 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
@@ -92,9 +92,9 @@
 			<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 +102,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"
@@ -126,8 +126,8 @@
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import ProductAPI from "@/api/ProductAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
-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";
@@ -302,9 +302,7 @@ async function fillAllQuantity(item: GaoSalesOrderItem): Promise<void> {
 		return;
 	}
 	quantityMap[item.id] = quantity;
-	if (directVerify.value) {
-		await previewDirectStock();
-	}
+	await refreshStockPreview();
 }
 
 function getFulfillmentUnitList(item: GaoSalesOrderItem): ProductSkuUnit[] {
@@ -357,7 +355,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 +364,7 @@ function confirmUnitPicker(value: Array<string | number>): void {
 		setFulfillmentUnit(item, fulfillmentUnit);
 	}
 	unitPickerVisible.value = false;
+	await refreshStockPreview();
 }
 
 function confirmTime(value: string | number): void {
@@ -386,7 +385,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 +426,9 @@ async function validateDirectStock(): Promise<boolean> {
 		stockPreviewList.value = buildProductStockPreview(stockList, requirementList);
 		const shortageMessage = getProductStockShortageMessage(stockList, requirementList);
 		if (shortageMessage) {
+			if (showShortageMessage) {
 				Message.warning(`${shortageMessage}，不能直接核销履约`);
+			}
 			return false;
 		}
 		return true;
@@ -438,15 +439,16 @@ async function validateDirectStock(): Promise<boolean> {
 	}
 }
 
-async function previewDirectStock(): Promise<void> {
-	if (!directVerify.value || isStockChecking.value) {
+async function previewDirectStock(force = false): Promise<void> {
+	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 +458,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,7 +532,10 @@ 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);

src/pages/fulfillment/OrderFulfillmentDetail.vue

@@ -16,7 +16,7 @@
 				<t-cell v-if="fulfillment.remark" title="备注" :note="fulfillment.remark" />
 			</t-cell-group>
 			<div class="photos" v-entrance-transition="35">
-				<photo-scroller
+				<media-selector
 					:model-value="fulfillmentPhotoURLList"
 					:photo-items="fulfillmentPhotoItems"
 					:show-add="false"
@@ -31,19 +31,8 @@
 					v-for="item in fulfillment.itemList || []"
 					:key="item.id"
 					:title="item.productNameSnapshot || '未命名产品'"
+					:note="getFulfillmentQuantityText(item)"
 				>
-					<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 +47,29 @@
 							v-text="(item.productNameSnapshot || '产').slice(0, 1)"
 						/>
 					</template>
+					<template #description>
+						<div class="item-description">
+							<t-tag v-if="isGiftedFulfillmentItem(item)" size="small" theme="success" content="赠送" />
+							<product-sku-tags
+								:product-name="item.productNameSnapshot"
+								:snapshot="item.skuSpecSnapshot"
+								:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
+								:unit="item.unitSnapshot"
+							/>
+						</div>
+					</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 +95,7 @@
 					v-if="isVerified && canRevoke"
 					theme="danger"
 					content="履约冲正"
-					@click="openRevoke"
+					@click="revokeVisible = true"
 				/>
 			</section>
 		</template>
@@ -101,61 +110,38 @@
 		>
 			<t-textarea v-model.trim="reason" borderless autosize placeholder="请输入原因" />
 		</t-dialog>
-		<bottom-popup
-			v-model="revokeVisible"
-			title="履约冲正"
-			left-button-text="取消"
-			right-button-text="提交"
-			@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
+		<order-fulfillment-revoke
+			v-if="fulfillment"
+			v-model:visible="revokeVisible"
+			:fulfillment="fulfillment"
+			@success="loadData"
 		/>
-				</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 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 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 { createPackageRequestNo, getPackageQuantityText } from "@/utils/package";
+import { addPackageQuantity, getPackageQuantityText } from "@/utils/package";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
 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 +157,8 @@ const reasonVisible = ref(false);
 const reasonAction = ref<ReasonAction>("reject");
 const reason = ref("");
 const revokeVisible = ref(false);
-const revokeReason = ref("");
-const returnedToStore = ref(true);
-const revokeRequestNo = ref("");
-const photoItems = ref<PhotoItem[]>([]);
-const photoUrlList = computed(() => photoItems.value.map(item => item.url));
+const stockPreviewList = ref<ProductStockPreviewItem[]>([]);
+const stockPreviewLoading = ref(false);
 const fulfillmentPhotoItems = computed<PhotoItem[]>(() => (fulfillment.value?.attachmentList || [])
 	.filter(item => !!item.id)
 	.map(item => ({
@@ -192,19 +175,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 +271,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; }
@@ -274,29 +331,6 @@ async function submitReason(): Promise<void> {
 	} 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>
@@ -339,6 +373,25 @@ onUnmounted(() => navBarStore.clearRight());
 		border-radius: 1.25rem;
 	}
 
+	.stock-preview {
+		margin: 0 1rem;
+		padding: 1rem .5rem .75rem;
+		background: var(--td-bg-color-container, #fff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.title {
+			padding: 0 .5rem .5rem;
+			font-size: .875rem;
+			font-weight: 600;
+		}
+
+		:deep(.t-loading) {
+			justify-content: center;
+			padding: 1rem 0;
+		}
+	}
+
 	.items {
 
 		.item {
@@ -352,14 +405,11 @@ onUnmounted(() => navBarStore.clearRight());
 			}
 
 			.avatar {
-				width: 3.5rem;
-				height: 3.5rem;
+				width: 3rem;
+				height: 3rem;
 			}
 		}
 	}
 }
 
-.revoke-form {
-	margin: 0;
-}
 </style>

src/pages/fulfillment/components/OrderFulfillmentRevoke.vue

@@ -0,0 +1,194 @@
+<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 { 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;
+		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/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";
@@ -386,6 +404,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,9 +420,17 @@ 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 || []);
@@ -413,13 +441,14 @@ async function handleRecordPhotoSelected(event: Event): Promise<void> {
 	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>
-						<t-tag
-							:content="item.skuCodeSnapshot || item.sku?.code || 'SKU'"
-							theme="primary"
-							variant="light"
+					<template #title>
+						<div class="title">
+							<span v-text="item.productNameSnapshot || '未命名产品'" />
+							<product-sku-tags
+								: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 {
-				gap: .5rem;
+			:deep(.t-cell__title) {
 				display: flex;
 				align-items: center;
-				justify-content: space-between;
 			}
 
 			.avatar {
-				width: 3.5rem;
-				height: 3.5rem;
+				width: 2.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/PackageOrderConfigList.vue

@@ -0,0 +1,299 @@
+<template>
+	<div v-can="permissionCodes.packageConfig.read" class="package-order-config-list">
+		<div class="filters">
+			<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;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		.keyword {
+			--td-input-vertical-padding: .25rem 1rem;
+
+			flex: 1;
+			border: 1px solid var(--td-component-border);
+			z-index: 1;
+			background: var(--td-bg-color-container);
+			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;
+
+			&:after {
+				display: none;
+			}
+		}
+	}
+
+	.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

@@ -209,7 +209,7 @@
 				</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 +218,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 +235,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 +339,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";

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

@@ -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 {

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

@@ -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 {

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 class="bg-white" theme="danger" variant="outline" @click="disable">停用配置</t-button>
-			<t-button theme="danger" @click="remove">删除</t-button>
-		</div>
+		<t-button
+			v-if="form.id"
+			class="cell-button"
+			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

@@ -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">
-							<strong v-text="item.product?.name || item.sku?.name || '未命名产品'" />
+						<span class="clip-text" 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 {
@@ -201,12 +209,16 @@ onUnmounted(() => {
 
 	.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

@@ -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";
@@ -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 {

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/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,13 @@
 	<bottom-popup
 		v-model="skuDetailVisible"
 		title="SKU 详情"
-		height="min(88vh, 48rem)"
+		height="min(80vh, 48rem)"
 		left-button-text="关闭"
 		right-button-text=""
 		@left-button-click="closeSkuDetail"
 	>
 		<div v-if="selectedSku" class="sku-popup">
-			<div class="sku-popup-header">
-				<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-group>
 				<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,7 +98,8 @@
 				<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">
+				<media-selector
 					v-if="skuPhotoItemList.length"
 					:model-value="skuPhotoUrlList"
 					:photo-items="skuPhotoItemList"
@@ -127,22 +108,14 @@
 					:show-remove="false"
 					:show-viewer-actions="false"
 				/>
-
-			<div class="unit-section">
-				<div class="unit-heading">
+			</div>
+			<div class="unit">
+				<div class="header">
 					<strong>销售单位</strong>
 					<span>采购、销售和库存操作共用</span>
 				</div>
-				<div v-if="selectedSku.unitList?.length" class="unit-list">
-					<div v-for="unit in selectedSku.unitList" :key="unit.id || unit.name" class="unit-item">
-						<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="'暂无销售单位'" />
+				<product-sku-unit-list v-if="selectedSku.unitList?.length" :unit-list="selectedSku.unitList" />
+				<div v-else class="center-tips" v-text="'暂无销售单位'" />
 			</div>
 		</div>
 	</bottom-popup>
@@ -154,15 +127,20 @@ 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 {
+	getProductPhotoURL,
+	getProductQuantityText,
+	getProductStatusText
+} from "@/utils/product";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { Text } from "timi-web";
@@ -186,7 +164,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 => ({
@@ -253,14 +230,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]
@@ -317,7 +286,15 @@ onUnmounted(() => navBarStore.clearRight());
 	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
 	flex-direction: column;
 
-	.units {
+	.skus {
+
+		.sku {
+			padding: 10px;
+
+			.avatar {
+				width: 3.5rem;
+				height: 3.5rem;
+			}
 
 			.title {
 				gap: .5rem;
@@ -335,116 +312,23 @@ onUnmounted(() => navBarStore.clearRight());
 				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 {
-		gap: .75rem;
-		display: flex;
-		padding: 0 1rem .75rem;
-		align-items: center;
-		justify-content: space-between;
+	.media-wrap {
+		margin: 0 1rem;
 	}
 
-	.sku-heading {
-		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 {
+	.unit {
 		margin-top: .75rem;
 		border-top: 1px solid var(--td-component-border);
-	}
 
-	.unit-heading {
+		.header {
 			gap: .5rem;
 			display: flex;
 			padding: .75rem 1rem .5rem;
@@ -458,33 +342,6 @@ onUnmounted(() => navBarStore.clearRight());
 			}
 		}
 
-	.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-other="openAttachmentPicker('OTHER')"
+					@add="openAttachmentPicker('OTHER')"
+					@action="handleAttachmentAction"
+					@capture-photo="capturePhoto"
+					@capture-video="captureVideo"
 				/>
 			</t-form-item>
 			<t-form-item label="纯色封面" label-width="8rem" content-align="right">
@@ -197,7 +199,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 +210,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";
@@ -252,6 +257,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 +276,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[]>([]);
@@ -552,6 +558,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;
@@ -628,7 +650,7 @@ async function handleAttachmentSelected(event: Event): Promise<void> {
 	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 +662,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 [];
 	});
 }

src/pages/product/ProductList.vue

@@ -1,5 +1,5 @@
 <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">
 			<t-input
 				v-model="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";
@@ -105,6 +101,8 @@ 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 +127,42 @@ const isRefreshing = ref(false);
 const isNoMore = ref(false);
 let keywordTimer: number | undefined;
 let requestToken = 0;
+let savedPageScrollTop: number | undefined;
+
+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" },
@@ -265,8 +299,7 @@ async function toDetail(item: Product): Promise<void> {
 }
 
 onMounted(async () => {
-	navBarStore.clearRight();
-	navBarStore.setCustomRightVisible(canCreate.value);
+	syncNavBar();
 	try {
 		await Promise.all([loadCategories(), fetch(true)]);
 	} catch (error) {
@@ -274,6 +307,15 @@ onMounted(async () => {
 	}
 });
 
+onActivated(() => {
+	restorePageScrollPosition();
+	syncNavBar();
+});
+
+onDeactivated(() => {
+	savePageScrollPosition();
+});
+
 watch(keyword, () => {
 	window.clearTimeout(keywordTimer);
 	keywordTimer = window.setTimeout(async () => {
@@ -285,6 +327,11 @@ watch(keyword, () => {
 	}, 300);
 });
 
+onBeforeRouteLeave(() => {
+	savePageScrollPosition();
+	navBarStore.clearRight();
+});
+
 onUnmounted(() => {
 	navBarStore.clearRight();
 	window.clearTimeout(keywordTimer);

src/pages/product/ProductStockDetail.vue

@@ -9,13 +9,24 @@
 				</template>
 			</product-profile>
 			<t-cell-group theme="card" title="库存" v-entrance-transition="70">
-				<t-cell
-					v-if="1 < unitList.length"
-					title="显示单位"
-					:note="selectedUnitName"
-					arrow
-					@click="openUnitPicker"
-				/>
+				<t-cell v-if="1 < unitList.length" class="units" title="显示单位">
+					<template #note>
+						<div class="options" role="group" aria-label="选择库存展示单位">
+							<t-button
+								v-for="item in unitList"
+								: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>
@@ -81,15 +92,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>
 
@@ -107,7 +109,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 +123,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 +171,10 @@ function setDefaultUnit(nextSku: ProductSku): void {
 	selectedUnitId.value = nextUnitList.find(unit => unit.isBase)?.id || nextUnitList[0]?.id || "";
 }
 
-function openUnitPicker(): 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] || "");
+function selectUnit(unitId: string): void {
 	if (unitList.value.some(unit => unit.id === unitId)) {
 		selectedUnitId.value = unitId;
 	}
-	unitPickerVisible.value = false;
 }
 
 async function loadAll(): Promise<void> {
@@ -341,6 +329,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,5 +1,5 @@
 <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">
 			<t-input
 				v-model="keyword"
@@ -20,11 +20,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 +38,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,6 +64,7 @@
 
 <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";
@@ -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,37 @@ const isRefreshing = ref(false);
 const isNoMore = ref(false);
 let keywordTimer: number | undefined;
 let requestToken = 0;
+let savedPageScrollTop: number | undefined;
+
+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 ? "未找到匹配产品" : "暂无启用库存管理的产品");
 
@@ -175,6 +202,14 @@ onMounted(async () => {
 	}
 });
 
+onActivated(() => {
+	restorePageScrollPosition();
+});
+
+onDeactivated(() => {
+	savePageScrollPosition();
+});
+
 watch(keyword, () => {
 	window.clearTimeout(keywordTimer);
 	keywordTimer = window.setTimeout(async () => {
@@ -186,6 +221,11 @@ watch(keyword, () => {
 	}, 300);
 });
 
+onBeforeRouteLeave(() => {
+	savePageScrollPosition();
+	navBarStore.clearRight();
+});
+
 onUnmounted(() => {
 	navBarStore.clearRight();
 	window.clearTimeout(keywordTimer);

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,

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"
@@ -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,8 +137,8 @@ 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 ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.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";

src/pages/product/ProductStockRecordList.vue

@@ -71,7 +71,7 @@
 						<div class="description">
 							<pass-time-label :timestamp="record.occurredAt" underline />
 							<div class="delta">
-								<span>库存变更：</span>
+								<span>库存：</span>
 								<span
 									class="value"
 									:class="getDeltaClass(record.onHandDelta)"

src/pages/product/ProductStockSkuList.vue

@@ -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,25 +68,19 @@
 							/>
 							<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>库存</span>
-								<strong v-text="getProductQuantityText(item.onHandQuantity)" />
+									<strong v-text="getStockQuantityText(item, item.onHandQuantity)" />
 								</span>
 								<span class="available">
 									<span>可用</span>
-								<strong v-text="getProductQuantityText(item.availableQuantity)" />
+									<strong v-text="getStockQuantityText(item, item.availableQuantity)" />
 								</span>
 								<span class="reserved">
 									<span>预占</span>
-								<strong v-text="getProductQuantityText(item.reservedQuantity)" />
+									<strong v-text="getStockQuantityText(item, item.reservedQuantity)" />
 								</span>
 							</div>
 						</template>
@@ -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,52 @@ 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 getSelectedUnitName(item: ProductStock): string {
+	return getSelectedUnit(item)?.name || "基础单位";
+}
+
+function getStockQuantityText(item: ProductStock, value?: number | string): string {
+	const quantity = convertBaseQuantityToPackageQuantity(value ?? "0", getSelectedUnit(item)?.baseQuantityPerUnit ?? "1");
+	return getProductQuantityText(quantity);
+}
+
+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 +205,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 +224,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 +244,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 +253,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 {
@@ -279,6 +352,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 +381,7 @@ onUnmounted(() => {
 					.title {
 						gap: .5rem;
 						min-width: 0;
+						max-width: 100%;
 						flex: 1;
 						display: flex;
 						align-items: center;
@@ -309,6 +393,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/ProductSkuEditor.vue

@@ -1,30 +1,14 @@
 <template>
 	<t-swipe-cell class="sku-cell item">
-		<t-cell role="button" tabindex="0" arrow @click="openEditor">
+		<t-cell
+			role="button"
+			tabindex="0"
+			arrow
+			@click="openEditor"
+		>
 			<template #title>
 				<div class="title">
-					<t-tag size="small" variant="light" :content="sku.code"/>
-					<strong class="title clip-text" v-text="skuTitle" />
-				</div>
-			</template>
-			<template #note>
-				<t-tag
-					size="small"
-					variant="light"
-					:theme="sku.status === 'ACTIVE' ? 'success' : 'warning'"
-					:content="sku.status === 'ACTIVE' ? '启用' : '停用'"
-				/>
-			</template>
-			<template #description>
-				<div class="tags">
-					<t-tag
-						v-for="entry in skuSpecEntries"
-						:key="`${entry.specName}-${entry.valueName}`"
-						size="small"
-						theme="primary"
-						variant="light-outline"
-						:content="entry.valueName"
-					/>
+					<strong class="name clip-text" v-text="skuTitle" />
 					<t-tag
 						v-if="sku.stockEnabled"
 						theme="warning"
@@ -39,6 +23,14 @@
 					/>
 				</div>
 			</template>
+			<template #note>
+				<t-tag
+					size="small"
+					variant="light"
+					:theme="sku.status === 'ACTIVE' ? 'success' : 'warning'"
+					:content="sku.status === 'ACTIVE' ? '启用' : '停用'"
+				/>
+			</template>
 		</t-cell>
 		<template #right>
 			<t-button class="delete-action swipe-cell-button" theme="danger" @click.stop="requestRemove">
@@ -59,28 +51,7 @@
 		@right-button-click="closeEditor"
 	>
 		<div class="sku-popup">
-			<div class="header">
-				<span class="index" v-text="String(props.skuIndex + 1).padStart(2, '0')" />
-				<strong v-text="skuTitle" />
-			</div>
-			<div class="hero">
-				<div class="title">
-					<strong>销售规格</strong>
-					<span v-if="sku.specSummary" v-text="`摘要：${sku.specSummary}`" />
-				</div>
-				<div v-if="skuSpecEntries.length" class="spec-list">
-					<div
-						v-for="entry in skuSpecEntries"
-						:key="`${entry.specName}-${entry.valueName}`"
-						class="item"
-					>
-						<span class="name" v-text="entry.specName" />
-						<strong class="value clip-text" v-text="entry.valueName" />
-					</div>
-				</div>
-				<div v-else class="sku-spec-empty" v-text="props.specList.length ? '请重新生成 SKU 明细以匹配规格项和规格值' : '无多规格产品，使用默认 SKU'" />
-			</div>
-			<t-form class="form" label-align="left" label-width="5rem">
+			<t-form class="form" label-align="left" label-width="5.5rem">
 				<t-form-item label="SKU 编码" required-mark help="门店内唯一；已有 SKU 修改失败时请保留原编码">
 					<t-input v-model.trim="sku.code" borderless maxlength="64" placeholder="如 TSHIRT-RED-M" />
 				</t-form-item>
@@ -106,7 +77,7 @@
 					<t-input v-model.trim="sku.remark" borderless maxlength="255" placeholder="选填" />
 				</t-form-item>
 				<div class="photo-wrap">
-					<photo-scroller
+					<media-selector
 						:model-value="photoUrlList"
 						v-model:photo-items="sku.photoItemList"
 						title="SKU 图片（选填）"
@@ -120,16 +91,7 @@
 					<strong>销售单位</strong>
 					<span>采购、销售和库存操作共用</span>
 				</div>
-				<div class="items">
-					<div
-						v-for="unit in sku.unitList"
-						:key="unit.clientKey"
-						class="item"
-					>
-						<strong v-text="unit.name || '未命名单位'" />
-						<span v-text="getUnitSummary(unit)" />
-					</div>
-				</div>
+				<product-sku-unit-list :unit-list="sku.unitList" />
 				<t-button
 					class="cell-button"
 					variant="dashed"
@@ -146,9 +108,9 @@
 <script setup lang="ts">
 import { BottomPopup } from "timi-tdesign-mobile";
 import type { ProductType } from "@/types/Product";
-import type { ProductSkuForm, ProductSpecForm, ProductSkuUnitForm } from "@/types/ProductEditor";
-import PhotoScroller from "@/components/PhotoScroller.vue";
-import { formatProductAmount, getProductSkuSpecEntries, parseProductAmount } from "@/utils/product";
+import type { ProductSkuForm, ProductSpecForm } from "@/types/ProductEditor";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
+import ProductSkuUnitList from "@/pages/product/component/ProductSkuUnitList.vue";
 import { uploadPhotoList } from "@/utils/photo";
 
 defineOptions({ name: "ProductSkuEditor" });
@@ -168,8 +130,7 @@ const emit = defineEmits<{
 const editorVisible = ref(false);
 const skuEditorZIndex = 12000;
 const photoUrlList = computed(() => sku.value.photoItemList.map(item => item.url));
-const skuSpecEntries = computed(() => getProductSkuSpecEntries(sku.value, props.specList));
-const skuTitle = computed(() => props.specList.length ? `SKU 明细 ${props.skuIndex + 1}` : "默认 SKU");
+const skuTitle = computed(() => sku.value.name?.trim() || sku.value.specSummary?.trim() || (props.specList.length ? `SKU 明细 ${props.skuIndex + 1}` : "默认 SKU"));
 
 function openEditor(): void {
 	editorVisible.value = true;
@@ -193,14 +154,6 @@ function setSkuStatus(value: boolean | string | number): void {
 	sku.value.status = active ? "ACTIVE" : "INACTIVE";
 }
 
-function getUnitSummary(unit: ProductSkuUnitForm): string {
-	const quantityText = unit.isBase ? "基础单位" : `1 ${unit.name || "单位"} = ${unit.baseQuantityPerUnit || "?"} 基础单位`;
-	const salePrice = parseProductAmount(unit.salePriceText);
-	const priceText = salePrice === undefined ? "未定价" : `￥${formatProductAmount(salePrice)}`;
-	const saleText = unit.allowSale ? "可销售" : "停售";
-	const purchaseText = unit.allowPurchase ? "可采购" : "禁采购";
-	return `${quantityText} · ${priceText} · ${saleText} · ${purchaseText}`;
-}
 </script>
 
 <style scoped lang="less">
@@ -208,19 +161,19 @@ function getUnitSummary(unit: ProductSkuUnitForm): string {
 
 	.title {
 		gap: .5rem;
+		min-width: 0;
 		display: flex;
+		overflow: hidden;
 
-		.title {
+		.name {
+			flex: 1;
+			min-width: 0;
 			font-size: .875rem;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
 		}
 	}
-
-	.tags {
-		gap: .5rem;
-		margin-top: .5rem;
-		display: flex;
-		flex-wrap: wrap;
-	}
 }
 
 .sku-popup {
@@ -228,77 +181,6 @@ function getUnitSummary(unit: ProductSkuUnitForm): string {
 	max-height: 100%;
 	overflow-y: auto;
 
-	.header {
-		gap: .5rem;
-		display: flex;
-		padding: 0 1rem .75rem;
-		align-items: center;
-		justify-content: space-between;
-
-		.index {
-			flex: none;
-			width: 1.75rem;
-			height: 1.75rem;
-			color: var(--td-brand-color);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			background: var(--td-brand-color-1);
-			border-radius: .625rem;
-			font-size: .6875rem;
-			font-weight: 700;
-		}
-	}
-
-	.hero {
-		margin: 0 .75rem .75rem;
-		padding: .75rem;
-		background: var(--td-bg-color-secondarycontainer);
-		border-radius: .875rem;
-
-		.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;
-			}
-		}
-
-		.spec-list {
-			gap: .5rem;
-			display: grid;
-			margin-top: .625rem;
-			grid-template-columns: repeat(3, minmax(0, 1fr));
-
-			.item {
-				gap: .375rem;
-				min-width: 0;
-				display: flex;
-				padding: .25rem .5rem;
-				align-items: baseline;
-				background: var(--td-bg-color-container);
-				border-radius: .625rem;
-
-				.name {
-					flex: none;
-					color: var(--td-text-color-secondary);
-					font-size: .75rem;
-				}
-
-				.value {
-					font-size: .875rem;
-				}
-			}
-		}
-	}
-
 	.form {
 
 		.photo-wrap {
@@ -323,40 +205,6 @@ function getUnitSummary(unit: ProductSkuUnitForm): string {
 			}
 		}
 
-		.items {
-			gap: .5rem;
-			display: flex;
-			padding: 0 1rem .5rem;
-			flex-direction: column;
-
-			.item {
-				gap: .5rem;
-				min-width: 0;
-				display: flex;
-				padding: .625rem .75rem;
-				align-items: center;
-				background: var(--td-bg-color-secondarycontainer);
-				border-radius: .75rem;
-				justify-content: space-between;
-
-				strong {
-					max-width: 5rem;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-
-				span {
-					min-width: 0;
-					color: var(--td-text-color-secondary);
-					font-size: .75rem;
-					text-align: right;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-			}
-		}
 	}
 }
 

src/pages/product/component/ProductSkuUnitEditor.vue

@@ -1,8 +1,7 @@
 <template>
 	<bottom-popup
 		v-model="visible"
-		title="配置 SKU 单位"
-		height="min(88vh, 48rem)"
+		height="min(78vh, 48rem)"
 		left-button-text="关闭"
 		right-button-text="完成"
 		:z-index="unitEditorZIndex"
@@ -10,23 +9,18 @@
 		@left-button-click="close"
 		@right-button-click="close"
 	>
-		<div v-if="sku" class="unit-editor">
-			<div class="editor-context">
-				<span class="context-label">当前 SKU 明细</span>
-				<strong class="context-title" v-text="sku.name || sku.specSummary || '默认 SKU'" />
-				<div v-if="skuSpecEntries.length" class="context-spec-list">
-					<div v-for="entry in skuSpecEntries" :key="`${entry.specName}-${entry.valueName}`" class="context-spec">
-						<span v-text="entry.specName" />
-						<strong v-text="entry.valueName" />
-					</div>
-				</div>
-				<span v-else class="context-empty">无多规格</span>
-				<div class="context-count" v-text="`${sku.unitList.length} 个单位`" />
-			</div>
-
-			<div class="unit-list">
-				<div v-for="(unit, unitIndex) in sku.unitList" :key="unit.clientKey" class="unit-card">
-					<div class="unit-card-header">
+		<template #title v-if="sku">
+			<span>配置</span>
+			<span class="word-space" v-text="sku.name || sku.specSummary || '默认 SKU'" />
+			<span>单位</span>
+		</template>
+		<div v-if="sku" class="product-sku-unit-editor">
+			<div
+				class="item"
+				v-for="(unit, unitIndex) in sku.unitList"
+				:key="unit.clientKey"
+			>
+				<div class="header">
 					<strong v-text="`单位 ${unitIndex + 1}`" />
 				<t-button
 					v-if="1 < sku.unitList.length"
@@ -38,7 +32,7 @@
 					@click="removeUnit(unitIndex)"
 				/>
 				</div>
-					<t-form class="unit-form" label-align="left" label-width="6rem">
+				<t-form class="form" label-align="left" label-width="6rem">
 					<t-form-item label="单位名称" required-mark>
 						<t-input v-model.trim="unit.name" borderless maxlength="32" placeholder="如 件、盒、箱" />
 					</t-form-item>
@@ -62,13 +56,11 @@
 			<t-button
 				class="add"
 				variant="dashed"
-					size="small"
 				theme="light"
 				content="添加 SKU 单位"
 				@click="addUnit"
 			/>
 		</div>
-		</div>
 	</bottom-popup>
 </template>
 
@@ -170,76 +162,20 @@ function setBaseUnit(index: number): void {
 </script>
 
 <style scoped lang="less">
-.unit-editor {
-	max-height: 100%;
-	overflow-y: auto;
-	padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
-
-	.editor-context {
-		margin: 0 1rem .75rem;
-		padding: .75rem;
-		background: var(--td-bg-color-secondarycontainer);
-		border-radius: .875rem;
-
-		.context-label,
-		.context-empty {
-			color: var(--td-text-color-secondary);
-			font-size: .75rem;
-		}
-
-		.context-label {
-			display: block;
-			margin-bottom: .25rem;
-		}
-
-		.context-title {
-			display: block;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-
-		.context-spec-list {
-			gap: .375rem;
-			display: flex;
-			margin-top: .625rem;
-			flex-wrap: wrap;
-		}
-
-		.context-spec {
-			gap: .25rem;
-			display: flex;
-			padding: .25rem .5rem;
-			background: var(--td-bg-color-container);
-			border-radius: .5rem;
-			font-size: .75rem;
-
-			span {
-				color: var(--td-text-color-secondary);
-			}
-		}
-
-		.context-count {
-			margin-top: .625rem;
-			color: var(--td-text-color-secondary);
-			font-size: .75rem;
-		}
-	}
-
-	.unit-list {
+.product-sku-unit-editor {
 	gap: .75rem;
 	display: flex;
-		padding: 0 1rem 1rem;
+	padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
+	max-height: 100%;
+	overflow-y: auto;
 	flex-direction: column;
-	}
 
-	.unit-card {
+	.item {
 		border: 1px solid var(--td-component-border);
 		padding: .5rem 0;
 		border-radius: .75rem;
-	}
 
-	.unit-card-header {
+		.header {
 			gap: .5rem;
 			display: flex;
 			padding: 0 .75rem .5rem;
@@ -247,9 +183,10 @@ function setBaseUnit(index: number): void {
 			justify-content: space-between;
 		}
 
-	.unit-form {
+		.form {
 			margin: 0 .75rem;
 		}
+	}
 
 	.add {
 		--td-button-border-radius: 1rem;

src/pages/product/component/ProductSkuUnitList.vue

@@ -0,0 +1,128 @@
+<template>
+	<t-cell-group
+		v-if="unitList.length"
+		class="items empty-cell-title-margin"
+		theme="card"
+	>
+		<t-cell
+			v-for="unit in unitList"
+			:key="unit.id || unit.clientKey || unit.name"
+			class="item"
+		>
+			<template #title>
+				<div class="title">
+					<strong v-text="unit.name || '未命名单位'" />
+					<div class="transfer" v-text="getUnitDescription(unit)" />
+				</div>
+			</template>
+			<template #description>
+				<div class="description">
+					<t-tag
+						v-if="unit.isBase"
+						size="small"
+						theme="primary"
+						variant="light-outline"
+						content="基础"
+					/>
+					<t-tag
+						size="small"
+						variant="light-outline"
+						:theme="unit.allowSale ? 'success' : 'default'"
+						:content="unit.allowSale ? '可销售' : '停售'"
+					/>
+					<t-tag
+						size="small"
+						variant="light-outline"
+						:theme="unit.allowPurchase ? 'primary' : 'default'"
+						:content="unit.allowPurchase ? '可采购' : '禁采购'"
+					/>
+				</div>
+			</template>
+			<template #note>
+				<div class="note">
+					<span
+						v-if="getSalePrice(unit) !== undefined"
+						class="price"
+						v-text="`￥${formatProductAmount(getSalePrice(unit))}`"
+					/>
+					<t-tag
+						v-else
+						size="small"
+						theme="warning"
+						variant="light-outline"
+						content="未定价"
+					/>
+				</div>
+			</template>
+		</t-cell>
+	</t-cell-group>
+</template>
+
+<script setup lang="ts">
+import type { ProductSkuUnit } from "@/types/Product";
+import type { ProductSkuUnitForm } from "@/types/ProductEditor";
+import { formatProductAmount, getProductQuantityText, parseProductAmount } from "@/utils/product";
+
+defineOptions({ name: "ProductSkuUnitList" });
+
+type ProductSkuUnitItem = ProductSkuUnit & Partial<Pick<ProductSkuUnitForm, "clientKey" | "salePriceText">>;
+
+const props = defineProps<{
+	unitList?: ProductSkuUnitItem[];
+}>();
+
+const unitList = computed(() => props.unitList || []);
+
+function getUnitDescription(unit: ProductSkuUnitItem): string {
+	if (unit.isBase) {
+		return "";
+	}
+	const baseUnitName = unitList.value.find(item => item.isBase)?.name || "基础单位";
+	return `1 ${unit.name || "单位"} = ${getProductQuantityText(unit.baseQuantityPerUnit)} ${baseUnitName}`;
+}
+
+function getSalePrice(unit: ProductSkuUnitItem): number | undefined {
+	if (unit.salePriceText !== undefined) {
+		return parseProductAmount(unit.salePriceText);
+	}
+	return unit.salePrice ?? undefined;
+}
+</script>
+
+<style scoped lang="less">
+.items {
+	margin: 0;
+
+	:deep(.t-cell-group) {
+		margin: 0;
+	}
+
+	.item {
+
+		.title {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
+
+			.transfer {
+				color: var(--td-text-color-secondary);
+				font-size: .75rem;
+				line-height: 1.5;
+			}
+		}
+
+		.note {
+
+			.price {
+				color: var(--td-error-color);
+				font-weight: 600;
+			}
+		}
+
+		.description {
+			gap: .5rem;
+			display: flex;
+		}
+	}
+}
+</style>

src/pages/salesOrder/FundRecordDetail.vue

@@ -42,7 +42,7 @@
 					@click="toSalesOrder"
 				/>
 				<div class="photo-wrap bg-white">
-					<photo-scroller
+					<media-selector
 						:model-value="photoURLList"
 						:photo-items="photoItems"
 						title="业务照片"
@@ -124,7 +124,7 @@ import { DialogPlugin } from "tdesign-mobile-vue";
 import { PassTimeLabel, Text } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { FundRecord, FundRecordStatus } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";

src/pages/salesOrder/FundRecordList.vue

@@ -1,6 +1,36 @@
 <template>
 	<div v-can="pageAccess" class="sales-order-record-list">
 		<div class="filters">
+			<t-input
+				class="customer"
+				v-model.trim="customerSearchKeyword"
+				borderless
+				placeholder="输入客户编码或姓名"
+				@enter="applyCustomerSearch"
+			>
+				<template #suffix-icon>
+					<div class="actions">
+						<t-button
+							v-if="customerId"
+							shape="circle"
+							theme="danger"
+							variant="text"
+							size="extra-small"
+							aria-label="清除客户选择"
+							@click.stop="clearCustomer"
+						>
+							<t-icon name="close" size="1rem" />
+						</t-button>
+						<t-button
+							size="extra-small"
+							theme="primary"
+							variant="outline"
+							content="选择客户"
+							@click.stop="customerSelectorVisible = true"
+						/>
+					</div>
+				</template>
+			</t-input>
 			<t-dropdown-menu class="menus">
 				<t-dropdown-item
 					v-if="!isSelfReceiveOnly"
@@ -89,13 +119,21 @@
 			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
+	<customer-selector
+		v-model="customerId"
+		v-model:visible="customerSelectorVisible"
+		@change="handleCustomerChange"
+	/>
 </template>
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
 import { useUserStore } from "timi-web-api";
+import CustomerAPI from "@/api/CustomerAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
+import CustomerSelector from "@/components/CustomerSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
+import type { Customer } from "@/types/Customer";
 import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount } from "@/utils/package";
@@ -119,6 +157,10 @@ const total = ref(0);
 const loading = ref(false);
 const isRefreshing = ref(false);
 const noMore = ref(false);
+const customerId = ref(getQueryText(route.query.customerId));
+const selectedCustomer = ref<Customer>();
+const customerSelectorVisible = ref(false);
+const customerSearchKeyword = ref("");
 const isSelfReceiveOnly = computed(() => !userStore.hasPermissions(permissionCodes.fundRecord.read)
 	&& userStore.hasPermissions(permissionCodes.fundReceive.create));
 const pageAccess = computed(() => [permissionCodes.fundRecord.read, permissionCodes.fundReceive.create]);
@@ -138,6 +180,10 @@ const statusOptions = [
 ];
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
 
+function getQueryText(value: unknown): string {
+	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
+}
+
 async function loadMore(): Promise<void> {
 	if (loading.value || noMore.value) {
 		return;
@@ -148,6 +194,7 @@ async function loadMore(): Promise<void> {
 			index: pageIndex.value,
 			size: 15,
 			salesOrderId: String(route.query.salesOrderId || "") || undefined,
+			customerId: customerId.value || undefined,
 			operationType: isSelfReceiveOnly.value || operationType.value === "ALL" ? undefined : operationType.value as FundOperationType,
 			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus
 		};
@@ -164,6 +211,53 @@ async function loadMore(): Promise<void> {
 	}
 }
 
+async function handleCustomerChange(value: string | string[]): Promise<void> {
+	customerId.value = Array.isArray(value) ? String(value[0] || "") : value;
+	try {
+		selectedCustomer.value = customerId.value ? await CustomerAPI.detail(customerId.value) : undefined;
+		customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
+		await reload();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "客户资金流水加载失败"));
+	}
+}
+
+async function applyCustomerSearch(): Promise<void> {
+	const keyword = customerSearchKeyword.value.trim();
+	if (!keyword) {
+		await clearCustomer();
+		return;
+	}
+	if (keyword === getCustomerSearchKeyword(selectedCustomer.value)) {
+		return;
+	}
+
+	try {
+		const customer = await CustomerAPI.findByCode(keyword) || await CustomerAPI.findByName(keyword);
+		if (!customer?.id) {
+			Message.warning("未找到客户");
+			return;
+		}
+		customerId.value = customer.id;
+		selectedCustomer.value = customer;
+		customerSearchKeyword.value = getCustomerSearchKeyword(customer);
+		await reload();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "客户信息加载失败"));
+	}
+}
+
+function getCustomerSearchKeyword(customer?: Customer): string {
+	return customer?.name?.trim() || customer?.code?.trim() || "";
+}
+
+async function clearCustomer(): Promise<void> {
+	customerId.value = "";
+	selectedCustomer.value = undefined;
+	customerSearchKeyword.value = "";
+	await reload();
+}
+
 async function reload(): Promise<void> {
 	if (loading.value) {
 		return;
@@ -236,6 +330,10 @@ function getCurrentRouteDepth(): number {
 onMounted(async () => {
 	navBarStore.clearRight();
 	try {
+		if (customerId.value) {
+			selectedCustomer.value = await CustomerAPI.detail(customerId.value);
+			customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
+		}
 		await reload();
 	} catch (error) {
 		Message.error(getErrorMessage(error, "资金流水加载失败"));
@@ -261,29 +359,35 @@ onUnmounted(() => navBarStore.clearRight());
 		box-shadow: var(--td-shadow-1);
 		flex-direction: column;
 
+		.customer {
+			--td-button-border-radius: .75rem;
+			--td-input-vertical-padding: .25rem 1rem;
+
+			border: 1px solid var(--td-component-border);
+			z-index: 2;
+			background: var(--td-bg-color-container);
+			padding-right: .3rem;
+			border-radius: 1rem;
+
+			.actions {
+				gap: .25rem;
+				display: flex;
+				align-items: center;
+			}
+		}
+
 		.menus {
 			--td-spacer-1: 6px;
 
 			width: 100%;
 			border: 1px solid rgba(148, 163, 184, .18);
+			z-index: -1;
 			overflow: hidden;
+			margin-top: -1rem;
 			background: #fff;
 			border-top: none;
-			border-radius: 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;
-			}
+			padding-top: .8rem;
+			border-radius: 0 0 1rem 1rem;
 		}
 	}
 

src/pages/salesOrder/FundRecordRevoke.vue

@@ -56,7 +56,7 @@
 				/>
 			</t-form-item>
 			<div class="photo-wrap">
-				<photo-scroller
+				<media-selector
 					v-if="record"
 					:model-value="photoUrlList"
 					v-model:photo-items="photoItems"
@@ -87,7 +87,7 @@
 import { Time } from "timi-web";
 import { useUserStore, type Attachment } from "timi-web-api";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { FundRecord } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";

src/pages/salesOrder/SalesOrderCreate.vue

@@ -62,9 +62,6 @@
 								required-mark
 								@update:model-value="applyProduct(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="canPriceOverride ? '成交单价' : '单价'">
 								<t-input
 									v-model.trim="item.unitPriceText"
@@ -175,7 +172,7 @@
 				</div>
 			</t-form-item>
 			<t-form-item v-if="(paymentVerified && paymentAmount) || (receiveFullPayment && totalAmount)" label-width="0">
-				<photo-scroller
+				<media-selector
 					:model-value="paymentPhotoUrlList"
 					v-model:photo-items="paymentPhotoItems"
 					:upload="uploadPhotoList"
@@ -184,7 +181,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"
@@ -196,7 +193,7 @@
 				<t-textarea v-model="remark" class="textarea" borderless autosize maxlength="500" placeholder="记录本单需要注意的内容" />
 			</t-form-item>
 			<div class="photo-part">
-				<photo-scroller :model-value="photoUrlList" v-model:photo-items="photoItems" :upload="uploadPhotoList" :edit-mode="true" title="订单照片（选填）" />
+				<media-selector :model-value="photoUrlList" v-model:photo-items="photoItems" :upload="uploadPhotoList" :edit-mode="true" title="订单照片（选填）" />
 			</div>
 		</t-form>
 		<div class="submit-wrap glass-white bg-white">
@@ -232,7 +229,7 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
 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 ProductStockPreview from "@/components/ProductStockPreview.vue";
 import type { Customer } from "@/types/Customer";
 import type { Product, ProductSku, ProductSkuUnit } from "@/types/Product";

src/pages/salesOrder/SalesOrderDetail.vue

@@ -28,8 +28,8 @@
 					<span v-else v-text="Text.display(order.remark)" />
 				</t-form-item>
 				<t-form-item label-width="0">
-					<div class="photo-wrap">
-						<photo-scroller
+					<div class="photo-wrap" v-entrance-transition="105">
+						<media-selector
 							:model-value="photoURLList"
 							v-model:photo-items="photoItems"
 							:edit-mode="isEditing"
@@ -38,7 +38,6 @@
 							:show-viewer-actions="isEditing"
 							:upload="isEditing ? uploadPhotoList : undefined"
 							title="订单照片"
-							v-entrance-transition="105"
 						/>
 					</div>
 				</t-form-item>
@@ -113,7 +112,7 @@
 										v-text="`￥${formatPackageAmount(item.lineAmount)}`"
 									/>
 									<t-tag v-else size="small" content="套餐权益" />
-									<product-sku-snapshot-tags
+									<product-sku-tags
 										:product-name="item.productNameSnapshot"
 										:snapshot="item.skuSpecSnapshot"
 										:fallback="item.specSummarySnapshot || item.skuNameSnapshot"
@@ -225,8 +224,8 @@ import { type Attachment, useUserStore } from "timi-web-api";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import PhotoScroller from "@/components/PhotoScroller.vue";
-import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
+import ProductSkuTags from "@/components/ProductSkuTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoSalesOrderItem, GaoSalesPaymentStatus, SalesOrder } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";

src/pages/salesOrder/SalesOrderList.vue

@@ -1,7 +1,7 @@
 <template>
-	<div v-can="permissionCodes.salesOrder.read" class="sales-order-list">
+	<div ref="salesOrderListRef" v-can="permissionCodes.salesOrder.read" class="sales-order-list">
 		<div class="filters">
-			<div class="search-status">
+			<div class="search-row">
 				<t-input
 					v-model.trim="keyword"
 					class="keyword"
@@ -21,35 +21,19 @@
 						</div>
 					</template>
 				</t-input>
-				<t-dropdown-menu class="status">
-					<t-dropdown-item
-						v-model="status"
-						label="订单状态"
-						:options="statusOptions"
-						@change="selectStatus"
-					/>
-				</t-dropdown-menu>
+				<t-button
+					class="filter-button"
+					size="small"
+					theme="light"
+					variant="outline"
+					@click="filterVisible = true"
+				>
+					<template #icon>
+						<t-icon name="filter-1" />
+					</template>
+					<span>筛选</span>
+				</t-button>
 			</div>
-			<t-dropdown-menu class="menus">
-				<t-dropdown-item
-					v-model="orderType"
-					label="订单类型"
-					:options="orderTypeOptions"
-					@change="selectOrderType"
-				/>
-				<t-dropdown-item
-					v-model="paymentStatus"
-					label="收款状态"
-					:options="paymentOptions"
-					@change="selectPaymentStatus"
-				/>
-				<t-dropdown-item
-					v-model="refundStatus"
-					label="退款状态"
-					:options="refundOptions"
-					@change="selectRefundStatus"
-				/>
-			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
 			class="list-wrap"
@@ -58,11 +42,29 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
-			<div v-if="list.length" class="items">
+			<div class="items">
+				<sales-order-summary
+					v-if="customerId"
+					ref="customerOrderSummaryRef"
+					:customer="selectedCustomer"
+				/>
+				<t-cell-group v-if="packageConfigId" class="selected-package" theme="card">
+					<t-cell title="套餐" :note="selectedPackageName">
+						<template #left-icon>
+							<t-icon name="layers" />
+						</template>
+					</t-cell>
+				</t-cell-group>
+				<sales-order-filter-summary
+					:filter="appliedFilter"
+					:total="total"
+					:package-config-id="packageConfigId"
+					@confirm="confirmFilter"
+				/>
 				<sales-order-list-cell
-					class="item"
 					v-for="(item, index) in list"
 					:key="item.id"
+					class="item"
 					:order="item"
 					:can-receive="canReceive"
 					:can-fulfill="canCreateFulfillment"
@@ -77,38 +79,69 @@
 					@refund="toRefund(item)"
 					@confirm-no-refund="toNoRefund(item)"
 				/>
+				<div v-if="!list.length" class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
 			</div>
-			<div v-else class="center-tips" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
 			<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
-	<nav-bar-action-menu v-if="actions.length" :actions="actions" />
+	<nav-bar-action-menu v-if="route.name === 'SalesOrderList' && actions.length" :actions="actions" />
 	<customer-selector
 		v-model="customerId"
 		v-model:visible="customerSelectorVisible"
 		@change="handleCustomerChange"
 	/>
+	<sales-order-filter-popup
+		v-model:visible="filterVisible"
+		:model-value="appliedFilter"
+		:package-config-id="packageConfigId"
+		@confirm="confirmFilter"
+	/>
 </template>
 
 <script setup lang="ts">
-import { type DropdownValue } from "tdesign-mobile-vue";
 import { Toolkit } from "timi-web";
 import { useUserStore } from "timi-web-api";
+import { onBeforeRouteLeave } from "vue-router";
 import CustomerAPI from "@/api/CustomerAPI";
+import PackageAPI from "@/api/PackageAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import SalesOrderFilterPopup from "@/pages/salesOrder/components/SalesOrderFilterPopup.vue";
+import SalesOrderFilterSummary from "@/pages/salesOrder/components/SalesOrderFilterSummary.vue";
 import SalesOrderListCell from "@/pages/salesOrder/components/SalesOrderListCell.vue";
+import SalesOrderSummary from "@/pages/salesOrder/components/SalesOrderSummary.vue";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
-import type { GaoSalesOrderStatus, GaoSalesOrderType, GaoSalesPaymentStatus, GaoSalesRefundStatus, SalesOrder, SalesOrderPage } from "@/types/SalesOrder";
+import type { GaoPackageConfig } from "@/types/Package";
+import type {
+	GaoSalesOrderStatus,
+	GaoSalesOrderType,
+	GaoSalesPaymentStatus,
+	GaoSalesRefundStatus,
+	SalesOrder,
+	SalesOrderPage
+} from "@/types/SalesOrder";
+import {
+	cloneSalesOrderFilter,
+	createDefaultSalesOrderFilter,
+	normalizeSalesOrderFilter,
+	type SalesOrderListFilter,
+	type SalesOrderPaymentFilter
+} from "@/types/SalesOrderFilter";
+import { buildPresetDateRange, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
 defineOptions({ name: "SalesOrderList" });
+
+const SALES_ORDER_FILTER_STORAGE_KEY = "gao-customer-h5:sales-order-filter";
 const route = useRoute();
 const router = useRouter();
+const salesOrderListRef = ref<HTMLElement | null>(null);
+const currentStoreStore = useCurrentStoreStore();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.create));
@@ -118,6 +151,38 @@ const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionC
 const canCancel = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.cancel));
 const canRefund = computed(() => userStore.hasPermissions(permissionCodes.fund.refund));
 const canStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager));
+let savedPageScrollTop: number | undefined;
+let shouldReloadOnActivate = false;
+
+function getSalesOrderPage(): HTMLElement | null {
+	return salesOrderListRef.value?.closest<HTMLElement>(".page") || null;
+}
+
+function savePageScrollPosition(): void {
+	const page = getSalesOrderPage();
+	if (!page) {
+		return;
+	}
+
+	savedPageScrollTop = page.scrollTop;
+}
+
+function restorePageScrollPosition(): void {
+	if (savedPageScrollTop === undefined) {
+		return;
+	}
+
+	const scrollTop = savedPageScrollTop;
+	requestAnimationFrame(() => {
+		const page = getSalesOrderPage();
+		if (!page) {
+			return;
+		}
+
+		page.scrollTop = scrollTop;
+		savedPageScrollTop = undefined;
+	});
+}
 const actions = computed(() => [
 	...(canCreate.value ? [{
 		key: "create",
@@ -134,18 +199,48 @@ const actions = computed(() => [
 		action: () => router.push("/management/customer-packages/create")
 	}] : [])
 ]);
+
+// ---------- 顶部搜索和客户 ----------
+
 const keyword = ref("");
 const customerId = ref("");
 const selectedCustomer = ref<Customer>();
 const customerSelectorVisible = ref(false);
 let customerKeyword = "";
-const orderType = ref("ALL");
-type PaymentFilter = "ALL" | GaoSalesPaymentStatus | "PENDING_RECEIVE";
-type RefundFilter = "ALL" | GaoSalesRefundStatus;
+const selectedPackage = ref<GaoPackageConfig>();
+const packageConfigId = computed(() => queryValue(route.query.packageConfigId));
+const selectedPackageName = computed(() => selectedPackage.value?.name || queryValue(route.query.packageConfigName) || "未命名套餐");
 
-const status = ref("ALL");
-const paymentStatus = ref<PaymentFilter>("ALL");
-const refundStatus = ref<RefundFilter>("ALL");
+// ---------- 筛选 ----------
+
+const filterVisible = ref(false);
+const appliedFilter = ref<SalesOrderListFilter>(createDefaultSalesOrderFilter());
+const filterStorageKey = computed(() => `${SALES_ORDER_FILTER_STORAGE_KEY}:${currentStoreStore.currentStoreId || "default"}:${packageConfigId.value || "all"}`);
+const orderTypeOptions: Array<{ label: string; value: GaoSalesOrderType }> = [
+	{ label: "套餐订单", value: "PACKAGE" },
+	{ label: "产品订单", value: "DIRECT_PRODUCT" }
+];
+const statusOptions: Array<{ label: string; value: GaoSalesOrderStatus }> = [
+	{ label: "进行中", value: "ACTIVE" },
+	{ label: "已履约", value: "FULFILLED" },
+	{ label: "已取消", value: "CANCELLED" }
+];
+const paymentOptions: Array<{ label: string; value: SalesOrderPaymentFilter }> = [
+	{ label: "未收清", value: "PENDING_RECEIVE" },
+	{ label: "未收款", value: "UNPAID" },
+	{ label: "部分收款", value: "PARTIALLY_PAID" },
+	{ label: "已收款", value: "PAID" }
+];
+const paymentStatusValues: GaoSalesPaymentStatus[] = ["UNPAID", "PARTIALLY_PAID", "PAID"];
+const refundOptions: Array<{ label: string; value: GaoSalesRefundStatus }> = [
+	{ label: "无需退款", value: "NOT_REQUIRED" },
+	{ label: "待退款", value: "PENDING" },
+	{ label: "已退款", value: "REFUNDED" }
+];
+// ---------- 列表 ----------
+
+type SalesOrderSummaryExpose = { refresh: () => Promise<void> };
+const customerOrderSummaryRef = ref<SalesOrderSummaryExpose>();
 const list = ref<SalesOrder[]>([]);
 const pageIndex = ref(0);
 const total = ref(0);
@@ -153,51 +248,101 @@ const loading = ref(false);
 const refreshing = ref(false);
 const noMore = ref(false);
 const pageSize = 15;
-const orderTypeOptions = [
-	{ label: "全部类型", value: "ALL" },
-	{ label: "套餐订单", value: "PACKAGE" },
-	{ label: "产品订单", value: "DIRECT_PRODUCT" }
-];
-const statusOptions = [
-	{ label: "全部状态", value: "ALL" },
-	{ label: "进行中", value: "ACTIVE" },
-	{ label: "已履约", value: "FULFILLED" },
-	{ label: "已取消", value: "CANCELLED" }
-];
-const paymentOptions = [
-	{ label: "全部收款", value: "ALL" },
-	{ label: "未收清", value: "PENDING_RECEIVE" },
-	{ label: "未收款", value: "UNPAID" },
-	{ label: "部分收款", value: "PARTIALLY_PAID" },
-	{ label: "已收款", value: "PAID" }
-];
-const refundOptions = [
-	{ label: "全部退款", value: "ALL" },
-	{ label: "无需退款", value: "NOT_REQUIRED" },
-	{ label: "待退款", value: "PENDING" },
-	{ label: "已退款", value: "REFUNDED" }
-];
+let listRequestId = 0;
+
+// ---------- 路由和持久化 ----------
 
 const routeFilterKey = computed(() => [
 	route.query.customerId,
+	route.query.packageConfigId,
+	route.query.packageConfigName,
 	route.query.orderType,
 	route.query.status,
 	route.query.paymentStatus,
 	route.query.refundStatus,
 	route.query.pendingReceive
 ].map(queryValue).join("|"));
+let initialized = false;
+let lastAppliedRouteFilterKey = "";
+
+interface PersistedSalesOrderState {
+	filter: SalesOrderListFilter;
+	customerId: string;
+}
 
 function queryValue(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }
 
+function readPersistedState(): PersistedSalesOrderState {
+	try {
+		const value = localStorage.getItem(filterStorageKey.value);
+		const source: unknown = value ? JSON.parse(value) : undefined;
+		const filter = normalizeSalesOrderFilter(source);
+		if (filter.dateFilterType !== "custom") {
+			filter.dateRange = buildPresetDateRange(filter.dateFilterType);
+		}
+		const customerId = source && typeof source === "object" && typeof (source as { customerId?: unknown }).customerId === "string"
+			? (source as { customerId: string }).customerId
+			: "";
+		return { filter, customerId };
+	} catch {
+		return { filter: createDefaultSalesOrderFilter(), customerId: "" };
+	}
+}
+
+function persistFilter(): void {
+	try {
+		localStorage.setItem(filterStorageKey.value, JSON.stringify({
+			...appliedFilter.value,
+			customerId: customerId.value || undefined
+		}));
+	} catch {
+		return;
+	}
+}
+
 function applyRouteFilters(): void {
+	const persistedState = readPersistedState();
+	const nextFilter = persistedState.filter;
+	customerId.value = queryValue(route.query.customerId) || persistedState.customerId;
+	const routeOrderType = queryValue(route.query.orderType);
+	const routeStatus = queryValue(route.query.status);
+	const routePaymentStatus = queryValue(route.query.paymentStatus);
+	const routeRefundStatus = queryValue(route.query.refundStatus);
 	const pendingReceive = queryValue(route.query.pendingReceive) === "true";
-	customerId.value = queryValue(route.query.customerId);
-	orderType.value = queryValue(route.query.orderType) || "ALL";
-	status.value = queryValue(route.query.status) || "ALL";
-	paymentStatus.value = pendingReceive ? "PENDING_RECEIVE" : queryValue(route.query.paymentStatus) as PaymentFilter || "ALL";
-	refundStatus.value = queryValue(route.query.refundStatus) as RefundFilter || "ALL";
+	if (packageConfigId.value) {
+		nextFilter.orderTypeList = ["PACKAGE"];
+	} else if (routeOrderType) {
+		nextFilter.orderTypeList = routeOrderType === "ALL" ? orderTypeOptions.map(item => item.value) : [routeOrderType as GaoSalesOrderType];
+	}
+	if (routeStatus) {
+		nextFilter.statusList = routeStatus === "ALL" ? statusOptions.map(item => item.value) : [routeStatus as GaoSalesOrderStatus];
+	}
+	if (pendingReceive) {
+		nextFilter.statusList = ["ACTIVE", "FULFILLED"];
+		nextFilter.paymentStatusList = ["PENDING_RECEIVE"];
+	} else if (routePaymentStatus) {
+		nextFilter.paymentStatusList = routePaymentStatus === "PENDING_RECEIVE"
+		? ["PENDING_RECEIVE"]
+		: routePaymentStatus === "ALL" ? paymentOptions.map(item => item.value) : [routePaymentStatus as GaoSalesPaymentStatus];
+	}
+	if (routeRefundStatus) {
+		nextFilter.refundStatusList = routeRefundStatus === "ALL" ? refundOptions.map(item => item.value) : [routeRefundStatus as GaoSalesRefundStatus];
+	}
+	appliedFilter.value = nextFilter;
+}
+
+async function loadRoutePackage(): Promise<void> {
+	selectedPackage.value = undefined;
+	if (!packageConfigId.value) {
+		return;
+	}
+	try {
+		selectedPackage.value = await PackageAPI.configDetail(packageConfigId.value);
+	} catch {
+		return;
+	}
 }
 
 function setCustomerKeyword(customer: Customer): void {
@@ -218,26 +363,63 @@ async function loadRouteCustomer(): Promise<void> {
 	setCustomerKeyword(selectedCustomer.value);
 }
 
-async function handleCustomerChange(): Promise<void> {
-	try {
-		await loadRouteCustomer();
-		await fetchList(true);
-	} catch (error) {
+function clearSelectedCustomer(): void {
+	customerId.value = "";
 	selectedCustomer.value = undefined;
-		Message.error(getErrorMessage(error, "客户加载失败"));
+	customerKeyword = "";
+	keyword.value = "";
+}
+
+function resetForProductTab(): void {
+	search.cancel();
+	listRequestId += 1;
+	filterVisible.value = false;
+	customerSelectorVisible.value = false;
+	appliedFilter.value = createDefaultSalesOrderFilter();
+	clearSelectedCustomer();
+	selectedPackage.value = undefined;
+	list.value = [];
+	pageIndex.value = 0;
+	total.value = 0;
+	loading.value = false;
+	refreshing.value = false;
+	noMore.value = false;
+	savedPageScrollTop = undefined;
+	localStorage.removeItem(filterStorageKey.value);
+	const page = getSalesOrderPage();
+	if (page) {
+		page.scrollTop = 0;
 	}
 }
 
+// ---------- 请求筛选 ----------
+
+function getEffectiveList<T>(value: T[], allValues: T[]): T[] | undefined {
+	return value.length && value.length < allValues.length ? value : undefined;
+}
+
+function getPaymentStatusValues(valueList: SalesOrderPaymentFilter[]): GaoSalesPaymentStatus[] {
+	const valueSet = new Set<GaoSalesPaymentStatus>(valueList.filter(value => value !== "PENDING_RECEIVE") as GaoSalesPaymentStatus[]);
+	if (valueList.includes("PENDING_RECEIVE")) {
+		valueSet.add("UNPAID");
+		valueSet.add("PARTIALLY_PAID");
+	}
+	return paymentStatusValues.filter(value => valueSet.has(value));
+}
+
 function buildPageFilter(): SalesOrderPage {
-	const pendingReceive = paymentStatus.value === "PENDING_RECEIVE";
+	const filter = appliedFilter.value;
+	const [beginText, endText] = filter.dateRange;
 	return {
 		customerId: customerId.value || undefined,
+		packageConfigId: packageConfigId.value || undefined,
 		keyword: keyword.value || undefined,
-		orderType: orderType.value === "ALL" ? undefined : orderType.value as GaoSalesOrderType,
-		status: status.value === "ALL" ? undefined : status.value as GaoSalesOrderStatus,
-		paymentStatus: pendingReceive || paymentStatus.value === "ALL" ? undefined : paymentStatus.value as GaoSalesPaymentStatus,
-		refundStatus: refundStatus.value === "ALL" ? undefined : refundStatus.value as GaoSalesRefundStatus,
-		pendingReceive: pendingReceive ? true : undefined,
+		orderTypeList: packageConfigId.value ? ["PACKAGE"] : getEffectiveList(filter.orderTypeList, orderTypeOptions.map(item => item.value)),
+		statusList: getEffectiveList(filter.statusList, statusOptions.map(item => item.value)),
+		paymentStatusList: getEffectiveList(getPaymentStatusValues(filter.paymentStatusList), paymentStatusValues),
+		refundStatusList: getEffectiveList(filter.refundStatusList, refundOptions.map(item => item.value)),
+		beginAt: beginText ? parseDateTime(beginText, false).getTime() : undefined,
+		endAt: endText ? parseDateTime(endText, true).getTime() : undefined,
 		index: pageIndex.value,
 		size: pageSize
 	};
@@ -245,21 +427,39 @@ function buildPageFilter(): SalesOrderPage {
 
 async function fetchList(reset: boolean): Promise<void> {
 	if (loading.value || (!reset && noMore.value)) return;
-	if (reset) { pageIndex.value = 0; total.value = 0; noMore.value = false; list.value = []; }
+	if (reset) {
+		pageIndex.value = 0;
+		total.value = 0;
+		noMore.value = false;
+		list.value = [];
+	}
+	const requestId = ++listRequestId;
 	loading.value = true;
 	try {
 		const result = await SalesOrderAPI.list(buildPageFilter());
+		if (requestId !== listRequestId) {
+			return;
+		}
 		const rows = result.list || [];
 		list.value = reset ? rows : list.value.concat(rows);
 		total.value = result.total || 0;
 		pageIndex.value += 1;
 		noMore.value = rows.length < pageSize || total.value <= list.value.length;
-	} finally { loading.value = false; }
+	} finally {
+		if (requestId === listRequestId) {
+			loading.value = false;
+		}
+	}
+}
+
+async function reloadList(): Promise<void> {
+	await customerOrderSummaryRef.value?.refresh();
+	await fetchList(true);
 }
 
 async function refresh(): Promise<void> {
 	try {
-		await fetchList(true);
+		await reloadList();
 	} catch (error) {
 		Message.error(getErrorMessage(error, "销售订单加载失败"));
 	} finally {
@@ -275,31 +475,26 @@ async function loadMore(): Promise<void> {
 	}
 }
 
-async function selectOrderType(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		orderType.value = String(value);
-		await fetchList(true);
+async function confirmFilter(value: SalesOrderListFilter): Promise<void> {
+	appliedFilter.value = cloneSalesOrderFilter(value);
+	persistFilter();
+	try {
+		await reloadList();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "销售订单加载失败"));
 	}
 }
 
-async function selectStatus(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		status.value = String(value);
-		await fetchList(true);
-	}
-}
+// ---------- 客户、路由和导航 ----------
 
-async function selectPaymentStatus(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		paymentStatus.value = String(value) as PaymentFilter;
-		await fetchList(true);
-	}
-}
-
-async function selectRefundStatus(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		refundStatus.value = String(value) as RefundFilter;
-		await fetchList(true);
+async function handleCustomerChange(): Promise<void> {
+	try {
+		await loadRouteCustomer();
+		persistFilter();
+		await reloadList();
+	} catch (error) {
+		selectedCustomer.value = undefined;
+		Message.error(getErrorMessage(error, "客户加载失败"));
 	}
 }
 
@@ -334,7 +529,11 @@ const search = Toolkit.debounce(async () => {
 		Message.error(getErrorMessage(error, "销售订单加载失败"));
 	}
 }, false);
+
 watch(keyword, async () => {
+	if (route.name !== "SalesOrderList") {
+		return;
+	}
 	const isCustomerKeyword = !!customerId.value && keyword.value.trim() === customerKeyword;
 	customerKeyword = "";
 	if (isCustomerKeyword) {
@@ -342,29 +541,93 @@ watch(keyword, async () => {
 	}
 	customerId.value = "";
 	selectedCustomer.value = undefined;
+	persistFilter();
 	await search();
 });
-watch(routeFilterKey, async () => {
+
+watch(routeFilterKey, async value => {
+	if (!initialized || route.name !== "SalesOrderList" || value === lastAppliedRouteFilterKey) {
+		return;
+	}
+	lastAppliedRouteFilterKey = value;
 	applyRouteFilters();
 	try {
 		await loadRouteCustomer();
+		await loadRoutePackage();
+		await fetchList(true);
 	} catch {
 		selectedCustomer.value = undefined;
 	}
-	await fetchList(true);
 });
+
+watch(() => currentStoreStore.currentStoreId, async (value, oldValue) => {
+	if (!initialized || value === oldValue || route.name !== "SalesOrderList") {
+		return;
+	}
+	const persistedState = readPersistedState();
+	appliedFilter.value = persistedState.filter;
+	if (!queryValue(route.query.customerId)) {
+		customerId.value = persistedState.customerId;
+	}
+	await loadRouteCustomer();
+	await refresh();
+});
+
 onMounted(async () => {
 	navBarStore.clearRight();
 	navBarStore.setCustomRightVisible(!!actions.value.length);
 	applyRouteFilters();
+	lastAppliedRouteFilterKey = routeFilterKey.value;
 	try {
 		await loadRouteCustomer();
+		await loadRoutePackage();
 		await fetchList(true);
+		initialized = true;
 	} catch (error) {
 		Message.error(getErrorMessage(error, "销售订单加载失败"));
 	}
 });
-onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
+
+onActivated(async () => {
+	if (shouldReloadOnActivate) {
+		shouldReloadOnActivate = false;
+		applyRouteFilters();
+		lastAppliedRouteFilterKey = routeFilterKey.value;
+		try {
+			await loadRouteCustomer();
+			await loadRoutePackage();
+			await fetchList(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "销售订单加载失败"));
+		}
+	} else {
+		restorePageScrollPosition();
+	}
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(!!actions.value.length);
+});
+
+onDeactivated(() => {
+	if (!shouldReloadOnActivate && savedPageScrollTop === undefined) {
+		savePageScrollPosition();
+	}
+	filterVisible.value = false;
+	navBarStore.clearRight();
+});
+
+onBeforeRouteLeave(to => {
+	if (to.name === "ProductTab") {
+		shouldReloadOnActivate = true;
+		resetForProductTab();
+		return;
+	}
+	savePageScrollPosition();
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	search.cancel();
+});
 </script>
 
 <style scoped lang="less">
@@ -376,23 +639,24 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 		left: 0;
 		right: 0;
 		z-index: 10;
-		display: flex;
-		padding: .75rem 1rem;
+		padding: .75rem 1rem .5rem;
 		position: sticky;
-		background: #F5F5F8;
+		background: var(--td-bg-color-page);
 		box-shadow: var(--td-shadow-1);
-		flex-direction: column;
 
-		.search-status {
+		.search-row {
+			gap: .5rem;
 			display: flex;
+			align-items: center;
+		}
 
 		.keyword {
 			--td-button-border-radius: .75rem;
 			--td-input-vertical-padding: .25rem 1rem;
 
 			flex: 1;
+			min-width: 0;
 			border: 1px solid var(--td-component-border);
-				z-index: 2;
 			background: var(--td-bg-color-container);
 			padding-right: .3rem;
 			border-radius: 1rem;
@@ -404,40 +668,22 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 			}
 		}
 
-			.status {
-				--td-spacer: 4px;
-				--td-spacer-1: 6px;
-
-				border: 1px solid rgba(148, 163, 184, .18);
-				z-index: 1;
-				margin-left: -2.5rem;
-				padding-left: 3rem;
-				padding-right: .7rem;
-				border-radius: 1rem;
-
-				&:after {
-					display: none;
-				}
-			}
-		}
-
-		.menus {
-			--td-spacer-1: 6px;
-
-			width: 100%;
-			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;
+		.filter-button {
+			--td-button-border-radius: 99rem;
+			flex: none;
+			height: auto;
+			padding: 0 1.25rem;
+			align-self: stretch;
 		}
 	}
 
 	.list-wrap {
 		padding-top: 1rem;
 
+		:deep(.t-cell-group) {
+			margin: 0;
+		}
+
 		.items {
 			gap: 1rem;
 			display: flex;

src/pages/salesOrder/SalesOrderPayment.vue

@@ -72,7 +72,7 @@
 				/>
 			</t-form-item>
 			<t-form-item label-width="0">
-				<photo-scroller
+				<media-selector
 					v-if="order"
 					:model-value="photoUrlList"
 					v-model:photo-items="photoItems"
@@ -94,7 +94,7 @@
 <script setup lang="ts">
 import { useUserStore, type Attachment } from "timi-web-api";
 import { Time } from "timi-web";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { SalesOrder } from "@/types/SalesOrder";

src/pages/salesOrder/SalesOrderRefund.vue

@@ -75,7 +75,7 @@
 				/>
 			</t-form-item>
 			<t-form-item label-width="0">
-				<photo-scroller
+				<media-selector
 					v-if="order"
 					:model-value="photoUrlList"
 					v-model:photo-items="photoItems"
@@ -116,7 +116,7 @@
 <script setup lang="ts">
 import { Time } from "timi-web";
 import { useUserStore, type Attachment } from "timi-web-api";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { SalesOrder } from "@/types/SalesOrder";

src/pages/salesOrder/components/SalesOrderFilterPopup.vue

@@ -0,0 +1,353 @@
+<template>
+	<filter-popup
+		v-model:visible="popupVisible"
+		:model-value="filterModel"
+		:reset-value="resetFilterModel"
+		:groups="visibleFilterGroups"
+		:title="popupTitle"
+		@update:model-value="updateFilterModel"
+		@reset="reset"
+		@confirm="confirm"
+	>
+		<template #group-date-after>
+			<t-cell-group
+				v-if="draftFilter.dateFilterType === 'custom'"
+				class="date-group"
+			>
+				<t-cell
+					class="date-cell"
+					title="开始时间"
+					:note="draftFilter.dateRange[0] || '请选择'"
+					arrow
+					@click="openStartTime"
+				/>
+				<t-cell
+					class="date-cell"
+					title="结束时间"
+					:note="draftFilter.dateRange[1] || '请选择'"
+					arrow
+					@click="openEndTime"
+				/>
+			</t-cell-group>
+		</template>
+	</filter-popup>
+	<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="startDraft"
+			@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="endDraft"
+			@cancel="cancelEndTime"
+			@confirm="confirmEndTime"
+		/>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import FilterPopup from "@/components/filter-popup/FilterPopup.vue";
+import type { FilterGroup, FilterModel, FilterValueList } from "@/components/filter-popup/FilterPopup";
+import { buildPresetDateRange } from "@/utils/date";
+import type { GaoSalesOrderStatus, GaoSalesOrderType, GaoSalesRefundStatus } from "@/types/SalesOrder";
+import {
+	cloneSalesOrderFilter,
+	createDefaultSalesOrderFilter,
+	type SalesOrderDateFilterType,
+	type SalesOrderFilterGroupKey,
+	type SalesOrderListFilter,
+	type SalesOrderPaymentFilter
+} from "@/types/SalesOrderFilter";
+import { Message } from "@/utils/message";
+
+interface Props {
+	modelValue: SalesOrderListFilter;
+	visible: boolean;
+	packageConfigId?: string;
+	filterKey?: SalesOrderFilterGroupKey;
+}
+
+const props = withDefaults(defineProps<Props>(), { packageConfigId: "" });
+const emit = defineEmits<{
+	"update:visible": [value: boolean];
+	confirm: [value: SalesOrderListFilter];
+}>();
+
+const popupVisible = computed({
+	get: () => props.visible,
+	set: value => emit("update:visible", value)
+});
+const draftFilter = ref<SalesOrderListFilter>(cloneSalesOrderFilter(props.modelValue));
+const startVisible = ref(false);
+const endVisible = ref(false);
+const startDraft = ref("");
+const endDraft = ref("");
+const dateOptions: Array<{ label: string; value: SalesOrderDateFilterType }> = [
+	{ label: "全部时间", value: "all" },
+	{ label: "今天", value: "today" },
+	{ label: "昨天", value: "yesterday" },
+	{ label: "本周", value: "thisWeek" },
+	{ label: "本月", value: "thisMonth" },
+	{ label: "最近 30 天", value: "last30" },
+	{ label: "自定义范围", value: "custom" }
+];
+const orderTypeOptions: Array<{ label: string; value: GaoSalesOrderType }> = [
+	{ label: "套餐订单", value: "PACKAGE" },
+	{ label: "产品订单", value: "DIRECT_PRODUCT" }
+];
+const statusOptions: Array<{ label: string; value: GaoSalesOrderStatus }> = [
+	{ label: "进行中", value: "ACTIVE" },
+	{ label: "已履约", value: "FULFILLED" },
+	{ label: "已取消", value: "CANCELLED" }
+];
+
+const paymentOptions: Array<{ label: string; value: SalesOrderPaymentFilter }> = [
+	{ label: "已收款", value: "PAID" },
+	{ label: "部分收款", value: "PARTIALLY_PAID" },
+	{ label: "未收清", value: "PENDING_RECEIVE" },
+	{ label: "未收款", value: "UNPAID" }
+];
+const refundOptions: Array<{ label: string; value: GaoSalesRefundStatus }> = [
+	{ label: "无需退款", value: "NOT_REQUIRED" },
+	{ label: "待退款", value: "PENDING" },
+	{ label: "已退款", value: "REFUNDED" }
+];
+const filterGroups = computed<FilterGroup[]>(() => [
+	{
+		key: "date",
+		title: "下单时间",
+		options: dateOptions,
+		control: "radio",
+		multiple: false,
+		columns: 2
+	},
+	{
+		key: "orderTypeList",
+		title: "订单类型",
+		description: props.packageConfigId ? "当前套餐固定" : "",
+		options: orderTypeOptions,
+		multiple: true,
+		columns: 2,
+		readonly: Boolean(props.packageConfigId),
+		readonlyText: "套餐订单（已由当前套餐固定）"
+	},
+	{
+		key: "statusList",
+		title: "订单状态",
+		options: statusOptions,
+		multiple: true,
+		columns: 3
+	},
+	{
+		key: "paymentStatusList",
+		title: "收款状态",
+		options: paymentOptions,
+		multiple: true,
+		columns: 2,
+		onChange: normalizePaymentFilter
+	},
+	{
+		key: "refundStatusList",
+		title: "退款状态",
+		options: refundOptions,
+		multiple: true,
+		columns: 2
+	}
+]);
+const visibleFilterGroups = computed(() => props.filterKey
+	? filterGroups.value.filter(group => group.key === props.filterKey)
+	: filterGroups.value);
+const popupTitle = computed(() => {
+	if (!props.filterKey) {
+		return "筛选销售订单";
+	}
+	const group = visibleFilterGroups.value[0];
+	return group ? `筛选${group.title}` : "筛选销售订单";
+});
+const filterModel = computed<FilterModel>(() => ({
+	date: [draftFilter.value.dateFilterType],
+	orderTypeList: [...draftFilter.value.orderTypeList],
+	statusList: [...draftFilter.value.statusList],
+	paymentStatusList: [...draftFilter.value.paymentStatusList],
+	refundStatusList: [...draftFilter.value.refundStatusList]
+}));
+const resetFilterModel = computed<FilterModel>(() => {
+	if (!props.filterKey) {
+		return toFilterModel(createResetFilter());
+	}
+	const currentModel = toFilterModel(draftFilter.value);
+	const resetModel = toFilterModel(createResetFilter());
+	currentModel[props.filterKey] = resetModel[props.filterKey];
+	return currentModel;
+});
+
+watch(() => props.visible, visible => {
+	if (visible) {
+		draftFilter.value = cloneSalesOrderFilter(props.modelValue);
+		if (props.packageConfigId) {
+			draftFilter.value.orderTypeList = ["PACKAGE"];
+		}
+	}
+});
+
+function selectDateFilter(value: unknown): void {
+	const dateFilterType = String(value) as SalesOrderDateFilterType;
+	draftFilter.value.dateFilterType = dateFilterType;
+	if (dateFilterType !== "custom") {
+		draftFilter.value.dateRange = buildPresetDateRange(dateFilterType);
+	}
+	if (dateFilterType === "custom" && !draftFilter.value.dateRange[0] && !draftFilter.value.dateRange[1]) {
+		const today = Time.formatDate(new Date());
+		draftFilter.value.dateRange = [`${today} 00:00`, `${today} 23:59`];
+	}
+}
+
+function updateFilterModel(value: FilterModel): void {
+	const dateFilterType = getStringList<SalesOrderDateFilterType>(value.date)[0];
+	if (dateFilterType && dateFilterType !== draftFilter.value.dateFilterType) {
+		selectDateFilter(dateFilterType);
+	}
+	draftFilter.value.orderTypeList = getStringList<GaoSalesOrderType>(value.orderTypeList);
+	draftFilter.value.statusList = getStringList<GaoSalesOrderStatus>(value.statusList);
+	draftFilter.value.paymentStatusList = getStringList<SalesOrderPaymentFilter>(value.paymentStatusList);
+	draftFilter.value.refundStatusList = getStringList<GaoSalesRefundStatus>(value.refundStatusList);
+}
+
+function toFilterModel(filter: SalesOrderListFilter): FilterModel {
+	return {
+		date: [filter.dateFilterType],
+		orderTypeList: [...filter.orderTypeList],
+		statusList: [...filter.statusList],
+		paymentStatusList: [...filter.paymentStatusList],
+		refundStatusList: [...filter.refundStatusList]
+	};
+}
+
+function createResetFilter(): SalesOrderListFilter {
+	const filter = createDefaultSalesOrderFilter();
+	if (props.packageConfigId) {
+		filter.orderTypeList = ["PACKAGE"];
+	}
+	return filter;
+}
+
+function getStringList<T extends string>(value?: FilterValueList): T[] {
+	return (value || []).filter(item => typeof item === "string") as T[];
+}
+
+function normalizePaymentFilter(context: { value: FilterValueList; changedValue?: string | number | boolean; checked?: boolean }): FilterValueList {
+	const value = [...context.value];
+	if (context.checked && context.changedValue === "PENDING_RECEIVE") {
+		return value.filter(item => item !== "UNPAID" && item !== "PARTIALLY_PAID");
+	}
+	if (context.checked && (context.changedValue === "UNPAID" || context.changedValue === "PARTIALLY_PAID")) {
+		return value.filter(item => item !== "PENDING_RECEIVE");
+	}
+	return value;
+}
+
+function openStartTime(): void {
+	startDraft.value = draftFilter.value.dateRange[0] || `${Time.formatDate(new Date())} 00:00`;
+	startVisible.value = true;
+}
+
+function openEndTime(): void {
+	endDraft.value = draftFilter.value.dateRange[1] || `${Time.formatDate(new Date())} 23:59`;
+	endVisible.value = true;
+}
+
+function cancelStartTime(): void {
+	startVisible.value = false;
+	startDraft.value = draftFilter.value.dateRange[0];
+}
+
+function cancelEndTime(): void {
+	endVisible.value = false;
+	endDraft.value = draftFilter.value.dateRange[1];
+}
+
+function confirmStartTime(value?: string | number): void {
+	startVisible.value = false;
+	draftFilter.value.dateRange = [String(value || startDraft.value), draftFilter.value.dateRange[1]];
+	checkDateRangeOrder();
+}
+
+function confirmEndTime(value?: string | number): void {
+	endVisible.value = false;
+	draftFilter.value.dateRange = [draftFilter.value.dateRange[0], String(value || endDraft.value)];
+	checkDateRangeOrder();
+}
+
+function checkDateRangeOrder(): void {
+	if (draftFilter.value.dateRange[0] && draftFilter.value.dateRange[1] && draftFilter.value.dateRange[1] < draftFilter.value.dateRange[0]) {
+		draftFilter.value.dateRange = [draftFilter.value.dateRange[1], draftFilter.value.dateRange[0]];
+	}
+	draftFilter.value.dateFilterType = "custom";
+}
+
+function reset(): void {
+	const resetFilter = createResetFilter();
+	if (!props.filterKey) {
+		draftFilter.value = resetFilter;
+		return;
+	}
+	const nextFilter = cloneSalesOrderFilter(draftFilter.value);
+	resetFilterGroup(nextFilter, resetFilter, props.filterKey);
+	draftFilter.value = nextFilter;
+}
+
+function resetFilterGroup(target: SalesOrderListFilter, source: SalesOrderListFilter, filterKey: SalesOrderFilterGroupKey): void {
+	switch (filterKey) {
+		case "date":
+			target.dateFilterType = source.dateFilterType;
+			target.dateRange = [...source.dateRange];
+			break;
+		case "orderTypeList":
+			target.orderTypeList = [...source.orderTypeList];
+			break;
+		case "statusList":
+			target.statusList = [...source.statusList];
+			break;
+		case "paymentStatusList":
+			target.paymentStatusList = [...source.paymentStatusList];
+			break;
+		case "refundStatusList":
+			target.refundStatusList = [...source.refundStatusList];
+			break;
+	}
+}
+
+function confirm(): void {
+	if ((!props.filterKey || props.filterKey === "date")
+		&& draftFilter.value.dateFilterType === "custom"
+		&& (!draftFilter.value.dateRange[0] || !draftFilter.value.dateRange[1])) {
+		Message.warning("请选择完整的时间范围");
+		return;
+	}
+	emit("confirm", cloneSalesOrderFilter(draftFilter.value));
+	popupVisible.value = false;
+}
+</script>
+
+<style scoped lang="less">
+.date-group {
+	border: 1px solid var(--td-component-border);
+	overflow: auto;
+	margin-top: .25rem;
+	box-shadow: var(--td-shadow-1);
+	border-radius: .75rem;
+}
+</style>

src/pages/salesOrder/components/SalesOrderFilterSummary.vue

@@ -0,0 +1,250 @@
+<template>
+	<t-cell-group class="filter-summary" theme="card">
+		<t-cell title="开始时间" :note="filterBeginAtText" arrow @click="openStartTime" />
+		<t-cell title="结束时间" :note="filterEndAtText" arrow @click="openEndTime" />
+		<t-cell title="状态" class="filter-cell" arrow @click="openFilterPopup('statusList')">
+			<template #note>
+				<div class="filter-tags">
+					<t-tag
+						v-for="item in selectedStatusTags"
+						:key="item"
+						theme="primary"
+						variant="light-outline"
+						:content="item"
+					/>
+				</div>
+			</template>
+		</t-cell>
+		<t-cell title="订单条件" class="filter-cell" arrow @click="openFilterPopup('orderTypeList')">
+			<template #note>
+				<div class="filter-tags">
+					<t-tag
+						v-for="item in selectedOrderTypeTags"
+						:key="item"
+						theme="primary"
+						variant="light-outline"
+						:content="item"
+					/>
+				</div>
+			</template>
+		</t-cell>
+		<t-cell title="资金条件" class="filter-cell" arrow @click="openFilterPopup('paymentStatusList')">
+			<template #note>
+				<div class="filter-tags">
+					<t-tag
+						v-for="item in selectedPaymentTags"
+						:key="item"
+						theme="primary"
+						variant="light-outline"
+						:content="item"
+					/>
+				</div>
+			</template>
+		</t-cell>
+		<t-cell title="退款条件" class="filter-cell" arrow @click="openFilterPopup('refundStatusList')">
+			<template #note>
+				<div class="filter-tags">
+					<t-tag
+						v-for="item in selectedRefundTags"
+						:key="item"
+						theme="primary"
+						variant="light-outline"
+						:content="item"
+					/>
+				</div>
+			</template>
+		</t-cell>
+		<t-cell title="订单数量" :note="String(total)" />
+	</t-cell-group>
+	<sales-order-filter-popup
+		v-model:visible="filterPopupVisible"
+		:model-value="props.filter"
+		:filter-key="activeFilterKey"
+		:package-config-id="props.packageConfigId"
+		@confirm="confirmFilter"
+	/>
+	<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="startDraft"
+			@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="endDraft"
+			@cancel="cancelEndTime"
+			@confirm="confirmEndTime"
+		/>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import SalesOrderFilterPopup from "@/pages/salesOrder/components/SalesOrderFilterPopup.vue";
+import type { GaoSalesOrderStatus, GaoSalesOrderType, GaoSalesRefundStatus } from "@/types/SalesOrder";
+import {
+	cloneSalesOrderFilter,
+	type SalesOrderFilterGroupKey,
+	type SalesOrderListFilter,
+	type SalesOrderPaymentFilter
+} from "@/types/SalesOrderFilter";
+
+interface Props {
+	filter: SalesOrderListFilter;
+	total: number;
+	packageConfigId?: string;
+}
+
+defineOptions({ name: "SalesOrderFilterSummary" });
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+	confirm: [value: SalesOrderListFilter];
+}>();
+const orderTypeOptions: Array<{ label: string; value: GaoSalesOrderType }> = [
+	{ label: "套餐订单", value: "PACKAGE" },
+	{ label: "产品订单", value: "DIRECT_PRODUCT" }
+];
+const statusOptions: Array<{ label: string; value: GaoSalesOrderStatus }> = [
+	{ label: "进行中", value: "ACTIVE" },
+	{ label: "已履约", value: "FULFILLED" },
+	{ label: "已取消", value: "CANCELLED" }
+];
+const paymentOptions: Array<{ label: string; value: SalesOrderPaymentFilter }> = [
+	{ label: "未收清", value: "PENDING_RECEIVE" },
+	{ label: "未收款", value: "UNPAID" },
+	{ label: "部分收款", value: "PARTIALLY_PAID" },
+	{ label: "已收款", value: "PAID" }
+];
+const refundOptions: Array<{ label: string; value: GaoSalesRefundStatus }> = [
+	{ label: "无需退款", value: "NOT_REQUIRED" },
+	{ label: "待退款", value: "PENDING" },
+	{ label: "已退款", value: "REFUNDED" }
+];
+const filterBeginAtText = computed(() => props.filter.dateRange[0] || "不限");
+const filterEndAtText = computed(() => props.filter.dateRange[1] || "不限");
+const selectedStatusTags = computed(() => getSelectedOptionLabels(props.filter.statusList, statusOptions));
+const selectedOrderTypeTags = computed(() => getSelectedOptionLabels(props.filter.orderTypeList, orderTypeOptions));
+const selectedPaymentTags = computed(() => getSelectedOptionLabels(props.filter.paymentStatusList, paymentOptions));
+const selectedRefundTags = computed(() => getSelectedOptionLabels(props.filter.refundStatusList, refundOptions));
+const filterPopupVisible = ref(false);
+const activeFilterKey = ref<SalesOrderFilterGroupKey>();
+const startVisible = ref(false);
+const endVisible = ref(false);
+const startDraft = ref("");
+const endDraft = ref("");
+
+function getSelectedOptionLabels<T extends string>(valueList: T[], options: Array<{ label: string; value: T }>): string[] {
+	const labels = options.filter(item => valueList.includes(item.value)).map(item => item.label);
+	return labels.length ? labels : ["未选择"];
+}
+
+function openFilterPopup(filterKey: Exclude<SalesOrderFilterGroupKey, "date">): void {
+	activeFilterKey.value = filterKey;
+	filterPopupVisible.value = true;
+}
+
+function openStartTime(): void {
+	startDraft.value = props.filter.dateRange[0] || `${Time.formatDate(new Date())} 00:00`;
+	startVisible.value = true;
+}
+
+function openEndTime(): void {
+	endDraft.value = props.filter.dateRange[1] || `${Time.formatDate(new Date())} 23:59`;
+	endVisible.value = true;
+}
+
+function cancelStartTime(): void {
+	startVisible.value = false;
+	startDraft.value = props.filter.dateRange[0];
+}
+
+function cancelEndTime(): void {
+	endVisible.value = false;
+	endDraft.value = props.filter.dateRange[1];
+}
+
+function confirmStartTime(value?: string | number): void {
+	startVisible.value = false;
+	confirmDateRange(0, String(value || startDraft.value));
+}
+
+function confirmEndTime(value?: string | number): void {
+	endVisible.value = false;
+	confirmDateRange(1, String(value || endDraft.value));
+}
+
+function confirmDateRange(index: 0 | 1, value: string): void {
+	const nextFilter = cloneSalesOrderFilter(props.filter);
+	const nextRange = [...nextFilter.dateRange] as [string, string];
+	nextRange[index] = value;
+	if (nextRange[0] && nextRange[1] && nextRange[1] < nextRange[0]) {
+		nextFilter.dateRange = [nextRange[1], nextRange[0]];
+	} else {
+		nextFilter.dateRange = nextRange;
+	}
+	nextFilter.dateFilterType = "custom";
+	emit("confirm", nextFilter);
+}
+
+function confirmFilter(value: SalesOrderListFilter): void {
+	emit("confirm", value);
+}
+</script>
+
+<style scoped lang="less">
+.filter-summary {
+	gap: 1rem;
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+
+	:deep(.t-cell-group) {
+		margin: 0;
+	}
+
+	:deep(.t-cell__title) {
+		flex: 0 0 4.5rem;
+		margin-right: .75rem;
+	}
+
+	:deep(.t-cell__note) {
+		flex: 1 1 0;
+		min-width: 0;
+		overflow: hidden;
+		text-align: right;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.filter-cell {
+		.filter-tags {
+			gap: .4rem;
+			display: flex;
+			max-width: 100%;
+			overflow-x: auto;
+			justify-content: flex-start;
+			white-space: nowrap;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			:deep(.t-tag) {
+				flex: none;
+			}
+		}
+	}
+}
+</style>

src/pages/salesOrder/components/SalesOrderSummary.vue

@@ -0,0 +1,373 @@
+<template>
+	<div class="sales-order-summary">
+		<customer-profile-card :customer="props.customer" />
+		<t-cell-group class="customer-order-summary" theme="card">
+			<t-cell title="订单总数" :note="getOrderSummaryCount()" />
+			<t-cell title="总金额">
+				<template #note>
+					<span class="red" v-text="getOrderSummaryAmount('saleAmount')" />
+				</template>
+			</t-cell>
+			<t-cell title="已收金额">
+				<template #note>
+					<span class="green" v-text="getOrderSummaryAmount('paidAmount')" />
+				</template>
+			</t-cell>
+			<t-cell title="待收金额">
+				<template #note>
+					<span class="orange" v-text="getOrderSummaryAmount('unpaidAmount')" />
+				</template>
+			</t-cell>
+			<t-cell class="products">
+				<template #title>
+					<div class="title">
+						<div>已购产品</div>
+						<div v-if="purchasedProductTagRows.length" class="product-tags">
+							<div class="rows">
+								<div v-for="(row, rowIndex) in purchasedProductTagRows" :key="rowIndex" class="row">
+									<t-tag
+										v-for="(product, productIndex) in row"
+										:key="`${getProductKey(product, productIndex)}-${rowIndex}`"
+										theme="primary"
+										variant="light-outline"
+										:content="getProductTagContent(product)"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</template>
+			</t-cell>
+			<t-cell class="products">
+				<template #title>
+					<div class="title">
+						<div>可履约产品</div>
+						<div v-if="availableProductTagRows.length" class="product-tags">
+							<div class="rows">
+								<div v-for="(row, rowIndex) in availableProductTagRows" :key="rowIndex" class="row">
+									<t-tag
+										v-for="(product, productIndex) in row"
+										:key="`${getProductKey(product, productIndex)}-${rowIndex}`"
+										theme="warning"
+										variant="light-outline"
+										:content="getProductTagContent(product)"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</template>
+			</t-cell>
+		</t-cell-group>
+	</div>
+</template>
+
+<script setup lang="ts">
+import CustomerProductAPI from "@/api/CustomerProductAPI";
+import SalesOrderAPI from "@/api/SalesOrderAPI";
+import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
+import type { Customer } from "@/types/Customer";
+import type { CustomerProduct, CustomerProductSummary } from "@/types/CustomerProduct";
+import type { SalesOrderPage, SalesOrderSummary as SalesOrderSummaryData } from "@/types/SalesOrder";
+import { getErrorMessage } from "@/utils/error";
+import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "SalesOrderSummary" });
+
+type OrderSummaryAmountField = "saleAmount" | "paidAmount" | "unpaidAmount";
+
+const props = defineProps<{
+	customer?: Customer;
+}>();
+const customerId = computed(() => props.customer?.id || "");
+const summary = ref<SalesOrderSummaryData>();
+const summaryLoading = ref(false);
+const productSummary = ref<CustomerProduct>();
+const productLoading = ref(false);
+let loadToken = 0;
+const maxProductTagRowCount = 2;
+
+const purchasedProductTagRows = computed(() => {
+	const purchasedProducts = productSummary.value?.purchasedProducts ?? [];
+	return getProductTagRows(purchasedProducts);
+});
+const availableProductTagRows = computed(() => getProductTagRows(productSummary.value?.availableProducts));
+
+function getProductTagRows(products?: CustomerProductSummary[]): CustomerProductSummary[][] {
+	if (!products?.length) {
+		return [];
+	}
+	const rowCount = Math.min(maxProductTagRowCount, products.length);
+	const rowList = Array.from({ length: rowCount }, () => [] as CustomerProductSummary[]);
+	products.forEach((product, index) => {
+		rowList[index % rowCount].push(product);
+	});
+	return rowList;
+}
+
+function getOrderSummaryCount(): string {
+	return summaryLoading.value ? "加载中" : String(summary.value?.orderCount ?? 0);
+}
+
+function getOrderSummaryAmount(field: OrderSummaryAmountField): string {
+	if (summaryLoading.value) {
+		return "加载中";
+	}
+	return `￥${formatPackageAmount(summary.value?.[field] ?? 0)}`;
+}
+
+function getProductKey(product: CustomerProductSummary, index: number): string {
+	return `${product.productIdSnapshot || product.productName || "product"}-${product.unit || "unit"}-${index}`;
+}
+
+function getProductQuantity(product: CustomerProductSummary): string {
+	return getPackageQuantityText(product.quantity);
+}
+
+function getProductTagContent(product: CustomerProductSummary): string {
+	return `${product.productName || "未命名产品"} × ${getProductQuantity(product)}${product.unit || "基础单位"}`;
+}
+
+async function loadOrderSummary(customerId: string, token: number): Promise<void> {
+	try {
+		const request: SalesOrderPage = { customerId, index: 0, size: 1 };
+		const result = await SalesOrderAPI.summary(request);
+		if (token === loadToken) {
+			summary.value = result;
+		}
+	} catch (error) {
+		if (token === loadToken) {
+			summary.value = undefined;
+			Message.error(getErrorMessage(error, "订单汇总加载失败"));
+		}
+	} finally {
+		if (token === loadToken) {
+			summaryLoading.value = false;
+		}
+	}
+}
+
+async function loadProductSummary(customerId: string, token: number): Promise<void> {
+	try {
+		const result = await CustomerProductAPI.list({ customerId, index: 0, size: 1 });
+		if (token === loadToken) {
+			productSummary.value = result.list?.[0];
+		}
+	} catch (error) {
+		if (token === loadToken) {
+			productSummary.value = undefined;
+			Message.error(getErrorMessage(error, "客户产品汇总加载失败"));
+		}
+	} finally {
+		if (token === loadToken) {
+			productLoading.value = false;
+		}
+	}
+}
+
+async function loadData(): Promise<void> {
+	const token = ++loadToken;
+	const currentCustomerId = customerId.value;
+	if (!currentCustomerId) {
+		summary.value = undefined;
+		productSummary.value = undefined;
+		summaryLoading.value = false;
+		productLoading.value = false;
+		return;
+	}
+	summaryLoading.value = true;
+	productLoading.value = true;
+	await Promise.all([
+		loadOrderSummary(currentCustomerId, token),
+		loadProductSummary(currentCustomerId, token)
+	]);
+}
+
+async function refresh(): Promise<void> {
+	await loadData();
+}
+
+defineExpose({ refresh });
+watch(customerId, async () => {
+	await loadData();
+}, { immediate: true });
+</script>
+
+<style scoped lang="less">
+.sales-order-summary {
+	gap: 1rem;
+	display: flex;
+	min-width: 0;
+	flex-direction: column;
+
+	.customer-order-summary {
+
+		:deep(.t-cell-group) {
+			margin: 0;
+		}
+	}
+
+	.products {
+
+		.title,
+		:deep(.t-cell__title) {
+			width: 100%;
+			overflow: hidden;
+			min-width: 0;
+			max-width: 100%;
+			margin-right: 0;
+		}
+
+	.product-tags {
+			gap: .5rem;
+			width: 100%;
+			min-width: 0;
+			max-width: 100%;
+			display: flex;
+			padding: .25rem 0 .5rem;
+			overflow-x: auto;
+			overflow-y: hidden;
+			flex-wrap: nowrap;
+			touch-action: pan-x;
+			scrollbar-width: none;
+			-webkit-overflow-scrolling: touch;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			.rows {
+				gap: .25rem;
+				width: max-content;
+				display: flex;
+				flex-direction: column;
+
+				.row {
+					gap: .25rem;
+					display: flex;
+					white-space: nowrap;
+				}
+			}
+		}
+	}
+}
+
+.customer-product-summary {
+	min-width: 0;
+
+	:deep(.t-cell-group) {
+		margin: 0;
+	}
+
+	.summary-line {
+		min-width: 0;
+
+		:deep(.t-cell__title) {
+			min-width: 0;
+			width: 100%;
+		}
+
+		:deep(.t-cell__description) {
+			min-width: 0;
+			width: 100%;
+			max-width: 100%;
+			overflow: hidden;
+		}
+
+		.line-label {
+			color: var(--td-text-color-secondary);
+			font-weight: 600;
+		}
+
+		.available-label {
+			color: var(--td-success-color);
+		}
+
+		.product-scroll,
+		.product-tags {
+			gap: .5rem;
+			width: 100%;
+			min-width: 0;
+			max-width: 100%;
+			display: flex;
+			padding: .25rem 0 .5rem;
+			overflow-x: auto;
+			overflow-y: hidden;
+			flex-wrap: nowrap;
+			touch-action: pan-x;
+			scrollbar-width: none;
+			-webkit-overflow-scrolling: touch;
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+
+			.product {
+				gap: .25rem;
+				flex: 0 0 auto;
+				min-width: 7rem;
+				max-width: 12rem;
+				display: flex;
+				border: 1px solid var(--td-component-border);
+				padding: .5rem .625rem;
+				background: var(--td-bg-color-container-hover);
+				border-radius: .5rem;
+				flex-direction: column;
+				align-items: flex-start;
+
+				.product-name {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+
+				.quantity {
+					color: var(--td-text-color-primary);
+					font-size: .875rem;
+				}
+
+				.unit {
+					color: var(--td-text-color-secondary);
+					font-size: .75rem;
+				}
+			}
+
+			.available-product {
+				border-color: var(--td-success-color-3);
+				background: var(--td-success-color-1);
+			}
+
+			.rows {
+				gap: .5rem;
+				width: max-content;
+				display: flex;
+				flex-direction: column;
+			}
+
+			.row {
+				gap: .5rem;
+				display: flex;
+				white-space: nowrap;
+			}
+
+			:deep(.t-tag) {
+				flex: 0 0 auto;
+			}
+		}
+
+		.empty-products {
+			color: var(--td-text-color-placeholder);
+			padding: .25rem 0 .5rem;
+		}
+	}
+}
+
+@media (max-width: 42rem) {
+	.customer-order-summary {
+		.order-summary-grid {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+}
+</style>

src/pages/store/StoreDiaryDetail.vue

@@ -12,7 +12,7 @@
 				/>
 			</header>
 			<div v-if="additionalPhotoItemList.length" class="additional-photos-wrapper">
-				<photo-scroller
+				<media-selector
 					:model-value="additionalPhotoList"
 					:photo-items="additionalPhotoItemList"
 					:show-add="false"
@@ -71,7 +71,7 @@ import { DialogPlugin } from "tdesign-mobile-vue";
 import { PassTimeLabel } from "timi-web";
 import { UserAPI, type Attachment, useUserStore } from "timi-web-api";
 import StoreDiaryAPI from "@/api/StoreDiaryAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { StoreDiary } from "@/types/StoreDiary";

src/pages/store/StoreDiaryEdit.vue

@@ -19,7 +19,7 @@
 				/>
 			</t-form-item>
 			<section class="photo-wrapper" v-entrance-transition="140">
-				<photo-scroller
+				<media-selector
 					v-model="photoList"
 					v-model:photo-items="photoItemList"
 					title="附加照片"
@@ -28,15 +28,33 @@
 					:show-type-label="false"
 					:show-viewer-actions="false"
 					@add="openPhotoPicker"
+					@capture-photo="capturePhoto"
+					@capture-video="captureVideo"
 				/>
 				<input
 					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"
+				>
 			</section>
 			<section class="editor-wrapper" v-entrance-transition="70">
 				<article-editor
@@ -63,7 +81,7 @@ import {
 } from "timi-tdesign-mobile";
 import { AttachmentAPI, type Attachment, useUserStore } from "timi-web-api";
 import StoreDiaryAPI from "@/api/StoreDiaryAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { StoreDiary } from "@/types/StoreDiary";
@@ -132,6 +150,8 @@ function getCreateTitle(): string {
 // ---------- 附加照片 ----------
 
 const photoInputRef = ref<HTMLInputElement>();
+const photoCameraInputRef = ref<HTMLInputElement>();
+const videoInputRef = ref<HTMLInputElement>();
 const photoItemList = ref<PhotoItem[]>([]);
 const isPhotoUploading = ref(false);
 const photoList = computed<string[]>({
@@ -146,6 +166,14 @@ function openPhotoPicker(): void {
 	photoInputRef.value?.click();
 }
 
+function capturePhoto(): void {
+	photoCameraInputRef.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 || []);
@@ -156,11 +184,12 @@ async function handlePhotoSelected(event: Event): Promise<void> {
 	isPhotoUploading.value = true;
 	try {
 		const tempFileList = await AttachmentAPI.upload(await compressUploadImageList(fileList));
-		for (const tempFile of tempFileList) {
+		for (const [index, tempFile] of tempFileList.entries()) {
 			if (!tempFile.id) {
 				continue;
 			}
 			photoItemList.value.push({
+				mimeType: fileList[index]?.type,
 				tempFileId: tempFile.id,
 				attachType: "ADDITIONAL",
 				url: AttachmentAPI.getTempReadURL(tempFile.id)
@@ -182,6 +211,7 @@ function buildPhotoItemList(attachmentList?: StoreDiary["attachmentList"]): Phot
 		return [{
 			attachment: item as Partial<Attachment>,
 			attachType: "ADDITIONAL",
+			mimeType: typeof item.mimeType === "string" ? item.mimeType : undefined,
 			previewUrl: getAttachmentReadURL(item.id),
 			url: getAttachmentReadURL(item.id, 90)
 		}];

src/pages/store/StoreDiaryList.vue

@@ -25,7 +25,6 @@
 				v-if="canCreate"
 				class="cell-button"
 				theme="primary"
-				block
 				@click="toCreateToday"
 			>
 				新增今天日记

src/pages/store/component/StoreCustomerAgeChart.vue

@@ -75,7 +75,7 @@ const chartOption = computed<EChartsOption>(() => ({
 			type: "bar",
 			barMaxWidth: 24,
 			itemStyle: {
-				color: "#0f766e",
+				color: "#0f766e"
 			},
 			data: ageDataList.value.map(item => item[1])
 		}

src/pages/tabs/ProductTab.vue

@@ -60,7 +60,7 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				visible: userStore.hasPermissions(permissionCodes.productCategory.read)
 			},
 			{
-				icon: "layers",
+				icon: "control-platform",
 				path: "/management/products",
 				title: "产品库",
 				visible: userStore.hasPermissions(permissionCodes.product.read)
@@ -116,6 +116,13 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				path: "/management/package-configs",
 				title: "套餐配置",
 				visible: userStore.hasPermissions(permissionCodes.packageConfig.read)
+			},
+			{
+				icon: "task",
+				path: "/management/package-orders",
+				title: "套餐订单",
+				visible: userStore.hasPermissions(permissionCodes.packageConfig.read)
+					&& userStore.hasPermissions(permissionCodes.salesOrder.read)
 			}
 		]
 	},

src/pages/tabs/SettingTab.vue

@@ -99,7 +99,7 @@ const route = useRoute();
 const userStore = useUserStore();
 
 function getSettingTabPage(): HTMLElement | undefined {
-	return Array.from(document.querySelectorAll<HTMLElement>(".page-transition .pages"))
+	return Array.from(document.querySelectorAll<HTMLElement>(".page-transition .page"))
 		.find(element => !!element.querySelector(".management-tab"));
 }
 
@@ -130,6 +130,12 @@ const menuGroupList = computed<MenuGroup[]>(() => [
 				title: "客户管理",
 				visible: userStore.hasPermissions(permissionCodes.customer.read)
 			},
+			{
+				icon: "user-marked",
+				path: "/management/customer-follow-up-reminders",
+				title: "客户跟进提醒",
+				visible: userStore.hasPermissions(permissionCodes.customerFollowUpReminder.read)
+			},
 			{
 				icon: "git-merge",
 				path: "/management/customer-invite-relation",

src/pages/user/component/UserAgreement.vue

@@ -23,18 +23,18 @@
 	>
 		<div class="dialog-content">
 			<t-tabs
-				v-model="activeAgreementCode"
+				v-model="activeAgreementId"
 				class="tabs"
 				theme="line"
 				bottom-line-mode="full"
 				:split="false"
-				:space-evenly="true"
+				:space-evenly="false"
 				:swipeable="true"
 			>
 				<t-tab-panel
 					v-for="item in agreementList"
-					:key="item.code"
-					:value="item.code"
+					:key="item.id"
+					:value="item.id"
 					:label="item.title"
 					lazy
 				>
@@ -64,30 +64,14 @@ import { ArticleAPI, AttachmentAPI, SettingAPI, type Article } from "timi-web-ap
 import { ArticleView } from "timi-tdesign-mobile";
 import { getErrorMessage } from "@/utils/error";
 
-type AgreementCode = "SERVICE_LICENSE" | "PRIVACY_LICENSE" | "OPEN_SOURCE_LICENSE";
 type AgreementItem = {
-	code: AgreementCode;
+	id: string;
 	title: string;
 	article?: Article;
 	errorMessage?: string;
 	loading: boolean;
 };
 
-const baseAgreementList: Array<Pick<AgreementItem, "code" | "title">> = [
-	{
-		code: "SERVICE_LICENSE",
-		title: "服务协议"
-	},
-	{
-		code: "PRIVACY_LICENSE",
-		title: "隐私协议"
-	},
-	{
-		code: "OPEN_SOURCE_LICENSE",
-		title: "开源软件协议"
-	}
-];
-
 defineOptions({
 	name: "UserAgreement"
 });
@@ -103,17 +87,47 @@ const emit = defineEmits<{
 }>();
 
 const dialogVisible = ref(false);
-const agreementList = ref<AgreementItem[]>(createAgreementList());
-const activeAgreementCode = ref<AgreementCode>("SERVICE_LICENSE");
+const agreementList = ref<AgreementItem[]>([]);
+const activeAgreementId = ref("");
 
-function createAgreementList(): AgreementItem[] {
-	return baseAgreementList.map(item => ({
+function normalizeAgreementItem(value: unknown): Pick<AgreementItem, "id" | "title"> | undefined {
+	if (!value || typeof value !== "object") {
+		return undefined;
+	}
+	const source = value as Record<string, unknown>;
+	const id = typeof source.id === "string" ? source.id.trim() : "";
+	const title = typeof source.title === "string" ? source.title.trim() : "";
+	if (!id || !title) {
+		return undefined;
+	}
+	return { id, title };
+}
+
+function parseAgreementList(value?: string): Array<Pick<AgreementItem, "id" | "title">> {
+	if (!value?.trim()) {
+		return [];
+	}
+	try {
+		const sourceList: unknown = JSON.parse(value);
+		if (!Array.isArray(sourceList)) {
+			return [];
+		}
+		return sourceList
+			.map(item => normalizeAgreementItem(item))
+			.filter((item): item is Pick<AgreementItem, "id" | "title"> => !!item);
+	} catch {
+		return [];
+	}
+}
+
+function createAgreementList(list: Array<Pick<AgreementItem, "id" | "title">>): AgreementItem[] {
+	return list.map(item => ({
 		...item,
 		loading: false
 	}));
 }
 
-function handleCheckboxChange(checked: boolean): void {
+async function handleCheckboxChange(checked: boolean): Promise<void> {
 	if (!checked) {
 		emit("update:modelValue", false);
 		return;
@@ -121,19 +135,21 @@ function handleCheckboxChange(checked: boolean): void {
 
 	emit("update:modelValue", false);
 	dialogVisible.value = true;
-	activeAgreementCode.value = "SERVICE_LICENSE";
-	void loadAgreements();
+	activeAgreementId.value = "";
+	await loadAgreements();
 }
 
 async function loadAgreements(): Promise<void> {
-	agreementList.value = createAgreementList().map(item => ({
+	try {
+		const settingMap = await SettingAPI.map("GAO_SYSTEM", undefined, ["AGREEMENT"]);
+		const configuredAgreementList = parseAgreementList(settingMap.AGREEMENT?.value);
+		agreementList.value = createAgreementList(configuredAgreementList).map(item => ({
 			...item,
 			loading: true
 		}));
-	try {
-		const settingMap = await SettingAPI.map("GAO_SYSTEM");
+		activeAgreementId.value = configuredAgreementList[0]?.id || "";
 		agreementList.value = await Promise.all(agreementList.value.map(async item => {
-			const articleId = settingMap[item.code]?.value?.trim();
+			const articleId = item.id;
 			if (!articleId) {
 				return {
 					...item,
@@ -158,11 +174,13 @@ async function loadAgreements(): Promise<void> {
 		}));
 	} catch (error) {
 		const errorMessage = getErrorMessage(error, "协议配置加载失败");
-		agreementList.value = createAgreementList().map(item => ({
-			...item,
+		agreementList.value = [{
+			id: "AGREEMENT_ERROR",
+			title: "用户协议",
 			loading: false,
 			errorMessage
-		}));
+		}];
+		activeAgreementId.value = "AGREEMENT_ERROR";
 	}
 }
 
@@ -247,12 +265,8 @@ function agreeAgreement(): void {
 				overflow-y: auto;
 			}
 
-			:deep(.t-tabs__scroll) {
-				overflow-x: hidden;
-			}
-
 			:deep(.t-tabs__item) {
-				padding: 0;
+				padding: 0 .5rem;
 				font-size: .75rem;
 			}
 		}

src/router/index.ts

@@ -11,6 +11,7 @@ import registrationRoutes from "@/router/routes/registrationRoutes";
 import tabRoutes from "@/router/routes/tabRoutes";
 import userRoutes from "@/router/routes/userRoutes";
 import notifyRoutes from "@/router/routes/notifyRoutes";
+import followUpReminderRoutes from "@/router/routes/followUpReminderRoutes";
 import productRoutes from "@/router/routes/productRoutes";
 import salesOrderRoutes from "@/router/routes/salesOrderRoutes";
 import fulfillmentRoutes from "@/router/routes/fulfillmentRoutes";
@@ -31,6 +32,7 @@ const detailRoutes = [
 	...chartRoutes,
 	...managementAccountRoutes,
 	...notifyRoutes,
+	...followUpReminderRoutes,
 	...productRoutes,
 	...salesOrderRoutes,
 	...fulfillmentRoutes

src/router/routes/followUpReminderRoutes.ts

@@ -0,0 +1,62 @@
+import type { RouteRecordRaw } from "vue-router";
+
+const followUpReminderRoutes: RouteRecordRaw[] = [
+	{
+		path: "/management/customer-follow-up-reminders",
+		name: "CustomerFollowUpReminderList",
+		component: () => import("@/pages/followUpReminder/FollowUpReminderList.vue"),
+		meta: {
+			depth: 3,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "客户跟进提醒",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
+	{
+		path: "/management/customer-follow-up-reminders/create",
+		name: "CustomerFollowUpReminderCreate",
+		component: () => import("@/pages/followUpReminder/FollowUpReminderEdit.vue"),
+		meta: {
+			depth: 4,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "新增跟进提醒",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
+	{
+		path: "/management/customer-follow-up-reminders/:id",
+		name: "CustomerFollowUpReminderDetail",
+		component: () => import("@/pages/followUpReminder/FollowUpReminderDetail.vue"),
+		meta: {
+			depth: 4,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "跟进提醒详情",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
+	{
+		path: "/management/customer-follow-up-reminders/:id/edit",
+		name: "CustomerFollowUpReminderEdit",
+		component: () => import("@/pages/followUpReminder/FollowUpReminderEdit.vue"),
+		meta: {
+			depth: 5,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "编辑跟进提醒",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	}
+];
+
+export default followUpReminderRoutes;

src/router/routes/packageRoutes.ts

@@ -6,6 +6,7 @@ function pageMeta(title: string, depth = 3, background = "#F5F5F8"): RouteRecord
 
 export default [
 	{ path: "/management/package-configs", name: "PackageConfigList", component: () => import("@/pages/package/PackageConfigList.vue"), meta: pageMeta("套餐配置") },
+	{ path: "/management/package-orders", name: "PackageOrderConfigList", component: () => import("@/pages/package/PackageOrderConfigList.vue"), meta: pageMeta("选择套餐") },
 	{ path: "/management/package-configs/create", name: "PackageConfigCreate", component: () => import("@/pages/package/PackageConfigEdit.vue"), meta: pageMeta("新增套餐配置", 4) },
 	{ path: "/management/package-configs/:id", name: "PackageConfigDetail", component: () => import("@/pages/package/PackageConfigDetail.vue"), meta: pageMeta("套餐配置详情", 4) },
 	{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: () => import("@/pages/package/PackageConfigEdit.vue"), meta: pageMeta("编辑套餐配置", 5) },

src/types/Customer.ts

@@ -1,5 +1,6 @@
 import type { Attachment, Model, User } from "timi-web-api";
 import type { EventRecord } from "@/types/EventRecord.ts";
+import type { PhotoItem } from "@/types/Photo";
 import type { TagApply } from "@/types/Tag";
 
 export type CustomerGender = "MALE" | "FEMALE";
@@ -39,12 +40,9 @@ export type Customer = {
 
 export type CustomerAttachmentType = "PHOTO" | "POINT_CARD" | "OTHER";
 
-export type EditableCustomerPhoto = {
-	attachment?: Attachment;
+/** 客户编辑页的媒体项：复用通用媒体项，仅收窄附件类型 */
+export type EditableCustomerPhoto = PhotoItem & {
 	attachType: CustomerAttachmentType;
-	previewUrl?: string;
-	tempFileId?: string;
-	url: string;
 };
 
 export type CustomerTrendStatReq = {

src/types/CustomerProduct.ts

@@ -0,0 +1,30 @@
+import type { Model, PageResult } from "timi-web-api";
+import type { Customer } from "@/types/Customer";
+import type { GaoSalesOrderItemType } from "@/types/SalesOrder";
+
+/** 客户产品汇总。 */
+export type CustomerProduct = {
+	customer?: Customer;
+	orderCount?: number;
+	purchasedProducts?: CustomerProductSummary[];
+	availableProducts?: CustomerProductSummary[];
+} & Model;
+
+/** 客户产品汇总项。 */
+export type CustomerProductSummary = {
+	productIdSnapshot?: string;
+	productName?: string;
+	quantity?: number | string;
+	unit?: string;
+};
+
+export type CustomerProductPage = {
+	storeId?: string;
+	customerId?: string;
+	keyword?: string;
+	itemType?: GaoSalesOrderItemType;
+	index: number;
+	size: number;
+};
+
+export type CustomerProductPageResult<T> = PageResult<T> & { pages?: number };

src/types/FollowUpReminder.ts

@@ -0,0 +1,60 @@
+import type { Attachment, Model, User } from "timi-web-api";
+import type { Customer } from "@/types/Customer";
+
+/** 客户跟进提醒业务状态。 */
+export type FollowUpReminderStatus = "PENDING" | "COMPLETED";
+
+/** 客户跟进提醒通知方式。 */
+export type FollowUpReminderNotifyChannel = "INTERNAL" | "SMS";
+
+/** 跟进提醒附件请求项。 */
+export type FollowUpReminderAttachment = Partial<Attachment> & {
+	name?: string;
+	title?: string;
+};
+
+/** 客户跟进提醒。 */
+export type FollowUpReminder = {
+	storeId?: string;
+	customerId?: string;
+	responsibleUserId?: string;
+	content?: string;
+	remindAt?: number;
+	status?: FollowUpReminderStatus;
+	internalNotifyEnabled?: boolean;
+	smsNotifyEnabled?: boolean;
+	internalNotifyDetailId?: string;
+	smsNotifyDetailId?: string;
+	completedBy?: string;
+	completedAt?: number;
+	createdBy?: string;
+	updatedBy?: string;
+	notifyChannelList?: FollowUpReminderNotifyChannel[];
+	customer?: Customer;
+	responsibleUser?: Partial<User>;
+	attachmentList?: FollowUpReminderAttachment[];
+} & Model;
+
+/** 客户跟进提醒列表查询参数。 */
+export type FollowUpReminderPage = {
+	index: number;
+	size: number;
+	storeId?: string;
+	customerId?: string;
+	responsibleUserId?: string;
+	status?: FollowUpReminderStatus;
+	beginRemindAt?: number;
+	endRemindAt?: number;
+};
+
+/** 客户跟进提醒创建或修改请求。 */
+export type FollowUpReminderPayload = {
+	id?: string;
+	storeId?: string;
+	customerId: string;
+	responsibleUserId: string;
+	content: string;
+	remindAt: number;
+	notifyChannelList: FollowUpReminderNotifyChannel[];
+	attachmentList: FollowUpReminderAttachment[];
+};

src/types/Photo.ts

@@ -1,10 +1,13 @@
 import type { Attachment } from "timi-web-api";
 
-/** 照片滚动组件使用的附件展示项。 */
+/** 媒体选择组件使用的附件展示项。 */
 export type PhotoItem = {
 	attachment?: Partial<Attachment>;
 	attachType?: string;
+	mimeType?: string;
+	/** 原图地址（预览、播放用），缺省时回退 url */
 	previewUrl?: string;
 	tempFileId?: string;
+	/** 列表缩略图地址；视频附件也填缩略图，临时上传文件填原文件地址 */
 	url: string;
 };

src/types/SalesOrder.ts

@@ -76,10 +76,15 @@ export type SalesOrder = {
 export type SalesOrderPage = {
 	storeId?: string;
 	customerId?: string;
+	packageConfigId?: string;
 	orderType?: GaoSalesOrderType;
+	orderTypeList?: GaoSalesOrderType[];
 	status?: GaoSalesOrderStatus;
+	statusList?: GaoSalesOrderStatus[];
 	paymentStatus?: GaoSalesPaymentStatus;
+	paymentStatusList?: GaoSalesPaymentStatus[];
 	refundStatus?: GaoSalesRefundStatus;
+	refundStatusList?: GaoSalesRefundStatus[];
 	pendingReceive?: boolean;
 	fulfilledButUnpaid?: boolean;
 	keyword?: string;
@@ -206,3 +211,10 @@ export type FundRecordPage = {
 };
 
 export type SalesOrderPageResult<T> = PageResult<T> & { pages?: number };
+
+export type SalesOrderSummary = {
+	orderCount?: number;
+	saleAmount?: number;
+	paidAmount?: number;
+	unpaidAmount?: number;
+};

src/types/SalesOrderFilter.ts

@@ -0,0 +1,79 @@
+import type {
+	GaoSalesOrderStatus,
+	GaoSalesOrderType,
+	GaoSalesPaymentStatus,
+	GaoSalesRefundStatus
+} from "@/types/SalesOrder";
+import type { DateTimeRange } from "@/utils/date";
+
+/** 销售订单时间筛选类型。 */
+export type SalesOrderDateFilterType = "all" | "today" | "yesterday" | "thisWeek" | "thisMonth" | "last30" | "custom";
+
+/** 销售订单资金筛选类型，未收清为未收款和部分收款的组合条件。 */
+export type SalesOrderPaymentFilter = GaoSalesPaymentStatus | "PENDING_RECEIVE";
+
+/** 销售订单筛选组。 */
+export type SalesOrderFilterGroupKey = "date" | "orderTypeList" | "statusList" | "paymentStatusList" | "refundStatusList";
+
+/** 销售订单列表筛选条件。 */
+export type SalesOrderListFilter = {
+	dateFilterType: SalesOrderDateFilterType;
+	dateRange: DateTimeRange;
+	orderTypeList: GaoSalesOrderType[];
+	statusList: GaoSalesOrderStatus[];
+	paymentStatusList: SalesOrderPaymentFilter[];
+	refundStatusList: GaoSalesRefundStatus[];
+};
+
+/** 创建销售订单筛选默认值。 */
+export function createDefaultSalesOrderFilter(): SalesOrderListFilter {
+	return {
+		dateFilterType: "all",
+		dateRange: ["", ""],
+		orderTypeList: ["PACKAGE", "DIRECT_PRODUCT"],
+		statusList: ["ACTIVE"],
+		paymentStatusList: ["UNPAID", "PARTIALLY_PAID", "PAID"],
+		refundStatusList: ["NOT_REQUIRED", "PENDING", "REFUNDED"]
+	};
+}
+
+/** 复制销售订单筛选条件。 */
+export function cloneSalesOrderFilter(filter: SalesOrderListFilter): SalesOrderListFilter {
+	return {
+		dateFilterType: filter.dateFilterType,
+		dateRange: [...filter.dateRange] as DateTimeRange,
+		orderTypeList: [...filter.orderTypeList],
+		statusList: [...filter.statusList],
+		paymentStatusList: [...filter.paymentStatusList],
+		refundStatusList: [...filter.refundStatusList]
+	};
+}
+
+/** 将本地存储内容归一化为合法筛选条件。 */
+export function normalizeSalesOrderFilter(value: unknown): SalesOrderListFilter {
+	const defaultFilter = createDefaultSalesOrderFilter();
+	if (!value || typeof value !== "object") {
+		return defaultFilter;
+	}
+
+	const source = value as Partial<SalesOrderListFilter>;
+	const dateFilterType = ["all", "today", "yesterday", "thisWeek", "thisMonth", "last30", "custom"].includes(source.dateFilterType || "")
+		? source.dateFilterType!
+		: defaultFilter.dateFilterType;
+	const dateRange = Array.isArray(source.dateRange) && 2 <= source.dateRange.length
+		? [String(source.dateRange[0] || ""), String(source.dateRange[1] || "")] as DateTimeRange
+		: defaultFilter.dateRange;
+
+	return {
+		dateFilterType,
+		dateRange,
+		orderTypeList: normalizeList(source.orderTypeList, defaultFilter.orderTypeList),
+		statusList: normalizeList(source.statusList, defaultFilter.statusList),
+		paymentStatusList: normalizeList(source.paymentStatusList, defaultFilter.paymentStatusList),
+		refundStatusList: normalizeList(source.refundStatusList, defaultFilter.refundStatusList)
+	};
+}
+
+function normalizeList<T>(value: unknown, fallback: T[]): T[] {
+	return Array.isArray(value) ? value.filter(item => typeof item === "string") as T[] : [...fallback];
+}

src/utils/date.ts

@@ -5,6 +5,7 @@ export type DateFilterPreset =
 	| "all"
 	| "today"
 	| "yesterday"
+	| "thisWeek"
 	| "lastWeek"
 	| "thisMonth"
 	| "lastMonth"
@@ -33,6 +34,13 @@ export function buildPresetDateRange(type: DateFilterPreset, now = new Date()):
 		return buildDayRange(lastWeekMonday, lastWeekSunday);
 	}
 
+	if (type === "thisWeek") {
+		const current = getDateStart(now);
+		const day = current.getDay() || 7;
+		const thisWeekMonday = addDays(current, 1 - day);
+		return buildDayRange(thisWeekMonday, current);
+	}
+
 	if (type === "thisMonth") {
 		const current = new Date(now);
 		const begin = new Date(current.getFullYear(), current.getMonth(), 1);

src/utils/imageCompression.ts

@@ -21,6 +21,10 @@ function normalizeUploadImageFile(source: File, compressed: Blob): File {
  * 压缩上传图片，统一限制到 300 KB。
  */
 export async function compressUploadImage(file: File): Promise<File> {
+	if (!file.type.startsWith("image/")) {
+		return file;
+	}
+
 	const compressedFile = await imageCompression(file, {
 		maxSizeMB: PHOTO_MAX_SIZE_MB,
 		maxWidthOrHeight: PHOTO_MAX_WIDTH_OR_HEIGHT,

src/utils/permission.ts

@@ -19,6 +19,13 @@ export const permissionCodes = {
 		update: "GAO:CUSTOMER:UPDATE",
 		delete: "GAO:CUSTOMER:DELETE"
 	},
+	customerFollowUpReminder: {
+		create: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:CREATE",
+		read: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:READ",
+		update: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:UPDATE",
+		delete: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:DELETE",
+		complete: "GAO:CUSTOMER_FOLLOW_UP_REMINDER:COMPLETE"
+	},
 	event: {
 		create: "GAO:EVENT:CREATE",
 		read: "GAO:EVENT:READ",
@@ -178,6 +185,11 @@ export const gaoStoreScopePermissionCodes = [
 	permissionCodes.customer.export,
 	permissionCodes.customer.update,
 	permissionCodes.customer.delete,
+	permissionCodes.customerFollowUpReminder.create,
+	permissionCodes.customerFollowUpReminder.read,
+	permissionCodes.customerFollowUpReminder.update,
+	permissionCodes.customerFollowUpReminder.delete,
+	permissionCodes.customerFollowUpReminder.complete,
 	permissionCodes.storeDiary.create,
 	permissionCodes.storeDiary.read,
 	permissionCodes.storeDiary.update,