feat(站内通知): 铃铛面板支持时间/内容搜索、按天分组与分页

- 列表接口加 keyword（标题/内容模糊）与 startDate/endDate（年月日闭区间）参数，
  两端控制器透传，服务端补筛选日志
- 两端铃铛面板：搜索框（防抖 300ms）+ 日期区间 + 按年月日分组 + 翻页，
  面板改 Teleport 到 body（挂在顶栏时会被页面 el-select 压住，提 z-index 无效）
- 固化可见范围回归测试：超管全量/管理员只看本组/普通用户只看自己，
  含读写两侧的 user_id+audience 裁剪断言与两端控制器身份来源断言

frontend-vue/src/shared/api/types/modules/notification.ts

@@ -38,14 +38,45 @@ export function fetchNotificationSummary() {
   )
 }
 
-export function fetchNotificationList(params: { page?: number; pageSize?: number; onlyUnread?: boolean } = {}) {
+/** 列表查询参数：关键字匹配标题/内容；startDate/endDate 为年月日闭区间（yyyy-MM-dd）。 */
+export interface NotificationListParams {
+  page?: number
+  pageSize?: number
+  onlyUnread?: boolean
+  keyword?: string
+  startDate?: string
+  endDate?: string
+}
+
+/**
+ * 列表查询参数：关键字匹配标题/内容；startDate/endDate 为年月日闭区间（yyyy-MM-dd）。
+ * 空关键字/日期一律不下发（空串会让后端日期绑定失败返回 400）。
+ */
+export function buildNotificationListQuery(
+  params: NotificationListParams = {},
+): Record<string, string | number> {
+  const query: Record<string, string | number> = {
+    page: params.page ?? 1,
+    pageSize: params.pageSize ?? 20,
+    onlyUnread: params.onlyUnread ? 'true' : 'false',
+  }
+  const keyword = (params.keyword ?? '').trim()
+  if (keyword) {
+    query.keyword = keyword
+  }
+  if (params.startDate) {
+    query.startDate = params.startDate
+  }
+  if (params.endDate) {
+    query.endDate = params.endDate
+  }
+  return query
+}
+
+export function fetchNotificationList(params: NotificationListParams = {}) {
   return unwrapJavaResponse(
     get<JavaApiResponse<NotificationPage>>(
-      buildJavaUrl(API_ENDPOINTS.notification.list, {
-        page: params.page ?? 1,
-        pageSize: params.pageSize ?? 20,
-        onlyUnread: params.onlyUnread ? 'true' : 'false',
-      }),
+      buildJavaUrl(API_ENDPOINTS.notification.list, buildNotificationListQuery(params)),
     ),
   )
 }

frontend-vue/src/shared/components/NotificationBell.vue

@@ -24,7 +24,17 @@
       <span v-if="badgeText" class="bell-badge">{{ badgeText }}</span>
     </button>
 
-    <div v-if="panelOpen" class="bell-panel" role="dialog" aria-label="通知列表">
+    <!-- 面板挂到 body 上（fixed 定位）：顶栏内绝对定位时会被页面内容压住（如 el-select），提 z-index 无效 -->
+    <Teleport to="body">
+      <div
+        v-if="panelOpen"
+        ref="panelRef"
+        class="bell-panel"
+        :class="`bell-panel--${theme}`"
+        :style="panelStyle"
+        role="dialog"
+        aria-label="通知列表"
+      >
       <div class="bell-panel-head">
         <span class="bell-panel-title">通知</span>
         <button
@@ -38,32 +48,83 @@
         </button>
       </div>
 
+      <div class="bell-search">
+        <input
+          v-model="keyword"
+          type="text"
+          class="bell-search-input"
+          placeholder="搜索标题或内容"
+          aria-label="搜索通知"
+          @input="onKeywordInput"
+        />
+        <div class="bell-search-days">
+          <input
+            v-model="startDate"
+            type="date"
+            class="bell-date-input"
+            aria-label="起始日期"
+            @change="reload"
+          />
+          <span class="bell-date-sep">至</span>
+          <input
+            v-model="endDate"
+            type="date"
+            class="bell-date-input"
+            aria-label="结束日期"
+            @change="reload"
+          />
+          <button v-if="hasFilter" type="button" class="bell-search-reset" @click="resetFilters">
+            重置
+          </button>
+        </div>
+      </div>
+
       <div v-if="loading && !items.length" class="bell-empty">正在加载...</div>
       <div v-else-if="loadError && !items.length" class="bell-empty bell-empty--error">{{ loadError }}</div>
-      <div v-else-if="!items.length" class="bell-empty">暂无通知</div>
+      <div v-else-if="!items.length" class="bell-empty">
+        {{ hasFilter ? '没有符合条件的通知' : '暂无通知' }}
+      </div>
       <ul v-else class="bell-list">
-        <li
-          v-for="item in items"
-          :key="item.id"
-          class="bell-item"
-          :class="[`bell-item--${item.level || 'warning'}`, { 'bell-item--unread': !item.read }]"
-          @click="onItemClick(item)"
-        >
-          <div class="bell-item-head">
-            <span class="bell-item-title">{{ item.title }}</span>
-            <span class="bell-item-time">{{ formatTime(item.createdAt) }}</span>
-          </div>
-          <div class="bell-item-content">{{ item.content }}</div>
-        </li>
+        <template v-for="group in groupedItems" :key="group.day || 'unknown'">
+          <li class="bell-day-head">{{ group.label }}</li>
+          <li
+            v-for="item in group.items"
+            :key="item.id"
+            class="bell-item"
+            :class="[`bell-item--${item.level || 'warning'}`, { 'bell-item--unread': !item.read }]"
+            @click="onItemClick(item)"
+          >
+            <div class="bell-item-head">
+              <span class="bell-item-title">{{ item.title }}</span>
+              <span class="bell-item-time">{{ formatTime(item.createdAt) }}</span>
+            </div>
+            <div class="bell-item-content">{{ item.content }}</div>
+          </li>
+        </template>
       </ul>
 
       <div class="bell-panel-foot">
-        <button v-if="hasMore" type="button" class="bell-more" :disabled="loading" @click="loadMore">
-          {{ loading ? '加载中...' : '加载更多' }}
+        <button
+          type="button"
+          class="bell-page-btn"
+          :disabled="page <= 1 || loading"
+          @click="goPage(page - 1)"
+        >
+          上一页
         </button>
-        <span v-else-if="items.length" class="bell-foot-note">已显示全部</span>
+        <span class="bell-page-info">{{ page }} / {{ totalPages }}</span>
+        <button
+          type="button"
+          class="bell-page-btn"
+          :disabled="page >= totalPages || loading"
+          @click="goPage(page + 1)"
+        >
+          下一页
+        </button>
+        <span class="bell-page-total">共 {{ total }} 条</span>
       </div>
-    </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -83,12 +144,13 @@ import {
   currentNotificationUid,
   formatNotificationTime,
   formatUnreadBadge,
+  groupNotificationsByDay,
   hasNewNotification,
   readLastNotifiedId,
   writeLastNotifiedId,
 } from '@/shared/utils/notification-bell.ts'
 
-const PAGE_SIZE = 20
+const PAGE_SIZE = 10
 
 /** 顶栏主题：工具页/配置页深色（dark），桌面入口首页浅色（light）。 */
 const props = withDefaults(defineProps<{ theme?: 'dark' | 'light' }>(), {
@@ -97,6 +159,8 @@ const props = withDefaults(defineProps<{ theme?: 'dark' | 'light' }>(), {
 const theme = computed(() => props.theme)
 
 const rootRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const panelStyle = ref<Record<string, string>>({})
 const uid = currentNotificationUid()
 
 const unreadCount = ref(0)
@@ -107,11 +171,29 @@ const panelOpen = ref(false)
 const loading = ref(false)
 const markingAll = ref(false)
 const loadError = ref('')
+const keyword = ref('')
+const startDate = ref('')
+const endDate = ref('')
 
 const badgeText = computed(() => formatUnreadBadge(unreadCount.value))
-const hasMore = computed(() => items.value.length < total.value)
+const groupedItems = computed(() => groupNotificationsByDay(items.value))
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)))
+const hasFilter = computed(() => Boolean(keyword.value.trim() || startDate.value || endDate.value))
 
 let pollTimer: number | null = null
+let searchTimer: number | null = null
+
+/** 起止日期倒挂时自动交换，避免用户只看到「没有符合条件的通知」不知原因。 */
+function normalizedDayRange(): { startDate?: string; endDate?: string } {
+  let start = startDate.value
+  let end = endDate.value
+  if (start && end && start > end) {
+    const swapped = start
+    start = end
+    end = swapped
+  }
+  return { startDate: start || undefined, endDate: end || undefined }
+}
 
 /** 拉未读数：发现新通知提醒一次（localStorage 记录已提醒过的最大 id，避免重复弹）。 */
 async function refreshSummary() {
@@ -134,15 +216,21 @@ async function loadPage(targetPage: number) {
   if (loading.value) return
   loading.value = true
   try {
-    const result = await fetchNotificationList({ page: targetPage, pageSize: PAGE_SIZE })
+    const result = await fetchNotificationList({
+      page: targetPage,
+      pageSize: PAGE_SIZE,
+      keyword: keyword.value,
+      ...normalizedDayRange(),
+    })
     const list = Array.isArray(result?.items) ? result.items : []
-    items.value = targetPage <= 1 ? list : [...items.value, ...list]
-    total.value = Number(result?.total ?? items.value.length)
+    items.value = list
+    total.value = Number(result?.total ?? list.length)
     unreadCount.value = Number(result?.unreadCount ?? unreadCount.value)
     page.value = targetPage
     loadError.value = ''
-    if (targetPage <= 1) {
-      const latest = items.value.length ? Number(items.value[0].id) : 0
+    // 无筛选时首页就是最新数据，顺带记录「已提醒过的最大 id」；有筛选时最新 id 不代表真实最新
+    if (targetPage <= 1 && !hasFilter.value && list.length) {
+      const latest = Number(list[0].id)
       if (latest > 0) {
         writeLastNotifiedId(uid, Math.max(readLastNotifiedId(uid), latest))
       }
@@ -156,14 +244,50 @@ async function loadPage(targetPage: number) {
   }
 }
 
-function loadMore() {
-  if (!hasMore.value) return
-  void loadPage(page.value + 1)
+function goPage(targetPage: number) {
+  const safe = Math.min(Math.max(1, targetPage), totalPages.value)
+  if (safe === page.value || loading.value) return
+  void loadPage(safe)
+}
+
+/** 搜索/日期变化后回到第一页重新查询。 */
+function reload() {
+  void loadPage(1)
+}
+
+/** 关键字输入防抖 300ms，避免每敲一个字都打一次接口。 */
+function onKeywordInput() {
+  if (searchTimer != null) {
+    window.clearTimeout(searchTimer)
+  }
+  searchTimer = window.setTimeout(() => {
+    searchTimer = null
+    void loadPage(1)
+  }, 300)
+}
+
+function resetFilters() {
+  keyword.value = ''
+  startDate.value = ''
+  endDate.value = ''
+  void loadPage(1)
+}
+
+/** 面板挂到 body 后用 fixed 定位，位置按触发器实时算（右对齐在铃铛下方）。 */
+function syncPanelPosition() {
+  const trigger = rootRef.value
+  if (!trigger) return
+  const rect = trigger.getBoundingClientRect()
+  panelStyle.value = {
+    top: `${Math.round(rect.bottom + 10)}px`,
+    right: `${Math.max(8, Math.round(window.innerWidth - rect.right))}px`,
+  }
 }
 
 function togglePanel() {
   panelOpen.value = !panelOpen.value
   if (panelOpen.value) {
+    syncPanelPosition()
     void loadPage(1)
   }
 }
@@ -200,12 +324,19 @@ function formatTime(value: string | null) {
   return formatNotificationTime(value)
 }
 
-/** 点击组件外部关闭面板。 */
+/** 点击组件外部关闭面板（面板已 Teleport 到 body，需连同面板自身一起判断）。 */
 function onDocumentMouseDown(event: MouseEvent) {
   if (!panelOpen.value) return
-  const root = rootRef.value
-  if (root && event.target instanceof Node && !root.contains(event.target)) {
-    panelOpen.value = false
+  const target = event.target
+  if (!(target instanceof Node)) return
+  if (rootRef.value?.contains(target) || panelRef.value?.contains(target)) return
+  panelOpen.value = false
+}
+
+/** 窗口尺寸变化时重新对齐面板。 */
+function onWindowResize() {
+  if (panelOpen.value) {
+    syncPanelPosition()
   }
 }
 
@@ -219,6 +350,7 @@ function onVisibilityChange() {
 onMounted(() => {
   document.addEventListener('mousedown', onDocumentMouseDown)
   document.addEventListener('visibilitychange', onVisibilityChange)
+  window.addEventListener('resize', onWindowResize)
   void refreshSummary()
   pollTimer = window.setInterval(() => {
     if (typeof document !== 'undefined' && document.visibilityState !== 'visible') {
@@ -231,10 +363,15 @@ onMounted(() => {
 onUnmounted(() => {
   document.removeEventListener('mousedown', onDocumentMouseDown)
   document.removeEventListener('visibilitychange', onVisibilityChange)
+  window.removeEventListener('resize', onWindowResize)
   if (pollTimer != null) {
     window.clearInterval(pollTimer)
     pollTimer = null
   }
+  if (searchTimer != null) {
+    window.clearTimeout(searchTimer)
+    searchTimer = null
+  }
 })
 </script>
 
@@ -291,13 +428,11 @@ onUnmounted(() => {
 }
 
 .bell-panel {
-  position: absolute;
-  top: calc(100% + 10px);
-  right: 0;
+  position: fixed;
   z-index: 3200;
   width: 360px;
   max-width: calc(100vw - 32px);
-  max-height: 440px;
+  max-height: 520px;
   display: flex;
   flex-direction: column;
   border: 1px solid #2c3540;
@@ -424,28 +559,113 @@ onUnmounted(() => {
 }
 
 .bell-panel-foot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 7px 12px;
   border-top: 1px solid #262d35;
-  text-align: center;
 }
 
-.bell-more {
+.bell-search {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #262d35;
+  background: #141920;
+}
+
+.bell-search-input,
+.bell-date-input {
+  height: 28px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border: 1px solid #2c3540;
+  border-radius: 6px;
+  background: #1b2027;
+  color: #dce6f0;
+  font-size: 12px;
+  outline: none;
+  color-scheme: dark;
+}
+
+.bell-search-input {
   width: 100%;
-  padding: 9px 0;
-  border: none;
-  background: transparent;
+}
+
+.bell-search-input:focus,
+.bell-date-input:focus {
+  border-color: #4a86c7;
+}
+
+.bell-search-days {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.bell-date-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.bell-date-sep {
+  color: #6f7a86;
+  font-size: 12px;
+}
+
+.bell-search-reset {
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid #2c3540;
+  border-radius: 6px;
+  background: #1b2027;
   color: #8dc4ff;
   font-size: 12px;
   cursor: pointer;
 }
 
-.bell-more:disabled {
-  opacity: 0.55;
+.bell-search-reset:hover {
+  background: #212832;
+}
+
+.bell-day-head {
+  padding: 6px 14px;
+  background: #1b232e;
+  color: #8b97a4;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.bell-page-btn {
+  padding: 3px 10px;
+  border: 1px solid #2c3540;
+  border-radius: 6px;
+  background: #1b2027;
+  color: #8dc4ff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.bell-page-btn:hover:not(:disabled) {
+  background: #212832;
+}
+
+.bell-page-btn:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
-.bell-foot-note {
-  display: block;
-  padding: 8px 0;
+.bell-page-info {
+  color: #dce6f0;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bell-page-total {
   color: #6f7a86;
   font-size: 11px;
 }
@@ -461,73 +681,97 @@ onUnmounted(() => {
   color: #333;
 }
 
-.notification-bell--light .bell-panel {
+.bell-panel--light {
   border-color: #e2e8f0;
   background: #ffffff;
   box-shadow: 0 18px 48px rgba(31, 45, 61, 0.18);
 }
 
-.notification-bell--light .bell-panel-head {
+.bell-panel--light .bell-panel-head {
   border-bottom-color: #edf1f5;
 }
 
-.notification-bell--light .bell-panel-title {
+.bell-panel--light .bell-panel-title {
   color: #333;
 }
 
-.notification-bell--light .bell-read-all {
+.bell-panel--light .bell-read-all {
   color: #4c5bd4;
 }
 
-.notification-bell--light .bell-empty {
+.bell-panel--light .bell-empty {
   color: #999;
 }
 
-.notification-bell--light .bell-item {
+.bell-panel--light .bell-item {
   border-bottom-color: #f0f3f7;
 }
 
-.notification-bell--light .bell-item:hover {
+.bell-panel--light .bell-item:hover {
   background: #f7f9fc;
 }
 
-.notification-bell--light .bell-item--unread {
+.bell-panel--light .bell-item--unread {
   background: #f2f6ff;
 }
 
-.notification-bell--light .bell-item-title {
+.bell-panel--light .bell-item-title {
   color: #333;
 }
 
-.notification-bell--light .bell-item--error .bell-item-title {
+.bell-panel--light .bell-item--error .bell-item-title {
   color: #c0392b;
 }
 
-.notification-bell--light .bell-item--warning .bell-item-title {
+.bell-panel--light .bell-item--warning .bell-item-title {
   color: #a8793e;
 }
 
-.notification-bell--light .bell-item--info .bell-item-title {
+.bell-panel--light .bell-item--info .bell-item-title {
   color: #4c5bd4;
 }
 
-.notification-bell--light .bell-item-time {
+.bell-panel--light .bell-item-time {
   color: #9aa6b3;
 }
 
-.notification-bell--light .bell-item-content {
+.bell-panel--light .bell-item-content {
   color: #667085;
 }
 
-.notification-bell--light .bell-panel-foot {
+.bell-panel--light .bell-search {
+  background: #f8fafc;
+  border-bottom-color: #edf1f5;
+}
+
+.bell-panel--light .bell-search-input,
+.bell-panel--light .bell-date-input {
+  border-color: #e2e8f0;
+  background: #ffffff;
+  color: #333;
+  color-scheme: light;
+}
+
+.bell-panel--light .bell-day-head {
+  background: #f4f7fa;
+  color: #7c8b9a;
+}
+
+.bell-panel--light .bell-panel-foot {
   border-top-color: #edf1f5;
 }
 
-.notification-bell--light .bell-more {
+.bell-panel--light .bell-page-btn {
+  border-color: #e2e8f0;
+  background: #ffffff;
   color: #4c5bd4;
 }
 
-.notification-bell--light .bell-foot-note {
+.bell-panel--light .bell-page-info {
+  color: #333;
+}
+
+.bell-panel--light .bell-page-total {
   color: #9aa6b3;
 }
 </style>

frontend-vue/src/shared/utils/notification-bell.ts

@@ -64,6 +64,64 @@ export function currentNotificationUid(): string {
   }
 }
 
+/** 通知所属日期键（本地时区 yyyy-MM-dd）；时间缺失/非法返回空串。 */
+export function notificationDayKey(value: string | null | undefined): string {
+  if (!value) {
+    return ''
+  }
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return ''
+  }
+  const pad = (input: number) => String(input).padStart(2, '0')
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}
+
+/** 日期组头文案：今天 / 昨天 / 2026年9月11日；空键兜底「未知时间」。 */
+export function formatDayLabel(day: string, now: Date = new Date()): string {
+  if (!day) {
+    return '未知时间'
+  }
+  if (day === notificationDayKey(now.toISOString())) {
+    return '今天'
+  }
+  const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1)
+  if (day === notificationDayKey(yesterday.toISOString())) {
+    return '昨天'
+  }
+  const [year, month, date] = day.split('-').map((part) => Number(part))
+  if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(date)) {
+    return day
+  }
+  return `${year}年${month}月${date}日`
+}
+
+export interface NotificationDayGroup<T> {
+  day: string
+  label: string
+  items: T[]
+}
+
+/** 按年月日分组（组内保持入参顺序，列表本身已按 id 倒序）。 */
+export function groupNotificationsByDay<T extends { createdAt: string | null }>(
+  items: T[],
+  now: Date = new Date(),
+): NotificationDayGroup<T>[] {
+  const groups: NotificationDayGroup<T>[] = []
+  const indexByDay = new Map<string, NotificationDayGroup<T>>()
+  for (const item of items ?? []) {
+    const day = notificationDayKey(item.createdAt)
+    let group = indexByDay.get(day)
+    if (!group) {
+      group = { day, label: formatDayLabel(day, now), items: [] }
+      indexByDay.set(day, group)
+      groups.push(group)
+    }
+    group.items.push(item)
+  }
+  return groups
+}
+
 /** 通知时间展示：今天只显示 HH:mm；昨天显示「昨天 HH:mm」；更早显示 MM-DD HH:mm。 */
 export function formatNotificationTime(
   value: string | null | undefined,

frontend-vue/tests/notification-bell.test.ts

@@ -3,10 +3,12 @@ import assert from 'node:assert/strict'
 import {
   formatNotificationTime,
   formatUnreadBadge,
+  groupNotificationsByDay,
   hasNewNotification,
   readLastNotifiedId,
   writeLastNotifiedId,
 } from '../src/shared/utils/notification-bell.ts'
+import { buildNotificationListQuery } from '../src/shared/api/types/modules/notification.ts'
 
 function createStorage() {
   const store = new Map<string, string>()
@@ -84,3 +86,75 @@ test('formatNotificationTime 今天/昨天/更早展示', () => {
   assert.equal(formatNotificationTime(null, now), '')
   assert.equal(formatNotificationTime('not-a-date', now), '')
 })
+
+test('groupNotificationsByDay 按年月日分组：今天/昨天/更早，组内保持原顺序', () => {
+  const now = new Date(2026, 8, 13, 15, 30)
+  const items = [
+    { id: 4, createdAt: new Date(2026, 8, 13, 15, 0).toISOString() },
+    { id: 3, createdAt: new Date(2026, 8, 13, 9, 0).toISOString() },
+    { id: 2, createdAt: new Date(2026, 8, 12, 23, 0).toISOString() },
+    { id: 1, createdAt: new Date(2026, 8, 1, 8, 0).toISOString() },
+  ]
+
+  const groups = groupNotificationsByDay(items, now)
+
+  assert.equal(groups.length, 3)
+  assert.deepEqual(
+    groups.map((group) => [group.day, group.label]),
+    [
+      ['2026-09-13', '今天'],
+      ['2026-09-12', '昨天'],
+      ['2026-09-01', '2026年9月1日'],
+    ],
+  )
+  assert.deepEqual(
+    groups[0].items.map((item) => item.id),
+    [4, 3],
+    '同一天的多条合为一组且保持倒序',
+  )
+})
+
+test('groupNotificationsByDay 时间缺失/非法归入未知时间组', () => {
+  const now = new Date(2026, 8, 13, 15, 30)
+  const groups = groupNotificationsByDay(
+    [
+      { id: 2, createdAt: null },
+      { id: 1, createdAt: 'not-a-date' },
+    ],
+    now,
+  )
+
+  assert.equal(groups.length, 1)
+  assert.equal(groups[0].day, '')
+  assert.equal(groups[0].label, '未知时间')
+  assert.deepEqual(
+    groups[0].items.map((item) => item.id),
+    [2, 1],
+  )
+})
+
+test('buildNotificationListQuery：关键字去空白、空条件不下发、日期原样透传', () => {
+  assert.deepEqual(buildNotificationListQuery(), { page: 1, pageSize: 20, onlyUnread: 'false' })
+
+  const query = buildNotificationListQuery({
+    page: 2,
+    pageSize: 10,
+    keyword: '  余额不足  ',
+    startDate: '2026-09-10',
+    endDate: '2026-09-13',
+  })
+  assert.deepEqual(query, {
+    page: 2,
+    pageSize: 10,
+    onlyUnread: 'false',
+    keyword: '余额不足',
+    startDate: '2026-09-10',
+    endDate: '2026-09-13',
+  })
+
+  // 面板清空筛选后不能带空串日期（后端日期绑定会 400）
+  const cleared = buildNotificationListQuery({ keyword: '   ', startDate: '', endDate: '' })
+  assert.equal('keyword' in cleared, false)
+  assert.equal('startDate' in cleared, false)
+  assert.equal('endDate' in cleared, false)
+})