From bbca267242b0c863ba4f7a38ee3665580852eaed Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Fri, 28 Aug 2026 11:39:12 +0800
Subject: [PATCH] update notify style

---
 src/components/BottomPopup.vue                | 136 -----
 src/pages/customer/CustomerDetail.vue         |   1 +
 src/pages/customer/CustomerEdit.vue           |   1 +
 src/pages/notify/NotifyDetail.vue             |  11 +-
 src/pages/notify/NotifyManagementCreate.vue   | 114 +++-
 src/pages/notify/NotifyManagementDetail.vue   |   6 +
 .../component/NotifyRecipientPicker.vue       | 560 ++++++++++++------
 .../component/NotifyRecipientScopePicker.vue  |  98 ---
 src/pages/permission/RoleEdit.vue             |   1 +
 .../point/component/PointRuleTierEditor.vue   |   2 +-
 10 files changed, 483 insertions(+), 447 deletions(-)
 delete mode 100644 src/components/BottomPopup.vue
 delete mode 100644 src/pages/notify/component/NotifyRecipientScopePicker.vue

diff --git a/src/components/BottomPopup.vue b/src/components/BottomPopup.vue
deleted file mode 100644
index 4e07b6f..0000000
--- a/src/components/BottomPopup.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-	<t-popup v-model="visible" placement="bottom">
-		<div class="bottom-popup" :style="{height: props.height}">
-			<div v-if="hasHeader" class="header">
-				<div class="button left">
-					<slot name="leftButton">
-						<t-button v-if="leftButtonText" variant="text" size="small" @click="emitLeftButtonClick">
-							<span v-text="leftButtonText" />
-						</t-button>
-					</slot>
-				</div>
-				<div class="title">
-					<slot name="title">
-						<span v-text="title" />
-					</slot>
-				</div>
-				<div class="button right">
-					<slot name="rightButton">
-						<t-button v-if="rightButtonText" theme="primary" variant="text" size="small" @click="emitRightButtonClick">
-							<span v-text="rightButtonText" />
-						</t-button>
-					</slot>
-				</div>
-			</div>
-			<div class="body">
-				<slot />
-			</div>
-		</div>
-	</t-popup>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-	name: "BottomPopup"
-});
-
-interface Props {
-	modelValue?: boolean;
-	leftButtonText?: string;
-	rightButtonText?: string;
-	height?: string | number;
-	title?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	modelValue: false,
-	leftButtonText: "取消",
-	rightButtonText: "确定",
-	height: "auto",
-	title: ""
-});
-
-const emit = defineEmits<{
-	"update:modelValue": [value: boolean];
-	leftButtonClick: [];
-	rightButtonClick: [];
-}>();
-
-const slots = useSlots();
-const visible = computed({
-	get: () => props.modelValue,
-	set: value => emit("update:modelValue", value)
-});
-const hasHeader = computed(() => Boolean(
-	props.title
-	|| props.leftButtonText
-	|| props.rightButtonText
-	|| slots.title
-	|| slots.leftButton
-	|| slots.rightButton
-));
-
-function emitLeftButtonClick(): void {
-	emit("leftButtonClick");
-}
-
-function emitRightButtonClick(): void {
-	emit("rightButtonClick");
-}
-
-defineSlots<{
-	default?: () => unknown;
-	title?: () => unknown;
-	leftButton?: () => unknown;
-	rightButton?: () => unknown;
-}>();
-</script>
-
-<style scoped lang="less">
-.bottom-popup {
-	display: flex;
-	overflow: hidden;
-	background: var(--td-bg-color-container, #FFF);
-	padding-top: 1rem;
-	border-radius: 1.25rem 1.25rem 0 0;
-	flex-direction: column;
-
-	.header {
-		flex: none;
-		padding: 0 1rem;
-		display: grid;
-		align-items: center;
-		grid-template-columns: 4rem 1fr 4rem;
-	}
-
-	.button {
-		min-width: 0;
-		display: flex;
-
-		&.right {
-			justify-content: flex-end;
-		}
-	}
-
-	.title {
-		margin: 0;
-		overflow: hidden;
-		text-align: center;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	.body {
-		flex: 1;
-		padding: .75rem 0 env(safe-area-inset-bottom, 0);
-		overflow: auto;
-		min-height: 0;
-	}
-}
-
-:global(html.theme-dark) {
-	.bottom-popup {
-		background: #0f172a;
-	}
-}
-</style>
diff --git a/src/pages/customer/CustomerDetail.vue b/src/pages/customer/CustomerDetail.vue
index 4896949..b01609c 100644
--- a/src/pages/customer/CustomerDetail.vue
+++ b/src/pages/customer/CustomerDetail.vue
@@ -155,6 +155,7 @@
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
 import { Message } from "@/utils/message";
 import { PassTimeLabel, Text } from "timi-web";
 import { useUserStore, type Attachment } from "timi-web-api";
diff --git a/src/pages/customer/CustomerEdit.vue b/src/pages/customer/CustomerEdit.vue
index eb8853f..76f865c 100644
--- a/src/pages/customer/CustomerEdit.vue
+++ b/src/pages/customer/CustomerEdit.vue
@@ -173,6 +173,7 @@
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
 import { type Attachment, AttachmentAPI, useUserStore } from "timi-web-api";
 import { Message } from "@/utils/message";
 import CustomerAPI from "@/api/CustomerAPI";
diff --git a/src/pages/notify/NotifyDetail.vue b/src/pages/notify/NotifyDetail.vue
index 569b317..97628b9 100644
--- a/src/pages/notify/NotifyDetail.vue
+++ b/src/pages/notify/NotifyDetail.vue
@@ -9,7 +9,11 @@
 				<pass-time-label class="time" :timestamp="detail.sendAt" underline />
 			</header>
 			<section class="body">
-				<notify-view :detail="detail" empty-text="暂无通知内容" />
+				<notify-view
+					:detail="detail"
+					empty-text="暂无通知内容"
+					:resolve-attachment-url="resolveAttachmentUrl"
+				/>
 			</section>
 		</article>
 		<t-empty
@@ -26,6 +30,7 @@ import { NotifyAPI, type NotifyDetail } from "timi-web-api";
 import { DialogPlugin } from "tdesign-mobile-vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import { getErrorMessage } from "@/utils/error";
+import { getAttachmentReadURL } from "@/utils/attachment";
 import { corePermissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message.ts";
 
@@ -148,6 +153,10 @@ function getSenderName(item: NotifyDetail): string {
 	return item.fromUser?.nick?.trim() || item.fromUser?.name?.trim() || "系统通知";
 }
 
+function resolveAttachmentUrl(attachmentId: string): string {
+	return getAttachmentReadURL(attachmentId);
+}
+
 // ---------- 生命周期 ----------
 
 watch(() => route.params.id, async () => {
diff --git a/src/pages/notify/NotifyManagementCreate.vue b/src/pages/notify/NotifyManagementCreate.vue
index ad6f9d9..dc3bb6c 100644
--- a/src/pages/notify/NotifyManagementCreate.vue
+++ b/src/pages/notify/NotifyManagementCreate.vue
@@ -10,17 +10,12 @@
 					placeholder="请输入通知标题"
 				/>
 			</t-form-item>
-			<notify-recipient-scope-picker
-				v-if="isGlobalScope"
-				v-model="selectedStoreId"
-				:options="storeScopeOptions"
-				@update:model-value="handleStoreScopeChange"
-			/>
-			<notify-recipient-picker
-				v-model="selectedUserIdList"
-				:users="recipientList"
-				:self-user="selfRecipient"
-				:loading="isRecipientLoading"
+			<t-form-item
+				label="接收用户"
+				:description="selectedRecipientDescription"
+				required-mark
+				arrow
+				@click="openRecipientPicker"
 			/>
 			<t-form-item label="发送时间" arrow @click="openSchedulePicker">
 				<div class="schedule-value">
@@ -39,10 +34,20 @@
 					class="editor"
 					v-model="draftDetail"
 					placeholder="请输入通知内容"
+					:upload-image="uploadImage"
+					:upload-video="uploadVideo"
 				/>
 			</section>
 		</t-form>
 	</div>
+	<notify-recipient-picker
+		v-model="selectedUserIdList"
+		v-model:visible="recipientPickerVisible"
+		:users="recipientList"
+		:stores="storeScopeOptions"
+		:self-user="selfRecipient"
+		:loading="isRecipientLoading"
+	/>
 	<t-popup v-model="schedulePickerVisible" placement="bottom">
 		<t-date-time-picker
 			v-model="scheduleDraftText"
@@ -59,18 +64,15 @@
 <script setup lang="ts">
 import { NotifyEditor, type NotifyEditorExpose } from "timi-tdesign-mobile";
 import { Time } from "timi-web";
-import { type Attachment as ApiAttachment, type NotifyContentType, type NotifyDetail, useUserStore } from "timi-web-api";
+import { AttachmentAPI, type Attachment as ApiAttachment, type NotifyContentType, type NotifyDetail, useUserStore } from "timi-web-api";
 import { Message } from "@/utils/message";
 import { getErrorMessage } from "@/utils/error";
 import GaoNotifyAPI from "@/api/GaoNotifyAPI";
 import type { ManagedUser } from "@/types/ManagedUser";
+import NotifyRecipientPicker, { type NotifyRecipientScopeOption } from "@/pages/notify/component/NotifyRecipientPicker.vue";
 import { corePermissionCodes, coreRoleCodes, gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { useNavBarStore } from "@/store/navBarStore";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
-import NotifyRecipientScopePicker, { type NotifyRecipientScopeOption } from "@/pages/notify/component/NotifyRecipientScopePicker.vue";
-import NotifyRecipientPicker from "@/pages/notify/component/NotifyRecipientPicker.vue";
-
-const allStoreValue = "__ALL_STORES__";
 
 defineOptions({
 	name: "NotifyManagementCreate"
@@ -95,12 +97,33 @@ const draftDetail = ref<NotifyDetail>({
 });
 const selectedUserIdList = ref<string[]>([]);
 const isSaving = ref(false);
-const selectedStoreId = ref(allStoreValue);
+
+async function uploadMedia(file: File): Promise<{ id: string; url: string; name: string }> {
+	const [tempFile] = await AttachmentAPI.upload(file);
+	if (!tempFile?.id) {
+		throw new Error("媒体上传失败");
+	}
+	return {
+		id: tempFile.id,
+		url: AttachmentAPI.getTempReadURL(tempFile.id),
+		name: file.name
+	};
+}
+
+async function uploadImage(file: File) {
+	return await uploadMedia(file);
+}
+
+async function uploadVideo(file: File) {
+	return await uploadMedia(file);
+}
 
 // ---------- 接收用户 ----------
 
 const isRecipientLoading = ref(false);
 const recipientList = ref<ManagedUser[]>([]);
+const recipientPickerVisible = ref(false);
+const recipientStoreId = ref("");
 const loginUserId = computed(() => userStore.loginUser.user?.id || userStore.loginUser.id || "");
 const selfRecipient = computed<ManagedUser | undefined>(() => {
 	if (!loginUserId.value) {
@@ -114,20 +137,41 @@ const selfRecipient = computed<ManagedUser | undefined>(() => {
 			id: user.id,
 			name: user.name,
 			nick: user.nick,
-			phoneNo: user.phoneNo
+			phoneNo: user.phoneNo,
+			attachmentList: user.attachmentList as unknown as ApiAttachment[]
 		} : undefined
 	};
 });
 
-const storeScopeOptions = computed<NotifyRecipientScopeOption[]>(() => [
-	...(isGlobalScope.value ? [{ label: "所有门店", value: allStoreValue }] : []),
-	...currentStoreStore.storeList
+const storeScopeOptions = computed<NotifyRecipientScopeOption[]>(() => {
+	const storeList = currentStoreStore.storeList.length
+		? currentStoreStore.storeList
+		: currentStoreStore.currentStore
+			? [currentStoreStore.currentStore]
+			: [];
+	return storeList
 		.map(item => ({
 			label: item.name || item.code || "未命名门店",
 			value: item.id || ""
 		}))
-		.filter(item => item.value)
-]);
+		.filter(item => item.value);
+});
+const availableRecipientList = computed(() => {
+	const selfUserId = selfRecipient.value?.userId;
+	const userList = selfUserId
+		? recipientList.value.filter(item => item.userId !== selfUserId)
+		: recipientList.value;
+	return selfRecipient.value ? [selfRecipient.value, ...userList] : userList;
+});
+const selectedRecipientDescription = computed(() => {
+	if (!selectedUserIdList.value.length) {
+		return "请选择接收用户";
+	}
+	const recipientMap = new Map(availableRecipientList.value.map(item => [item.userId, item]));
+	return selectedUserIdList.value
+		.map(userId => getRecipientName(recipientMap.get(userId) || { userId }))
+		.join("、");
+});
 
 // ---------- 定时发送 ----------
 
@@ -236,6 +280,19 @@ function clearSchedule(): void {
 	scheduleDraftText.value = "";
 }
 
+// ---------- 接收用户选择 ----------
+
+function openRecipientPicker(): void {
+	recipientPickerVisible.value = true;
+}
+
+function getRecipientName(item: ManagedUser): string {
+	if (item.userId === selfRecipient.value?.userId) {
+		return `自己（${item.user?.nick || item.user?.name || "当前账号"}）`;
+	}
+	return item.user?.nick || item.user?.name || item.userId || "未命名用户";
+}
+
 // ---------- 接收用户 ----------
 
 async function loadRecipients(): Promise<void> {
@@ -249,9 +306,7 @@ async function loadRecipients(): Promise<void> {
 		const list: ManagedUser[] = [];
 		let pageIndex = 0;
 		let total = 0;
-		const storeId = selectedStoreId.value && selectedStoreId.value !== allStoreValue
-			? selectedStoreId.value
-			: undefined;
+		const storeId = recipientStoreId.value || undefined;
 		while (true) {
 			const result = await GaoNotifyAPI.listRecipients(
 				{ index: pageIndex, size: pageSize },
@@ -280,11 +335,6 @@ async function loadRecipients(): Promise<void> {
 	}
 }
 
-async function handleStoreScopeChange(): Promise<void> {
-	selectedUserIdList.value = [];
-	await loadRecipients();
-}
-
 // ---------- 生命周期 ----------
 
 onMounted(async () => {
@@ -296,7 +346,7 @@ onMounted(async () => {
 		await currentStoreStore.loadStoreList();
 	} else {
 		const loginStore = await currentStoreStore.loadLoginStore();
-		selectedStoreId.value = loginStore?.id || currentStoreStore.currentStoreId || "";
+		recipientStoreId.value = loginStore?.id || currentStoreStore.currentStoreId || "";
 	}
 	navBarStore.setRightText("发送", "var(--td-brand-color)", saveNotification);
 	await loadRecipients();
diff --git a/src/pages/notify/NotifyManagementDetail.vue b/src/pages/notify/NotifyManagementDetail.vue
index 40de9af..0ba5b64 100644
--- a/src/pages/notify/NotifyManagementDetail.vue
+++ b/src/pages/notify/NotifyManagementDetail.vue
@@ -15,6 +15,7 @@
 						v-if="mainDetail"
 						:detail="mainDetail"
 						empty-text="暂无通知内容"
+						:resolve-attachment-url="resolveAttachmentUrl"
 					/>
 					<div v-else class="empty-content">暂无通知内容</div>
 				</section>
@@ -75,6 +76,7 @@ import { NotifyAPI, type Notify, type NotifyDetail, useUserStore } from "timi-we
 import { DialogPlugin } from "tdesign-mobile-vue";
 import { Message } from "@/utils/message";
 import { getErrorMessage } from "@/utils/error";
+import { getAttachmentReadURL } from "@/utils/attachment";
 import { useNavBarStore } from "@/store/navBarStore";
 import { corePermissionCodes } from "@/utils/permission";
 
@@ -145,6 +147,10 @@ const getSummaryTheme = computed<NotifyTagTheme>(() => {
 	return "success";
 });
 
+function resolveAttachmentUrl(attachmentId: string): string {
+	return getAttachmentReadURL(attachmentId);
+}
+
 async function loadDetail(): Promise<void> {
 	const requestToken = loadToken + 1;
 	loadToken = requestToken;
diff --git a/src/pages/notify/component/NotifyRecipientPicker.vue b/src/pages/notify/component/NotifyRecipientPicker.vue
index 0eea2f3..18c44a2 100644
--- a/src/pages/notify/component/NotifyRecipientPicker.vue
+++ b/src/pages/notify/component/NotifyRecipientPicker.vue
@@ -1,73 +1,153 @@
 <template>
-	<t-form-item
-		label="接收用户"
-		required-mark
-		:arrow="true"
-		@click="openPicker"
+	<bottom-popup
+		v-model="popupVisible"
+		title="选择接收用户"
+		right-button-text="完成"
+		height="80vh"
+		@left-button-click="handleLeftButton"
+		@right-button-click="confirmSelection"
 	>
-		<div class="selected-text" v-text="selectedText" />
-	</t-form-item>
-	<t-popup v-model="visible" placement="bottom" destroy-on-close>
-		<div class="recipient-picker">
-			<header class="picker-header">
-				<t-button variant="text" size="small" @click="cancelPicker">取消</t-button>
-				<h3>选择接收用户</h3>
-				<t-button theme="primary" variant="text" size="small" @click="confirmPicker">确定</t-button>
-			</header>
-			<div class="search-wrapper">
-				<t-input
-					v-model.trim="keyword"
-					class="search"
-					borderless
-					clearable
-					placeholder="搜索姓名、昵称或手机号"
-				/>
-			</div>
-			<div class="selection-actions">
-				<span class="selection-count" v-text="`已选择 ${selectedUserIdList.length} 人`" />
-				<t-button
-					variant="text"
-					size="small"
-					:disabled="!filteredIdList.length"
-					@click="toggleSelectAll"
-				>
-					<span v-text="allFilteredSelected ? '取消全选' : '全选当前结果'" />
-				</t-button>
-			</div>
-			<div class="recipient-list">
-				<t-checkbox-group
-					v-if="filteredList.length"
-					v-model="selectedUserIdList"
-					class="recipient-options"
-				>
-					<t-checkbox
-						v-for="item in filteredList"
-						:key="item.userId"
-						:value="item.userId"
-						class="recipient-option"
-						borderless
-					>
-						<div class="recipient-info">
-							<span class="recipient-name" v-text="getRecipientName(item)" />
-							<span class="recipient-phone" v-text="item.user?.phoneNo || item.userId" />
-						</div>
-					</t-checkbox>
-				</t-checkbox-group>
-				<t-empty
-					v-else
-					:description="loading ? '正在加载用户' : '暂无匹配用户'"
-				/>
-			</div>
+		<template #leftButton>
+			<t-button variant="text" size="small" @click="handleLeftButton">
+				<span v-text="pickerStoreId ? '返回' : '取消'" />
+			</t-button>
+		</template>
+		<div class="page-transition">
+			<transition :name="pageTransitionName">
+				<div v-if="!pickerStoreId" key="store-list" class="recipient-picker store">
+					<div class="summary">
+						<span v-text="`已选择 ${draftSelectedUserIdList.length} 位用户`" />
+						<span v-text="loading ? '正在加载' : '勾选门店可选择全部用户'" />
+					</div>
+					<t-cell-group v-if="stores.length || selfUser" class="list">
+						<t-cell
+							v-if="selfUser"
+							class="item"
+							title="当前账号"
+							description="可接收自己发送的通知"
+							@click="toggleSelfRecipient(!isSelfRecipientSelected())"
+						>
+							<template #left-icon>
+								<div class="leading">
+									<div @click.stop>
+										<t-checkbox
+											class="checkbox"
+											:model-value="draftSelectedUserIdList.includes(selfUser.userId || '')"
+											borderless
+											@change="toggleSelfRecipient"
+										/>
+									</div>
+									<t-image
+										:src="buildUserAvatar(selfUser)"
+										:alt="getRecipientName(selfUser)"
+										fit="cover"
+										class="avatar"
+									/>
+								</div>
+							</template>
+						</t-cell>
+						<t-cell
+							class="item"
+							v-for="item in stores"
+							:key="item.value"
+							:title="item.label"
+							:description="getStoreSelectionDescription(item.value)"
+							arrow
+							@click="openStore(item.value)"
+						>
+							<template #left-icon>
+								<div @click.stop>
+									<t-checkbox
+										class="checkbox"
+										icon="rectangle"
+										:model-value="isStoreSelected(item.value) || isStoreIndeterminate(item.value)"
+										:indeterminate="isStoreIndeterminate(item.value)"
+										borderless
+										@change="value => toggleStoreSelection(item.value, value === true)"
+									/>
+								</div>
+							</template>
+						</t-cell>
+					</t-cell-group>
+					<t-empty
+						v-else
+						:description="loading ? '正在加载门店用户' : '暂无可选择门店'"
+					/>
+				</div>
+				<div v-else key="user-list" class="recipient-picker user">
+					<div class="header">
+						<span v-text="selectedStore?.label || '选择用户'" />
+						<span v-text="getStoreSelectionDescription(pickerStoreId)" />
+					</div>
+					<div class="search-wrapper">
+						<t-input
+							v-model.trim="keyword"
+							class="search"
+							borderless
+							size="small"
+							clearable
+							placeholder="搜索编码、姓名（拼音）、或手机号"
+						/>
+					</div>
+					<t-cell-group v-if="filteredUserList.length">
+						<t-cell
+							v-for="item in filteredUserList"
+							:key="item.userId"
+							class="item recipient-option"
+							:title="getRecipientName(item)"
+							:description="item.user?.phoneNo || item.userId"
+							@click="toggleUserSelection(item.userId)"
+						>
+							<template #left-icon>
+								<div class="leading">
+									<div @click.stop>
+										<t-checkbox
+											class="checkbox"
+											:model-value="isUserSelected(item.userId)"
+											borderless
+											@change="value => toggleUserSelection(item.userId, value === true)"
+										/>
+									</div>
+									<t-image
+										:src="buildUserAvatar(item)"
+										:alt="getRecipientName(item)"
+										fit="cover"
+										class="avatar"
+									/>
+								</div>
+							</template>
+						</t-cell>
+					</t-cell-group>
+					<t-empty
+						v-else
+						:description="loading ? '正在加载用户' : '暂无匹配用户'"
+					/>
+				</div>
+			</transition>
 		</div>
-	</t-popup>
+	</bottom-popup>
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
+import { UserAPI } from "timi-web-api";
 import type { ManagedUser } from "@/types/ManagedUser";
+import { buildFallbackAvatar } from "@/utils/avatar";
+
+export type NotifyRecipientScopeOption = {
+	label: string;
+	value: string;
+};
+
+defineOptions({
+	name: "NotifyRecipientPicker"
+});
 
 const props = withDefaults(defineProps<{
 	modelValue: string[];
+	visible: boolean;
 	users: ManagedUser[];
+	stores: NotifyRecipientScopeOption[];
 	selfUser?: ManagedUser;
 	loading?: boolean;
 }>(), {
@@ -76,46 +156,42 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	"update:modelValue": [value: string[]];
+	"update:visible": [value: boolean];
 }>();
 
-const visible = ref(false);
-const keyword = ref("");
+const popupVisible = computed({
+	get: () => props.visible,
+	set: value => emit("update:visible", value)
+});
 const draftSelectedUserIdList = ref<string[]>([]);
+const pickerStoreId = ref("");
+const keyword = ref("");
+const pageDirection = ref<"forward" | "backward">("forward");
 
-const selectedUserIdList = computed({
-	get: () => props.modelValue,
-	set: value => emit("update:modelValue", value)
-});
-
-const availableList = computed(() => {
-	const selfUserId = props.selfUser?.userId;
-	const userList = selfUserId
-		? props.users.filter(item => item.userId !== selfUserId)
-		: props.users;
-	return props.selfUser ? [props.selfUser, ...userList] : userList;
-});
-
-const filteredList = computed(() => {
+const pageTransitionName = computed(() => `page-slide-${pageDirection.value}`);
+const selectedStore = computed(() => props.stores.find(item => item.value === pickerStoreId.value));
+const filteredUserList = computed(() => {
 	const normalizedKeyword = keyword.value.toLowerCase();
-	if (!normalizedKeyword) {
-		return availableList.value;
+	return props.users
+		.filter(item => item.storeId === pickerStoreId.value)
+		.filter(item => {
+			const user = item.user;
+			return !normalizedKeyword || [item.userId, user?.name, user?.nick, user?.phoneNo]
+				.some(value => Boolean(value?.toLowerCase().includes(normalizedKeyword)));
+		});
+});
+const storeUserMap = computed(() => {
+	const map = new Map<string, ManagedUser[]>();
+	for (const item of props.users) {
+		if (!item.storeId || !item.userId) {
+			continue;
+		}
+		const userList = map.get(item.storeId) || [];
+		userList.push(item);
+		map.set(item.storeId, userList);
 	}
-
-	return availableList.value.filter(item => {
-		const user = item.user;
-		return [item.userId, user?.name, user?.nick, user?.phoneNo]
-			.some(value => Boolean(value?.toLowerCase().includes(normalizedKeyword)));
-	});
+	return map;
 });
-
-const filteredIdList = computed(() => filteredList.value
-	.map(item => item.userId)
-	.filter((item): item is string => Boolean(item)));
-const allFilteredSelected = computed(() => 0 < filteredIdList.value.length
-	&& filteredIdList.value.every(id => selectedUserIdList.value.includes(id)));
-const selectedText = computed(() => selectedUserIdList.value.length
-	? `已选择 ${selectedUserIdList.value.length} 位用户`
-	: "请选择接收用户");
 
 function getRecipientName(item: ManagedUser): string {
 	if (item.userId === props.selfUser?.userId) {
@@ -124,127 +200,253 @@ function getRecipientName(item: ManagedUser): string {
 	return item.user?.nick || item.user?.name || item.userId || "未命名用户";
 }
 
-function openPicker(): void {
-	draftSelectedUserIdList.value = [...selectedUserIdList.value];
-	keyword.value = "";
-	visible.value = true;
+function buildUserAvatar(item: ManagedUser): string {
+	const name = item.user?.nick || item.user?.name || item.userId || "用户";
+	return UserAPI.getAvatarURL(item.user) || buildFallbackAvatar(name, "#0f766e");
 }
 
-function cancelPicker(): void {
-	selectedUserIdList.value = [...draftSelectedUserIdList.value];
-	visible.value = false;
+function isUserSelected(userId?: string): boolean {
+	return Boolean(userId && draftSelectedUserIdList.value.includes(userId));
 }
 
-function confirmPicker(): void {
-	draftSelectedUserIdList.value = [...selectedUserIdList.value];
-	visible.value = false;
-}
-
-function toggleSelectAll(): void {
-	const filteredIdSet = new Set(filteredIdList.value);
-	if (allFilteredSelected.value) {
-		selectedUserIdList.value = selectedUserIdList.value.filter(id => !filteredIdSet.has(id));
+function toggleUserSelection(userId?: string, checked?: boolean): void {
+	if (!userId) {
 		return;
 	}
-
-	selectedUserIdList.value = Array.from(new Set([
-		...selectedUserIdList.value,
-		...filteredIdList.value
-	]));
+	const selectedUserIdSet = new Set(draftSelectedUserIdList.value);
+	if (checked === undefined ? !selectedUserIdSet.has(userId) : checked) {
+		selectedUserIdSet.add(userId);
+	} else {
+		selectedUserIdSet.delete(userId);
+	}
+	draftSelectedUserIdList.value = Array.from(selectedUserIdSet);
 }
+
+function isSelfRecipientSelected(): boolean {
+	const userId = props.selfUser?.userId;
+	return Boolean(userId && draftSelectedUserIdList.value.includes(userId));
+}
+
+function toggleSelfRecipient(value: boolean): void {
+	const userId = props.selfUser?.userId;
+	if (!userId) {
+		return;
+	}
+	const selectedUserIdSet = new Set(draftSelectedUserIdList.value);
+	if (value) {
+		selectedUserIdSet.add(userId);
+	} else {
+		selectedUserIdSet.delete(userId);
+	}
+	draftSelectedUserIdList.value = Array.from(selectedUserIdSet);
+}
+
+function isStoreSelected(storeId: string): boolean {
+	const userList = storeUserMap.value.get(storeId) || [];
+	const selectedUserIdSet = new Set(draftSelectedUserIdList.value);
+	return 0 < userList.length
+		&& userList.every(item => Boolean(item.userId && selectedUserIdSet.has(item.userId)));
+}
+
+function isStoreIndeterminate(storeId: string): boolean {
+	const userList = storeUserMap.value.get(storeId) || [];
+	const selectedUserIdSet = new Set(draftSelectedUserIdList.value);
+	const selectedCount = userList.filter(item => Boolean(item.userId && selectedUserIdSet.has(item.userId))).length;
+	return 0 < selectedCount && selectedCount < userList.length;
+}
+
+function getStoreSelectionDescription(storeId: string): string {
+	const userList = storeUserMap.value.get(storeId) || [];
+	const selectedUserIdSet = new Set(draftSelectedUserIdList.value);
+	const selectedCount = userList.filter(item => Boolean(item.userId && selectedUserIdSet.has(item.userId))).length;
+	return userList.length ? `已选择 ${selectedCount}/${userList.length} 位用户` : "暂无可选择用户";
+}
+
+function openStore(storeId: string): void {
+	pageDirection.value = "forward";
+	pickerStoreId.value = storeId;
+	keyword.value = "";
+}
+
+function toggleStoreSelection(storeId: string, checked: boolean): void {
+	const selectedUserIdSet = new Set(draftSelectedUserIdList.value);
+	for (const item of storeUserMap.value.get(storeId) || []) {
+		if (!item.userId) {
+			continue;
+		}
+		if (checked) {
+			selectedUserIdSet.add(item.userId);
+		} else {
+			selectedUserIdSet.delete(item.userId);
+		}
+	}
+	draftSelectedUserIdList.value = Array.from(selectedUserIdSet);
+}
+
+function handleLeftButton(): void {
+	if (pickerStoreId.value) {
+		pageDirection.value = "backward";
+		pickerStoreId.value = "";
+		keyword.value = "";
+		return;
+	}
+	popupVisible.value = false;
+}
+
+function confirmSelection(): void {
+	emit("update:modelValue", Array.from(new Set(draftSelectedUserIdList.value)));
+	pickerStoreId.value = "";
+	keyword.value = "";
+	popupVisible.value = false;
+}
+
+watch(() => props.visible, (value) => {
+	if (!value) {
+		return;
+	}
+	draftSelectedUserIdList.value = [...props.modelValue];
+	pageDirection.value = "forward";
+	pickerStoreId.value = "";
+	keyword.value = "";
+});
 </script>
 
 <style scoped lang="less">
-.selected-text {
-	color: #52607a;
-	width: 100%;
-	overflow: hidden;
-	text-align: right;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .recipient-picker {
 	display: flex;
-	height: 80vh;
-	padding-top: 1rem;
-	background: var(--td-bg-color-container);
+	height: 100%;
+	background: white;
 	flex-direction: column;
 
-	.picker-header {
-		padding: 0 1rem;
-		display: grid;
-		grid-template-columns: 4rem 1fr 4rem;
-		align-items: center;
-
-		h3 {
-			margin: 0;
-			text-align: center;
-		}
-	}
-
-	.search-wrapper {
-		padding: 1rem 0 .5rem;
-		box-shadow: 0 4px 4px rgba(0, 0, 0, .05);
-
-		.search {
-			margin: 0 1rem;
-			border: 1px solid var(--td-component-border);
-			border-radius: .875rem;
-		}
-	}
-
-	.selection-actions {
-		padding: .25rem 1rem;
+	.summary {
+		padding: .5rem 1rem;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 
-		.selection-count {
+		span {
 			color: #64748b;
 			font-size: .8125rem;
 		}
 	}
 
-	.recipient-list {
-		flex: 1;
-		overflow: auto;
-		min-height: 0;
-		padding: 0 1rem env(safe-area-inset-bottom, 0);
+	.item {
+		padding: .25rem 1rem;
 
-		.recipient-options {
-			display: grid;
+		:deep(.t-cell__left) {
+			display: flex;
+			align-items: center;
+		}
 
-			.recipient-option {
-				padding: .75rem 0;
-				border-bottom: 1px solid var(--td-component-border);
+		.checkbox {
+			padding: .5rem;
 
-				.recipient-info {
-					gap: .25rem;
-					display: flex;
-					flex-direction: column;
-				}
+			:deep(.t-checkbox__icon--left) {
+				margin-right: 0;
+			}
+		}
 
-				.recipient-name {
-					font-size: .9375rem;
-				}
+		.leading {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
+		}
 
-				.recipient-phone {
-					color: #64748b;
-					font-size: .75rem;
-				}
+		.avatar {
+			width: 2.75rem;
+			height: 2.75rem;
+			overflow: hidden;
+		}
+
+		:deep(.avatar .t-image__img) {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	&.store {
+
+		.list {
+			flex: 1;
+			overflow: auto;
+			min-height: 0;
+		}
+	}
+
+	&.user {
+
+		.header {
+			color: #64748b;
+			font-size: .8125rem;
+			text-align: center;
+		}
+
+		.search-wrapper {
+			padding: 1rem 0 .5rem;
+			box-shadow: 0 4px 4px rgba(0, 0, 0, .05);
+
+			.search {
+				--td-input-vertical-padding: .5rem 1rem;
+
+				margin: 0 1rem;
+				border: 1px solid var(--td-component-border);
+				border-radius: .875rem;
 			}
 		}
 	}
 }
 
-:global(html.theme-dark) {
-	.selected-text {
-		color: #94a3b8;
-	}
 
-	.selection-count,
-	.recipient-phone {
+.page-transition {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+}
+
+.page-slide-forward-enter-active,
+.page-slide-forward-leave-active,
+.page-slide-backward-enter-active,
+.page-slide-backward-leave-active {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	transition: transform 320ms var(--tui-bezier), opacity 320ms var(--tui-bezier);
+	backface-visibility: hidden;
+}
+
+.page-slide-forward-enter-active {
+	z-index: 1;
+}
+
+.page-slide-forward-enter-from {
+	transform: translate3d(100%, 0, 0);
+}
+
+.page-slide-forward-leave-to {
+	transform: translate3d(-25%, 0, 0);
+	opacity: .92;
+}
+
+.page-slide-backward-enter-from {
+	transform: translate3d(-25%, 0, 0);
+	opacity: .92;
+}
+
+.page-slide-backward-leave-active {
+	z-index: 1;
+}
+
+.page-slide-backward-leave-to {
+	transform: translate3d(100%, 0, 0);
+}
+
+:global(html.theme-dark) {
+	.summary span,
+	.header,
+	.user .item :deep(.t-cell__description) {
 		color: #94a3b8;
 	}
 }
diff --git a/src/pages/notify/component/NotifyRecipientScopePicker.vue b/src/pages/notify/component/NotifyRecipientScopePicker.vue
deleted file mode 100644
index 80561b8..0000000
--- a/src/pages/notify/component/NotifyRecipientScopePicker.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-	<t-form-item label="用户范围" arrow @click="openPicker">
-		<div class="scope-text" v-text="selectedLabel" />
-	</t-form-item>
-	<t-popup v-model="visible" placement="bottom" destroy-on-close>
-		<div class="scope-picker">
-			<header class="picker-header">
-				<t-button variant="text" size="small" @click="cancelPicker">取消</t-button>
-				<h3>选择用户范围</h3>
-				<t-button theme="primary" variant="text" size="small" @click="confirmPicker">确定</t-button>
-			</header>
-			<t-radio-group v-model="draftValue" class="scope-options">
-				<t-radio
-					v-for="item in options"
-					:key="item.value"
-					:block="false"
-					borderless
-					:value="item.value"
-				>
-					<span v-text="item.label" />
-				</t-radio>
-			</t-radio-group>
-		</div>
-	</t-popup>
-</template>
-
-<script setup lang="ts">
-export type NotifyRecipientScopeOption = {
-	label: string;
-	value: string;
-};
-
-const props = defineProps<{
-	modelValue: string;
-	options: NotifyRecipientScopeOption[];
-}>();
-
-const emit = defineEmits<{
-	"update:modelValue": [value: string];
-}>();
-
-const visible = ref(false);
-const draftValue = ref(props.modelValue);
-const selectedLabel = computed(() => props.options.find(item => item.value === props.modelValue)?.label || "请选择用户范围");
-
-function openPicker(): void {
-	draftValue.value = props.modelValue;
-	visible.value = true;
-}
-
-function cancelPicker(): void {
-	visible.value = false;
-}
-
-function confirmPicker(): void {
-	emit("update:modelValue", draftValue.value);
-	visible.value = false;
-}
-</script>
-
-<style scoped lang="less">
-.scope-text {
-	color: #52607a;
-	width: 100%;
-	overflow: hidden;
-	text-align: right;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.scope-picker {
-	padding: 1rem 1rem env(safe-area-inset-bottom, 0);
-	background: var(--td-bg-color-container);
-
-	.picker-header {
-		display: grid;
-		grid-template-columns: 4rem 1fr 4rem;
-		align-items: center;
-
-		h3 {
-			margin: 0;
-			text-align: center;
-		}
-	}
-
-	.scope-options {
-		gap: .5rem;
-		margin-top: 1rem;
-		display: grid;
-	}
-}
-
-:global(html.theme-dark) {
-	.scope-text {
-		color: #94a3b8;
-	}
-}
-</style>
diff --git a/src/pages/permission/RoleEdit.vue b/src/pages/permission/RoleEdit.vue
index c69edd4..edd46fc 100644
--- a/src/pages/permission/RoleEdit.vue
+++ b/src/pages/permission/RoleEdit.vue
@@ -99,6 +99,7 @@
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
 import { Message } from "@/utils/message";
 import { useUserStore } from "timi-web-api";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
diff --git a/src/pages/point/component/PointRuleTierEditor.vue b/src/pages/point/component/PointRuleTierEditor.vue
index 6fd117f..c2f9407 100644
--- a/src/pages/point/component/PointRuleTierEditor.vue
+++ b/src/pages/point/component/PointRuleTierEditor.vue
@@ -35,7 +35,6 @@
 	</div>
 	<bottom-popup
 		v-model="tierEditorVisible"
-		placement="bottom"
 		:title="tierEditorTitle"
 		@left-button-click="closeTierEditor"
 		@right-button-click="confirmTierEditor"
@@ -91,6 +90,7 @@
 </template>
 
 <script setup lang="ts">
+import { BottomPopup } from "timi-tdesign-mobile";
 import type { EventValueUnit } from "@/types/EventItem";
 import type { PointAction, PointRuleTierForm } from "@/types/Point";
 import { formatTierBoundaryValue, getTierMinText, getTierMinValue, isLastTier, resolveNonNegativeInteger, resolveTierBoundaryValue } from "@/utils/pointRule";