From 2c09fd7cf022cd5579555df7bdec7a6701b43529 Mon Sep 17 00:00:00 2001 From: lingniu Date: Mon, 20 Jul 2026 05:41:45 +0800 Subject: [PATCH] feat(web): refine alert notification workspace --- .../apps/web/src/v2/pages/AlertsPage.test.tsx | 6 +- .../apps/web/src/v2/pages/AlertsPage.tsx | 7 +- .../apps/web/src/v2/styles/workspace.css | 75 +++++++++++++++++++ 3 files changed, 82 insertions(+), 6 deletions(-) diff --git a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.test.tsx index 1f2587de..b7ea6067 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.test.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.test.tsx @@ -150,7 +150,7 @@ test('clears old alert rows and inspector evidence when the event scope changes' expect(screen.getByLabelText('告警中心工作区').querySelector('.v2-workspace-command-icon.semi-avatar')).toBeInTheDocument(); expect(screen.getByRole('heading', { level: 5, name: '告警处置工作台' })).toBeInTheDocument(); expect(screen.getByText('核验事件证据、治理规则并追踪通知状态')).toBeInTheDocument(); - expect(screen.getByText('可处置事件')).toBeInTheDocument(); + expect(screen.getByText('具备处置权限')).toBeInTheDocument(); expect(screen.queryByRole('heading', { level: 2, name: '告警中心' })).not.toBeInTheDocument(); expect(view.container.querySelector('.v2-alert-inspector')).not.toBeInTheDocument(); expect(view.container.querySelector('.v2-alert-workspace')).not.toHaveClass('is-inspector-open'); @@ -326,7 +326,7 @@ test('uses one focused Semi bottom SideSheet for the complete mobile event filte render(); await screen.findByText('当前筛选条件没有告警事件'); - const trigger = screen.getByRole('button', { name: /修改事件筛选/ }); + const trigger = screen.getByRole('button', { name: '打开告警筛选：全部告警' }); expect(trigger).toHaveAttribute('aria-expanded', 'false'); fireEvent.click(trigger); @@ -346,7 +346,7 @@ test('uses one focused Semi bottom SideSheet for the complete mobile event filte fireEvent.click(within(dialog).getByRole('button', { name: '应用并查询' })); await waitFor(() => expect(mocks.alertEventsV2).toHaveBeenLastCalledWith(expect.objectContaining({ protocol: 'JT808' }), expect.anything())); - expect(screen.getByRole('button', { name: /修改事件筛选：已启用 1 项/ })).toHaveAttribute('aria-expanded', 'false'); + expect(screen.getByRole('button', { name: '打开告警筛选：已启用 1 项' })).toHaveAttribute('aria-expanded', 'false'); }); test('keeps mobile rule selection focused and opens editing in a Semi bottom SideSheet', async () => { diff --git a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx index ff55e184..fba8c62d 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx @@ -284,12 +284,13 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e return <> {mobileLayout ?
setFiltersCollapsed((value) => !value)} /> {operator ? '可处置事件' : '只读查看'}} + meta={{operator ? '具备处置权限' : '仅限查看'}} actions={} /> {activeTab !== 'notifications' && rules.isError ? rules.refetch()} /> : null} diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css index d33df9c6..7b099ad7 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css @@ -9431,6 +9431,81 @@ padding-inline: 7px; } +@media (min-width: 681px) { + .v2-alert-notification-list { + padding: 0 10px 10px; + } + + .v2-alert-notification-cards.semi-card-group { + overflow: hidden; + grid-template-columns: minmax(0, 1fr); + gap: 0; + border: 1px solid #e1e8f0; + border-radius: 10px; + background: #fff; + } + + .v2-alert-notification-card.semi-card { + display: grid; + min-height: 64px; + grid-template-columns: minmax(248px, .72fr) minmax(0, 1.7fr); + border: 0; + border-bottom: 1px solid #e8edf3; + border-radius: 0; + box-shadow: none; + contain-intrinsic-size: auto 64px; + transition: background-color .16s ease; + } + + .v2-alert-notification-card.semi-card:last-child { + border-bottom: 0; + } + + .v2-alert-notification-card.semi-card:hover { + background: #f8fbff; + } + + .v2-alert-notification-card.is-unread.semi-card { + box-shadow: inset 3px 0 #2f78e8; + } + + .v2-alert-notification-card > .semi-card-header { + min-height: 64px; + border-right: 1px solid #edf1f5; + border-bottom: 0; + padding: 8px 12px; + } + + .v2-alert-notification-card > .semi-card-body { + display: grid; + min-height: 64px; + grid-template-columns: minmax(0, 1fr) 138px; + } + + .v2-alert-notification-content { + display: -webkit-box; + min-height: 64px; + overflow: hidden; + align-content: center; + margin: 0; + padding: 12px 14px; + line-height: 1.45; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .v2-alert-notification-card > .semi-card-body > footer { + min-height: 64px; + justify-content: center; + align-items: flex-end; + flex-direction: column; + gap: 2px; + border-top: 0; + border-left: 1px solid #edf1f5; + padding: 7px 9px; + } +} + .v2-alert-notification-pagination { display: flex; min-height: 48px;