create-koa-boot 1.0.0

package/templates/example/uniapp/pages/message/index.vue

@@ -0,0 +1,1052 @@
+<template>
+	<view class="page">
+		<!-- 沉浸式绿色导航（固定顶部） -->
+		<page-header title="消息中心" fixed @height-change="onHeaderHeightChange">
+			<template #actions>
+				<view class="header-action" @click="handleMarkAllRead">
+					<text class="header-action__text">全部已读</text>
+				</view>
+				<view v-if="isAdmin" class="header-action header-action--test" @click="openTestMenu">
+					<text class="header-action__text">测试推送</text>
+				</view>
+			</template>
+		</page-header>
+
+		<!-- 分类筛选（固定顶部） -->
+		<view class="tabs-wrap tabs-wrap--fixed" :style="{ top: headerHeight + 'px' }">
+			<uv-tabs :list="tabs" :current="activeTabIndex" :scrollable="true" line-color="#1F7A45"
+				:line-width="40" :line-height="6" :item-style="{ height: '88rpx' }"
+				:active-style="{ color: '#1F7A45', fontWeight: 600 }"
+				:inactive-style="{ color: '#666666' }" @change="onTabChange" />
+		</view>
+
+		<!-- 固定区占位 -->
+		<view class="header-holder" :style="{ height: (headerHeight + tabsHeight) + 'px' }"></view>
+
+		<!-- 骨架屏 -->
+		<view v-if="isFirstLoad" class="skeleton-container">
+			<view class="skeleton-item" v-for="i in 5" :key="i">
+				<uv-skeleton :loading="true" :animate="true" :title="true" :rows="3" rowsWidth="60%"
+					titleWidth="40%" />
+			</view>
+		</view>
+
+		<!-- 空状态 -->
+		<view v-else-if="list.length === 0" class="empty-container">
+			<uv-empty mode="list" :text="emptyText" marginTop="120" />
+		</view>
+
+		<!-- 消息列表 -->
+		<view v-else class="list-container">
+			<view class="msg-card" v-for="item in list" :key="item.id" @click="handleItemClick(item)">
+				<!-- 左侧类型图标 -->
+				<view class="msg-card__icon-wrap" :style="{ background: typeInfo(item.msgType).bg }">
+					<uv-icon :name="typeInfo(item.msgType).icon" :color="typeInfo(item.msgType).color" size="40rpx"></uv-icon>
+				</view>
+
+				<!-- 主体 -->
+				<view class="msg-card__body">
+					<view class="msg-card__title-row">
+						<view v-if="!item.isRead" class="msg-card__dot"></view>
+						<text class="msg-card__title"
+							:class="{ 'msg-card__title--unread': !item.isRead }">{{ item.title }}</text>
+						<view class="msg-card__type"
+							:style="{ color: typeInfo(item.msgType).color, background: typeInfo(item.msgType).bg }">
+							{{ typeInfo(item.msgType).label }}
+						</view>
+					</view>
+					<text class="msg-card__content">{{ item.content }}</text>
+					<view class="msg-card__footer">
+						<text class="msg-card__time">{{ formatDate(item.createdAt, 'MM-DD HH:mm') }}</text>
+						<text v-if="item.isRead" class="msg-card__read">已读</text>
+					</view>
+				</view>
+			</view>
+
+			<uv-load-more :status="loadMoreStatus" :line="true" :icon="true"
+				:nomore-text="'— 共 ' + total + ' 条，已全部加载 —'" margin-top="24" margin-bottom="32" />
+		</view>
+
+		<!-- 安全区 -->
+		<view class="safe-area-bottom" />
+
+		<!-- 测试推送弹层（仅管理员；外部渠道 / APP 推送两条独立链路） -->
+		<uv-popup ref="testPopup" mode="bottom" round="24" :safe-area-inset-bottom="true"
+			:close-on-click-overlay="true" @close="onTestPopupClose">
+			<view class="test-panel">
+				<!-- 头部 -->
+				<view class="test-panel__header">
+					<text class="test-panel__title">{{ testChannelTitle }}</text>
+					<view v-if="testMode" class="test-panel__mode" @click="switchTestMode">
+						<text class="test-panel__mode-text">{{ testMode === 'app' ? '外部渠道' : 'APP推送' }}</text>
+						<uv-icon name="refresh" size="14" color="#1F7A45"></uv-icon>
+					</view>
+					<view class="test-panel__close" @click="closeTestPopup">
+						<uv-icon name="close" size="18" color="#999999"></uv-icon>
+					</view>
+				</view>
+
+				<scroll-view scroll-y class="test-panel__body">
+					<!-- 接收人 -->
+					<view class="test-section">
+						<view class="test-section__label">
+							接收人
+							<text class="test-section__required">*</text>
+							<text class="test-section__count">已选 {{ testSelected.length }} 人</text>
+						</view>
+						<view class="test-search">
+							<input class="test-search__input" v-model="testKeyword" placeholder="搜索姓名/账号/手机号/邮箱"
+								placeholder-class="test-search__placeholder" confirm-type="search"
+								@confirm="loadReceivers" />
+							<view class="test-search__btn" @click="loadReceivers">搜索</view>
+						</view>
+						<view v-if="testLoading" class="test-tip">接收人加载中...</view>
+						<view v-else-if="testUsers.length === 0" class="test-tip">未找到匹配的用户</view>
+						<view v-else class="test-user-list">
+							<view class="test-user" v-for="u in testUsers" :key="u.id"
+								:class="{ 'test-user--active': isReceiverSelected(u.id) }"
+								@click="toggleReceiver(u)">
+								<view class="test-user__check">
+									<view v-if="isReceiverSelected(u.id)" class="test-user__box test-user__box--on">
+										<uv-icon name="checkmark" color="#ffffff" size="14"></uv-icon>
+									</view>
+									<view v-else class="test-user__box"></view>
+								</view>
+								<view class="test-user__info">
+									<view class="test-user__name-row">
+										<text class="test-user__name">{{ u.name || u.username }}</text>
+										<text v-if="u.deliverable" class="test-user__tag test-user__tag--bound">{{ deliverableLabel }}</text>
+										<text v-else class="test-user__tag test-user__tag--unbound">{{ undeliverableLabel }}</text>
+									</view>
+								<view class="test-user__meta">
+									<text class="test-user__phone">{{ isEmailChannel ? (u.email || '未填邮箱') : (u.phone || '未填手机号') }}</text>
+										<text v-if="u.roleNames && u.roleNames.length"
+											class="test-user__roles">{{ u.roleNames.join(' / ') }}</text>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+
+					<!-- 发送内容 -->
+					<view class="test-section">
+						<view class="test-section__label">
+							发送内容
+							<text class="test-section__required">*</text>
+						</view>
+						<textarea class="test-textarea" v-model="testContent"
+							:placeholder="testContentPlaceholder"
+							placeholder-class="test-textarea__placeholder" :maxlength="500" />
+						<view class="test-textarea__count">{{ testContent.length }}/500</view>
+					</view>
+
+					<!-- 发送结果 -->
+					<view v-if="testResult" class="test-result">
+						<view class="test-result__summary">
+							发送结果：成功
+							<text class="test-result__num test-result__num--ok">{{ testResult.sentCount }}</text>
+							人
+							<template v-if="testResult.failedUsers.length">
+								，{{ testFailureLabel }}
+								<text class="test-result__num test-result__num--warn">{{ testResult.failedUsers.length }}</text>
+								人
+							</template>
+							<template v-if="testResult.invalidIds.length">
+								，无效ID
+								<text class="test-result__num test-result__num--warn">{{ testResult.invalidIds.length }}</text>
+								个
+							</template>
+						</view>
+						<view v-if="testResult.failedUsers.length" class="test-result__detail">
+							<text class="test-result__detail-title">{{ testFailureDetailTitle }}</text>
+							<text class="test-result__detail-item" v-for="f in testResult.failedUsers" :key="f.id">
+								{{ f.name || (isEmailChannel ? f.email : f.phone) || f.id }}
+							</text>
+						</view>
+						<view v-if="testResult.invalidIds.length" class="test-result__detail">
+							<text class="test-result__detail-title">以下 ID 无效（用户不存在或已停用）：</text>
+							<text class="test-result__detail-item" v-for="(id, i) in testResult.invalidIds" :key="i">
+								{{ id }}
+							</text>
+						</view>
+					</view>
+				</scroll-view>
+
+				<!-- 底部操作 -->
+				<view class="test-panel__footer">
+					<view class="test-panel__btn test-panel__btn--ghost" @click="clearReceiverSelection">清空选择</view>
+					<view class="test-panel__btn test-panel__btn--primary"
+						:class="{ 'test-panel__btn--disabled': testSending }" @click="submitTest">
+						{{ testSending ? '发送中...' : '发送' }}
+					</view>
+				</view>
+			</view>
+		</uv-popup>
+	</view>
+</template>
+
+<script>
+import PageHeader from '@/components/PageHeader.vue'
+import { useUserStore } from '@/stores/user'
+import { messageApi } from '@/services/modules/message'
+import { formatDate } from '@/utils/index'
+
+/**
+ * 消息类型元信息（与后端 SysMessage.msgType 对齐）
+ */
+const TYPE_MAP = {
+	TODO: { label: '待办', icon: 'email', color: '#2979ff', bg: 'rgba(41,121,255,0.10)' },
+	PROGRESS: { label: '进度', icon: 'checkmark-circle', color: '#1f7a45', bg: 'rgba(31,122,69,0.10)' },
+	WARNING: { label: '预警', icon: 'warning', color: '#f3a73f', bg: 'rgba(243,167,63,0.12)' }
+}
+
+/**
+ * 消息跳转映射：admin 端路由 → uniapp 页面
+ * 项目已裁剪为「系统模块演示」形态，供应链业务页已删除，跳转映射置空。
+ * jump.query.id / skuId 存在时进入详情页，否则进入列表页
+ */
+const JUMP_MAP = {}
+
+export default {
+	components: { PageHeader },
+	data() {
+		return {
+			formatDate,
+			headerHeight: 0,
+			tabsHeight: 0,
+			list: [],
+			total: 0,
+			page: 1,
+			pageSize: 10,
+			filterType: '',
+			isFirstLoad: true,
+			isLoadingMore: false,
+			/** 分类 tab：全部 / 待办 / 进度 / 预警 */
+			tabs: [
+				{ name: '全部', value: '' },
+				{ name: '待办', value: 'TODO' },
+				{ name: '进度', value: 'PROGRESS' },
+				{ name: '预警', value: 'WARNING' }
+			],
+			/** 测试推送（独立链路：external 外部渠道 / app APP推送） */
+			testMode: 'external',
+			testLoading: false,
+			testKeyword: '',
+			testUsers: [],
+			testSelected: [],
+			testContent: '',
+			testSending: false,
+			testResult: null,
+			/** 当前渠道信息：external = { type: 'sms'|'email'|'wecom'|'none', dependency: 'phone'|'email'|'wechat_userid', ... }；app = { type:'app', dependency:'push_cid', ... } */
+			testChannel: null
+		}
+	},
+	computed: {
+		/** 仅管理员可见测试推送入口 */
+		isAdmin() {
+			return useUserStore().hasRole('admin')
+		},
+		activeTabIndex() {
+			const idx = this.tabs.findIndex(t => t.value === this.filterType)
+			return idx === -1 ? 0 : idx
+		},
+		loadMoreStatus() {
+			if (this.isFirstLoad) return 'loadmore'
+			if (this.isLoadingMore) return 'loading'
+			if (this.list.length >= this.total) return 'nomore'
+			return 'loadmore'
+		},
+		emptyText() {
+			const label = this.tabs[this.activeTabIndex].name
+			return label === '全部' ? '暂无消息' : `暂无${label}消息`
+		},
+		/** 是否 APP 推送测试模式 */
+		isAppTestMode() {
+			return this.testMode === 'app'
+		},
+		/** 当前渠道名称（弹窗标题/文案） */
+		testChannelName() {
+			if (this.isAppTestMode) return 'APP推送'
+			const t = (this.testChannel && this.testChannel.type) || 'none'
+			return t === 'sms' ? '短信' : t === 'email' ? '邮件' : t === 'wecom' ? '企业微信' : '外部通知'
+		},
+		/** 弹窗标题 */
+		testChannelTitle() {
+			return `${this.testChannelName}测试推送`
+		},
+		/** 当前渠道依赖字段：'phone' | 'email' | 'wechat_userid' | 'push_cid' */
+		channelDependency() {
+			return (this.testChannel && this.testChannel.dependency) || ''
+		},
+		/** 是否短信渠道 */
+		isPhoneChannel() {
+			return !this.isAppTestMode && this.channelDependency === 'phone'
+		},
+		/** 是否邮件渠道 */
+		isEmailChannel() {
+			return !this.isAppTestMode && this.channelDependency === 'email'
+		},
+		/** 用户可送达标签（企微=已绑定，短信=有手机号，邮件=有邮箱，APP=已上报设备） */
+		deliverableLabel() {
+			if (this.isAppTestMode) return '已绑定设备'
+			if (this.isPhoneChannel) return '有手机号'
+			if (this.isEmailChannel) return '有邮箱'
+			return '已绑定企微'
+		},
+		/** 用户不可送达标签 */
+		undeliverableLabel() {
+			if (this.isAppTestMode) return '未上报'
+			if (this.isPhoneChannel) return '无手机号'
+			if (this.isEmailChannel) return '无邮箱'
+			return '未绑定'
+		},
+		/** 发送内容占位 */
+		testContentPlaceholder() {
+			if (this.isAppTestMode) return '请输入要发送的测试内容，例如：这是一条来自供应链协同平台的 APP 推送通知。'
+			if (this.isPhoneChannel) return '请输入要发送的测试内容，例如：这是一条来自供应链协同平台的短信通知。'
+			if (this.isEmailChannel) return '请输入要发送的测试内容，例如：这是一条来自供应链协同平台的邮件通知。'
+			return '请输入要发送的测试内容，例如：这是一条来自供应链协同平台的企业微信测试消息。'
+		},
+		/** 发送失败人数文案 */
+		testFailureLabel() {
+			if (this.isAppTestMode) return '未上报设备'
+			if (this.isPhoneChannel) return '无手机号'
+			if (this.isEmailChannel) return '无邮箱'
+			return '未绑定'
+		},
+		/** 发送失败详情标题 */
+		testFailureDetailTitle() {
+			if (this.isAppTestMode) return '以下接收人未登录过 APP（无设备标识），无法推送：'
+			if (this.isPhoneChannel) return '以下接收人未填写手机号，无法短信通知：'
+			if (this.isEmailChannel) return '以下接收人未填写邮箱，无法邮件通知：'
+			return '以下接收人未绑定企业微信账号（请在企业微信通讯录补绑手机号后重试）：'
+		}
+	},
+	onLoad() {
+		const sys = uni.getSystemInfoSync()
+		this.headerHeight = (sys.statusBarHeight || 20) + uni.upx2px(116)
+		this.tabsHeight = uni.upx2px(112)
+		this.fetchList(true)
+	},
+	onPullDownRefresh() {
+		this.fetchList(true)
+	},
+	onReachBottom() {
+		this.handleLoadMore()
+	},
+	methods: {
+		/** 类型元信息（未知类型兜底为进度） */
+		typeInfo(type) {
+			return TYPE_MAP[type] || TYPE_MAP.PROGRESS
+		},
+
+		async fetchList(isRefresh = false) {
+			if (isRefresh) {
+				this.page = 1
+				this.isFirstLoad = true
+			}
+			try {
+				const res = await messageApi.getPage({
+					page: this.page,
+					pageSize: this.pageSize,
+					msgType: this.filterType || undefined
+				})
+				const { list = [], pagination = {} } = res.data || {}
+				this.list = isRefresh ? list : [...this.list, ...list]
+				this.total = pagination.total || 0
+			} catch (e) {
+				// 错误提示已由请求层统一处理
+			} finally {
+				this.isFirstLoad = false
+				this.isLoadingMore = false
+				uni.stopPullDownRefresh()
+			}
+		},
+
+		handleLoadMore() {
+			if (this.isLoadingMore || this.list.length >= this.total) return
+			this.isLoadingMore = true
+			this.page++
+			this.fetchList(false)
+		},
+
+		onTabChange(e) {
+			const value = this.tabs[e.index].value
+			if (this.filterType === value) return
+			this.filterType = value
+			this.fetchList(true)
+		},
+
+		onHeaderHeightChange(height) {
+			this.headerHeight = height
+		},
+
+		/** 点击消息：未读先标记已读，再按 jump 映射跳转 */
+		handleItemClick(item) {
+			if (!item.isRead) {
+				item.isRead = true
+				messageApi.markRead(item.id).catch(() => {})
+			}
+			this.navigateByJump(item.jump)
+		},
+
+		/** 根据 jump 配置跳转（admin 路由 → uniapp 页面），无映射时仅提示 */
+		navigateByJump(jump) {
+			if (!jump || !jump.path) return
+			const map = JUMP_MAP[jump.path]
+			if (!map) {
+				uni.showToast({ title: '该消息关联的页面请到后台管理系统查看', icon: 'none' })
+				return
+			}
+			const query = jump.query || {}
+			const targetId = query.id || query.skuId || query.waybillId || ''
+			const url = targetId
+				? `${map.detail}?id=${targetId}`
+				: map.list
+			uni.navigateTo({ url })
+		},
+
+		/** 全部标记已读 */
+		handleMarkAllRead() {
+			const unread = this.list.filter(m => !m.isRead)
+			if (this.total === 0 || (this.list.length >= this.total && unread.length === 0)) {
+				uni.showToast({ title: '暂无未读消息', icon: 'none' })
+				return
+			}
+			uni.showModal({
+				title: '提示',
+				content: '确定将所有消息标记为已读吗？',
+				success: async (res) => {
+					if (!res.confirm) return
+					try {
+						await messageApi.markAllRead()
+						this.list.forEach(m => { m.isRead = true })
+						uni.showToast({ title: '已全部标记已读', icon: 'none' })
+					} catch (e) {
+						// 错误提示已由请求层统一处理
+					}
+				}
+			})
+		},
+
+		/* ==================== 测试推送（外部渠道 / APP 推送两条独立链路） ==================== */
+
+		/** 测试推送入口：弹出渠道选择（外部渠道按 EXTERNAL_NOTIFY_CHANNEL，APP 推送按 APP_PUSH_ENABLED 独立链路） */
+		openTestMenu() {
+			uni.showActionSheet({
+				itemList: ['外部渠道测试（短信/邮件/企微）', 'APP 推送测试'],
+				success: (res) => {
+					this.openTestPopup(res.tapIndex === 1 ? 'app' : 'external')
+				}
+			})
+		},
+
+		/** 打开测试弹层：指定模式（external/app），每次重置表单并加载接收人 */
+		openTestPopup(mode) {
+			this.testMode = mode || 'external'
+			this.testKeyword = ''
+			this.testUsers = []
+			this.testSelected = []
+			this.testContent = ''
+			this.testResult = null
+			this.testChannel = null
+			this.$refs.testPopup?.open()
+			this.loadReceivers()
+		},
+
+		/** 弹层内切换模式：清空已选并重新加载接收人 */
+		switchTestMode() {
+			this.testMode = this.testMode === 'app' ? 'external' : 'app'
+			this.testKeyword = ''
+			this.testUsers = []
+			this.testSelected = []
+			this.testContent = ''
+			this.testResult = null
+			this.testChannel = null
+			this.loadReceivers()
+		},
+
+		/** 关闭测试弹层（右上角关闭按钮） */
+		closeTestPopup() {
+			this.$refs.testPopup?.close()
+		},
+
+		/** @close 回调：组件已关闭，清理状态 */
+		onTestPopupClose() {
+			this.testKeyword = ''
+			this.testUsers = []
+			this.testSelected = []
+			this.testContent = ''
+			this.testResult = null
+			this.testChannel = null
+			this.testSending = false
+		},
+
+		/** 加载接收人列表（按关键词过滤；同时返回当前渠道信息；按测试模式走不同接口） */
+		async loadReceivers() {
+			if (this.testLoading) return
+			this.testLoading = true
+			try {
+				const res = this.testMode === 'app'
+					? await messageApi.getAppReceivers(this.testKeyword.trim())
+					: await messageApi.getReceivers(this.testKeyword.trim())
+				const data = res.data || {}
+				this.testChannel = data.channel || null
+				this.testUsers = data.users || []
+				// 渠道未启用或凭证未配置时给管理员明确提示
+				if (this.testChannel && !this.testChannel.configured) {
+					uni.showToast({ title: this.testChannel.reason || '测试渠道未配置', icon: 'none' })
+				}
+			} catch (e) {
+				this.testUsers = []
+				this.testChannel = null
+			} finally {
+				this.testLoading = false
+			}
+		},
+
+		/** 勾选/取消接收人 */
+		toggleReceiver(user) {
+			const idx = this.testSelected.indexOf(user.id)
+			if (idx === -1) this.testSelected.push(user.id)
+			else this.testSelected.splice(idx, 1)
+		},
+
+		/** 是否已选中 */
+		isReceiverSelected(id) {
+			return this.testSelected.indexOf(id) !== -1
+		},
+
+		/** 清空已选接收人 */
+		clearReceiverSelection() {
+			this.testSelected = []
+		},
+
+		/** 发送测试消息（按测试模式走外部渠道 / APP 推送接口） */
+		async submitTest() {
+			if (this.testSelected.length === 0) {
+				uni.showToast({ title: '请选择至少一位接收人', icon: 'none' })
+				return
+			}
+			if (!this.testContent.trim()) {
+				uni.showToast({ title: '请输入发送内容', icon: 'none' })
+				return
+			}
+			this.testSending = true
+			try {
+				const body = {
+					receiverUserIds: this.testSelected,
+					content: this.testContent.trim()
+				}
+				const res = this.testMode === 'app'
+					? await messageApi.appTestSend(body)
+					: await messageApi.testSend(body)
+				this.testResult = res.data || { total: 0, sentCount: 0, invalidIds: [], sentUsers: [], failedUsers: [] }
+				uni.showToast({ title: '已发送，详见下方结果', icon: 'none' })
+			} catch (e) {
+				this.testResult = null
+			} finally {
+				this.testSending = false
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+	min-height: 100vh;
+	background-color: #f5f6f8;
+	padding-bottom: 20rpx;
+}
+
+.header-action {
+	height: 60rpx;
+	padding: 0 20rpx;
+	display: flex;
+	align-items: center;
+	border-radius: 30rpx;
+	background: rgba(255, 255, 255, 0.18);
+
+	&:active {
+		background: rgba(255, 255, 255, 0.28);
+	}
+
+	&__text {
+		font-size: 26rpx;
+		color: #ffffff;
+	}
+}
+
+.tabs-wrap {
+	background: #ffffff;
+	padding: 12rpx 0;
+	height: 112rpx;
+	display: flex;
+	align-items: center;
+
+	&--fixed {
+		position: fixed;
+		left: 0;
+		right: 0;
+		z-index: 99;
+	}
+}
+
+.header-holder {
+	width: 100%;
+}
+
+.skeleton-container {
+	padding: 16rpx 24rpx 0;
+}
+
+.skeleton-item {
+	margin-bottom: 20rpx;
+	border-radius: 16rpx;
+	overflow: hidden;
+	background: #fff;
+	padding: 24rpx;
+}
+
+.empty-container {
+	padding-top: 100rpx;
+}
+
+.list-container {
+	padding-top: 16rpx;
+}
+
+.msg-card {
+	background: #ffffff;
+	border-radius: 20rpx;
+	margin: 0 24rpx 20rpx;
+	padding: 24rpx;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+	display: flex;
+	align-items: flex-start;
+	transition: all 0.15s ease;
+
+	&:active {
+		transform: scale(0.985);
+	}
+
+	&__icon-wrap {
+		width: 72rpx;
+		height: 72rpx;
+		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		margin-right: 20rpx;
+	}
+
+	&__body {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__title-row {
+		display: flex;
+		align-items: center;
+		margin-bottom: 8rpx;
+	}
+
+	&__dot {
+		width: 14rpx;
+		height: 14rpx;
+		border-radius: 50%;
+		background: #dd524d;
+		flex-shrink: 0;
+		margin-right: 10rpx;
+	}
+
+	&__title {
+		flex: 1;
+		min-width: 0;
+		font-size: 28rpx;
+		color: #999999;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		&--unread {
+			color: #1a1a1a;
+			font-weight: 600;
+		}
+	}
+
+	&__type {
+		flex-shrink: 0;
+		margin-left: 12rpx;
+		font-size: 20rpx;
+		padding: 2rpx 14rpx;
+		border-radius: 16rpx;
+	}
+
+	&__content {
+		display: block;
+		font-size: 24rpx;
+		color: #666666;
+		line-height: 1.5;
+		margin-bottom: 14rpx;
+		word-break: break-all;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	&__time {
+		font-size: 22rpx;
+		color: #bbbbbb;
+	}
+
+	&__read {
+		font-size: 20rpx;
+		color: #c0c4cc;
+	}
+}
+
+/* ==================== 外部通知测试推送 ==================== */
+.test-panel {
+	background: #ffffff;
+	border-radius: 24rpx 24rpx 0 0;
+	display: flex;
+	flex-direction: column;
+	max-height: 80vh;
+
+	&__header {
+		height: 96rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		border-bottom: 1rpx solid #f0f1f4;
+		flex-shrink: 0;
+	}
+
+	&__title {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #1a1a1a;
+	}
+
+	&__mode {
+		position: absolute;
+		left: 28rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+		padding: 8rpx 18rpx;
+		border-radius: 24rpx;
+		background: #f0f9f4;
+
+		&__text {
+			font-size: 24rpx;
+			color: #1f7a45;
+		}
+	}
+
+	&__close {
+		position: absolute;
+		right: 28rpx;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 56rpx;
+		height: 56rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__body {
+		flex: 1;
+		min-height: 0;
+		height: 0;
+		overflow: hidden;
+		padding: 24rpx 28rpx;
+		box-sizing: border-box;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 28rpx;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		border-top: 1rpx solid #f0f1f4;
+		flex-shrink: 0;
+	}
+
+	&__btn {
+		flex: 1;
+		height: 84rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 42rpx;
+		font-size: 30rpx;
+		font-weight: 600;
+
+		&--ghost {
+			margin-right: 20rpx;
+			background: #f2f3f5;
+			color: #666666;
+		}
+
+		&--primary {
+			background: #1f7a45;
+			color: #ffffff;
+		}
+
+		&--disabled {
+			opacity: 0.6;
+		}
+	}
+}
+
+.test-section {
+	margin-bottom: 32rpx;
+
+	&__label {
+		display: flex;
+		align-items: center;
+		font-size: 28rpx;
+		font-weight: 600;
+		color: #1a1a1a;
+		margin-bottom: 16rpx;
+	}
+
+	&__required {
+		color: #dd524d;
+		margin-left: 4rpx;
+	}
+
+	&__count {
+		margin-left: auto;
+		font-size: 24rpx;
+		font-weight: 400;
+		color: #999999;
+	}
+}
+
+.test-search {
+	display: flex;
+	align-items: center;
+	margin-bottom: 16rpx;
+
+	&__input {
+		flex: 1;
+		height: 72rpx;
+		background: #f5f6f8;
+		border-radius: 12rpx;
+		padding: 0 20rpx;
+		font-size: 26rpx;
+		color: #1a1a1a;
+	}
+
+	&__placeholder {
+		color: #bbbbbb;
+	}
+
+	&__btn {
+		height: 72rpx;
+		padding: 0 28rpx;
+		margin-left: 16rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #eaf6ef;
+		border-radius: 12rpx;
+		font-size: 26rpx;
+		color: #1f7a45;
+	}
+}
+
+.test-tip {
+	padding: 40rpx 0;
+	text-align: center;
+	font-size: 26rpx;
+	color: #999999;
+}
+
+.test-user-list {
+	border: 1rpx solid #f0f1f4;
+	border-radius: 16rpx;
+	overflow: hidden;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+	max-height: 480rpx;
+	background: #ffffff;
+}
+
+.test-user {
+	display: flex;
+	align-items: center;
+	height: 120rpx;
+	box-sizing: border-box;
+	padding: 0 20rpx;
+	background: #ffffff;
+
+	&:not(:last-child) {
+		border-bottom: 1rpx solid #f5f6f8;
+	}
+
+	&--active {
+		background: #f7fcf9;
+	}
+
+	&__check {
+		width: 44rpx;
+		flex-shrink: 0;
+	}
+
+	&__box {
+		width: 36rpx;
+		height: 36rpx;
+		border-radius: 50%;
+		border: 2rpx solid #d0d3d8;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+
+		&--on {
+			background: #1f7a45;
+			border-color: #1f7a45;
+		}
+	}
+
+	&__info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__name-row {
+		display: flex;
+		align-items: center;
+		margin-bottom: 6rpx;
+	}
+
+	&__name {
+		font-size: 28rpx;
+		color: #1a1a1a;
+		font-weight: 500;
+		max-width: 320rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__tag {
+		margin-left: 12rpx;
+		font-size: 20rpx;
+		padding: 2rpx 12rpx;
+		border-radius: 12rpx;
+		flex-shrink: 0;
+
+		&--bound {
+			color: #1f7a45;
+			background: #eaf6ef;
+		}
+
+		&--unbound {
+			color: #f3a73f;
+			background: #fff7e8;
+		}
+	}
+
+	&__meta {
+		display: flex;
+		align-items: center;
+	}
+
+	&__phone {
+		font-size: 24rpx;
+		color: #999999;
+	}
+
+	&__roles {
+		margin-left: 16rpx;
+		font-size: 22rpx;
+		color: #7a8ba0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.test-textarea {
+	width: 100%;
+	height: 200rpx;
+	background: #f5f6f8;
+	border-radius: 16rpx;
+	padding: 20rpx;
+	box-sizing: border-box;
+	font-size: 26rpx;
+	color: #1a1a1a;
+	line-height: 1.6;
+
+	&__placeholder {
+		color: #bbbbbb;
+	}
+
+	&__count {
+		text-align: right;
+		font-size: 22rpx;
+		color: #bbbbbb;
+		margin-top: 8rpx;
+	}
+}
+
+.test-result {
+	margin-top: 8rpx;
+	background: #f7fcf9;
+	border: 1rpx solid #d9efe4;
+	border-radius: 16rpx;
+	padding: 20rpx;
+
+	&__summary {
+		font-size: 26rpx;
+		color: #1a1a1a;
+		line-height: 1.6;
+	}
+
+	&__num {
+		font-weight: 600;
+
+		&--ok {
+			color: #1f7a45;
+		}
+
+		&--warn {
+			color: #f3a73f;
+		}
+	}
+
+	&__detail {
+		margin-top: 12rpx;
+		padding-top: 12rpx;
+		border-top: 1rpx dashed #d9efe4;
+	}
+
+	&__detail-title {
+		display: block;
+		font-size: 22rpx;
+		color: #666666;
+		line-height: 1.6;
+	}
+
+	&__detail-item {
+		display: inline-block;
+		margin: 6rpx 12rpx 0 0;
+		font-size: 22rpx;
+		color: #f3a73f;
+	}
+}
+</style>