From 380a78283ed99d246cd0395199f51731c052051c Mon Sep 17 00:00:00 2001 From: chy88 Date: Wed, 4 Mar 2026 00:18:59 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=89=93=E7=A3=A8=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=8F=B0=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C=E4=B8=8E?= =?UTF-8?q?=E5=8F=AF=E8=AE=BF=E9=97=AE=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 优化 Dashboard、Bindings、Logs、Settings 的布局、筛选区与信息层级 - 增加筛选状态同步、未保存提醒、运行时反馈和趋势表视图 - 补充跳转主内容、aria live、键盘导航与移动端触控细节 --- frontend/index.html | 1 + frontend/src/App.vue | 31 +++- frontend/src/api/index.js | 47 +++-- frontend/src/composables/useAsyncAction.js | 13 +- frontend/src/composables/usePolling.js | 2 +- frontend/src/styles.css | 173 ++++++++++++++++++- frontend/src/utils/liveRegion.js | 29 ++++ frontend/src/views/Bindings.vue | 192 +++++++++++++++++---- frontend/src/views/Dashboard.vue | 44 ++++- frontend/src/views/Login.vue | 17 +- frontend/src/views/Logs.vue | 167 +++++++++++++++--- frontend/src/views/Settings.vue | 69 +++++++- 12 files changed, 675 insertions(+), 110 deletions(-) create mode 100644 frontend/src/utils/liveRegion.js diff --git a/frontend/index.html b/frontend/index.html index fbbf46b..df68c5c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,6 +3,7 @@ + Key-IP Sentinel diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 950ad34..eb2443e 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -3,11 +3,15 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue' import { useRoute, useRouter } from 'vue-router' import { clearAuthToken } from './api' +import { subscribeToAnnouncements } from './utils/liveRegion' const route = useRoute() const router = useRouter() const clockLabel = ref('') +const liveMessage = ref('') let clockTimer +let clearAnnouncementTimer +let unsubscribeAnnouncements = () => {} const navItems = [ { label: 'Dashboard', name: 'dashboard', icon: 'DataAnalysis' }, @@ -34,19 +38,34 @@ async function logout() { onMounted(() => { updateClock() clockTimer = window.setInterval(updateClock, 60000) + unsubscribeAnnouncements = subscribeToAnnouncements((message) => { + liveMessage.value = message + if (clearAnnouncementTimer) { + window.clearTimeout(clearAnnouncementTimer) + } + clearAnnouncementTimer = window.setTimeout(() => { + liveMessage.value = '' + }, 3000) + }) }) onBeforeUnmount(() => { if (clockTimer) { window.clearInterval(clockTimer) } + if (clearAnnouncementTimer) { + window.clearTimeout(clearAnnouncementTimer) + } + unsubscribeAnnouncements() })