update AIChart, customer followup, media selector

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,63 @@
 <template>
-	<section class="ai-chat-panel" :aria-label="`${props.storeName || '当前门店'}经营助手`">
-		<ai-chat-message-list
-			ref="messageList"
-			: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" />
+	<shared-ai-chat-panel
+		ref="messageList"
+		class="shared-panel"
+		:messages="messages"
+		:is-generating="isGenerating"
+		: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"><t-icon name="robot-2" size="2rem" /></div>
+				<h3>今天想了解什么？</h3>
+				<p>我会根据当前门店的实时业务数据回答经营问题。</p>
+				<div class="quick-list">
+					<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>
-			<ai-chat-composer
-				v-model="draft"
-				:is-generating="isGenerating"
-				:disabled="isLoadingConversation"
-				:last-error="lastError"
-				:can-retry="canRetry"
-				@send="submitMessage"
-				@stop="stopGeneration"
-				@retry="retryLastMessage"
-			/>
-		</div>
-	</section>
+		</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 +67,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 +102,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 +124,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 +186,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 +334,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);
-	padding-top: var(--app-nav-height);
-	flex-direction: column;
+.shared-panel {
+	:deep(.ai-chat-panel) {
+		padding-top: var(--app-nav-height);
+	}
 
-	.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,8 +80,10 @@
 						:show-viewer-actions="!isCustomerBound"
 						:add-actions="photoAddActions"
 						:loading="isPhotoUploading"
-						@add-photo="openPhotoPicker('PHOTO')"
-						@add-point-card="openPhotoPicker('POINT_CARD')"
+						@add="openPhotoPicker('OTHER')"
+						@capture-photo="capturePhoto"
+						@capture-video="captureVideo"
+						@add-point-card="capturePointCard"
 						@add-other="openPhotoPicker('OTHER')"
 					/>
 					<div class="tips orange" v-if="!hasCustomerDeletePermission">当前账户权限编辑客户需要上传照片和积分卡</div>
@@ -176,7 +178,23 @@
 			ref="photoInputRef"
 			class="file-input"
 			type="file"
+			accept="*/*"
+			@change="handlePhotoSelected"
+		>
+		<input
+			ref="photoCameraInputRef"
+			class="file-input"
+			type="file"
 			accept="image/*"
+			capture="environment"
+			@change="handlePhotoSelected"
+		>
+		<input
+			ref="videoInputRef"
+			class="file-input"
+			type="file"
+			accept="video/*"
+			capture="environment"
 			@change="handlePhotoSelected"
 		>
 		<customer-selector
@@ -213,7 +231,7 @@ 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 TagSelector from "@/components/TagSelector.vue";
 import CustomerTagCard from "@/pages/customer/component/CustomerTagCard.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
@@ -442,6 +460,30 @@ 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();
+}
+
 watch(isCustomerBound, (value) => {
 	navBarStore.setRightDisabled(value);
 	if (!value) {
@@ -485,6 +527,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 +574,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 +635,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

@@ -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,7 +126,7 @@
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import ProductAPI from "@/api/ProductAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import ProductStockPreview from "@/components/ProductStockPreview.vue";
 import { useNavBarStore } from "@/store/navBarStore";

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"
@@ -121,7 +121,7 @@
 					<t-switch v-model="returnedToStore" />
 				</t-form-item>
 				<t-form-item label-width="0">
-					<photo-scroller
+					<media-selector
 						:model-value="photoUrlList"
 						v-model:photo-items="photoItems"
 						:upload="uploadPhotoList"
@@ -141,7 +141,7 @@ import { PassTimeLabel } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { OrderFulfillment, OrderFulfillmentItem } from "@/types/Fulfillment";

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

@@ -68,7 +68,7 @@
 				</t-form-item>
 			</template>
 			<div class="photo-wrap">
-				<photo-scroller
+				<media-selector
 					v-model="photoUrls"
 					v-model:photo-items="photos"
 					:upload="uploadPhotoList"
@@ -114,7 +114,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";

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,7 +82,7 @@ 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";

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="附件列表"
@@ -118,7 +118,7 @@
 				<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
+			<media-selector
 				v-if="skuPhotoItemList.length"
 				:model-value="skuPhotoUrlList"
 				:photo-items="skuPhotoItemList"
@@ -154,7 +154,7 @@ 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 { useNavBarStore } from "@/store/navBarStore";
 import type { NavBarAction } from "@/types/NavBarAction";
@@ -435,7 +435,7 @@ onUnmounted(() => navBarStore.clearRight());
 		margin: 0 0 .75rem;
 	}
 
-	:deep(.photo-scroller) {
+	:deep(.media-selector) {
 		margin: 0 .75rem .75rem;
 	}
 

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,7 +31,9 @@
 					:loading="isAttachmentUploading"
 					:show-viewer-actions="false"
 					:add-actions="attachmentAddActions"
-					@add-photo="openAttachmentPicker('PHOTO')"
+					@add="openAttachmentPicker('OTHER')"
+					@capture-photo="capturePhoto"
+					@capture-video="captureVideo"
 					@add-other="openAttachmentPicker('OTHER')"
 				/>
 			</t-form-item>
@@ -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,7 +210,7 @@ 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";
@@ -252,6 +256,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 +275,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 +557,16 @@ 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 openCoverColorPicker(): void {
 	coverColorDraft.value = solidColorCoverColor.value || DEFAULT_COVER_COLOR;
 	coverColorPickerVisible.value = true;
@@ -628,7 +643,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, "产品附件上传失败"));

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

@@ -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,7 +137,7 @@ import { BottomPopup } from "timi-tdesign-mobile";
 import { PassTimeLabel } from "timi-web";
 import { useUserStore, type Attachment } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
-import PhotoScroller from "@/components/PhotoScroller.vue";
+import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { PhotoItem } from "@/types/Photo";

src/pages/product/component/ProductSkuEditor.vue

@@ -106,7 +106,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 图片（选填）"
@@ -147,7 +147,7 @@
 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 MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import { formatProductAmount, getProductSkuSpecEntries, parseProductAmount } from "@/utils/product";
 import { uploadPhotoList } from "@/utils/photo";
 

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/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

@@ -175,7 +175,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 +184,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 +196,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 +232,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

@@ -29,7 +29,7 @@
 				</t-form-item>
 				<t-form-item label-width="0">
 					<div class="photo-wrap">
-						<photo-scroller
+						<media-selector
 							:model-value="photoURLList"
 							v-model:photo-items="photoItems"
 							:edit-mode="isEditing"
@@ -225,7 +225,7 @@ 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 MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoSalesOrderItem, GaoSalesPaymentStatus, SalesOrder } from "@/types/SalesOrder";

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/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/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)

src/pages/tabs/SettingTab.vue

@@ -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",