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

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

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

@@ -24,7 +24,16 @@
       <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"
+        :style="panelStyle"
+        role="dialog"
+        aria-label="通知列表"
+      >
       <div class="bell-panel-head">
         <span class="bell-panel-title">通知</span>
         <button
@@ -38,32 +47,81 @@
         </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,15 +141,18 @@ import {
   NOTIFICATION_POLL_INTERVAL_MS,
   formatNotificationTime,
   formatUnreadBadge,
+  groupNotificationsByDay,
   hasNewNotification,
   readLastNotifiedId,
   writeLastNotifiedId,
 } from '@/layout/notification-bell-model'
 
-const PAGE_SIZE = 20
+const PAGE_SIZE = 10
 
 const session = useAdminSessionStore()
 const rootRef = ref<HTMLElement | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const panelStyle = ref<Record<string, string>>({})
 
 const unreadCount = ref(0)
 const items = ref<AdminNotificationItem[]>([])
@@ -101,16 +162,34 @@ 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 currentUid(): number | string {
   return session.user?.id ?? 0
 }
 
+/** 起止日期倒挂时自动交换，避免用户只看到「没有符合条件的通知」不知原因。 */
+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() {
   try {
@@ -132,15 +211,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(currentUid(), Math.max(readLastNotifiedId(currentUid()), latest))
       }
@@ -154,14 +239,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)
   }
 }
@@ -198,12 +319,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()
   }
 }
 
@@ -217,6 +345,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') {
@@ -229,10 +358,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>
 
@@ -290,13 +424,11 @@ onUnmounted(() => {
 }
 
 .bell-panel {
-  position: absolute;
-  top: calc(100% + 10px);
-  right: 0;
+  position: fixed;
   z-index: 3200;
   width: 380px;
   max-width: calc(100vw - 32px);
-  max-height: 460px;
+  max-height: 520px;
   display: flex;
   flex-direction: column;
   border: 1px solid var(--admin-border, #d8e3ee);
@@ -422,29 +554,113 @@ onUnmounted(() => {
   word-break: break-all;
 }
 
-.bell-panel-foot {
-  border-top: 1px solid #edf1f5;
-  text-align: center;
+.bell-search {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #edf1f5;
+  background: #fafcfe;
 }
 
-.bell-more {
+.bell-search-input,
+.bell-date-input {
+  height: 28px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border: 1px solid #d8e3ee;
+  border-radius: 6px;
+  background: #ffffff;
+  color: var(--admin-text, #24384d);
+  font-size: 12px;
+  outline: none;
+}
+
+.bell-search-input {
   width: 100%;
-  padding: 9px 0;
-  border: none;
-  background: transparent;
+}
+
+.bell-search-input:focus,
+.bell-date-input:focus {
+  border-color: var(--admin-primary-strong, #2f5d8b);
+}
+
+.bell-search-days {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.bell-date-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.bell-date-sep {
+  color: #8a99a8;
+  font-size: 12px;
+}
+
+.bell-search-reset {
+  flex-shrink: 0;
+  padding: 0 8px;
+  height: 28px;
+  border: 1px solid #d8e3ee;
+  border-radius: 6px;
+  background: #ffffff;
   color: var(--admin-primary-strong, #2f5d8b);
   font-size: 12px;
   cursor: pointer;
 }
 
-.bell-more:disabled {
-  opacity: 0.55;
+.bell-search-reset:hover {
+  background: #edf5fb;
+}
+
+.bell-day-head {
+  padding: 6px 14px;
+  background: #f4f7fa;
+  color: #7c8b9a;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.bell-panel-foot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 7px 12px;
+  border-top: 1px solid #edf1f5;
+}
+
+.bell-page-btn {
+  padding: 3px 10px;
+  border: 1px solid #d8e3ee;
+  border-radius: 6px;
+  background: #ffffff;
+  color: var(--admin-primary-strong, #2f5d8b);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.bell-page-btn:hover:not(:disabled) {
+  background: #edf5fb;
+}
+
+.bell-page-btn:disabled {
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
-.bell-foot-note {
-  display: block;
-  padding: 8px 0;
+.bell-page-info {
+  color: var(--admin-text, #24384d);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.bell-page-total {
   color: #9aa6b3;
   font-size: 11px;
 }