refine Semi UI alert workspace

vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.test.tsx

@@ -71,10 +71,10 @@ test('loads only event dependencies on the default alert tab', async () => {
   expect(mocks.alertRulesV2).toHaveBeenCalledTimes(1);
   expect(mocks.metricCatalog).not.toHaveBeenCalled();
   expect(mocks.alertNotificationsV2).toHaveBeenCalledTimes(1);
-  expect(mocks.alertNotificationsV2.mock.calls[0][0].toString()).toBe('unreadOnly=true&limit=100');
+  expect(mocks.alertNotificationsV2.mock.calls[0][0].toString()).toBe('unreadOnly=true&limit=1');
 });
 
-test('loads one full notification query on a direct notifications entry', async () => {
+test('loads a paginated notification page and an independent unread total on direct entry', async () => {
   mocks.alertNotificationsV2.mockResolvedValue({ items: [], total: 0, limit: 100, offset: 0 });
   const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
   const view = render(<QueryClientProvider client={client}><MemoryRouter future={ROUTER_FUTURE} initialEntries={['/alerts?tab=notifications']}><AlertsPage /></MemoryRouter></QueryClientProvider>);
@@ -84,12 +84,17 @@ test('loads one full notification query on a direct notifications entry', async
   expect(view.container.querySelector('.v2-alert-notifications')).toHaveClass('semi-card');
   expect(screen.getByRole('heading', { level: 5, name: '站内通知' })).toBeInTheDocument();
   expect(view.container.querySelector('.v2-alert-notification-empty.semi-empty')).toBeInTheDocument();
+  expect(view.container.querySelector('.v2-alert-notification-pagination')).toBeInTheDocument();
+  expect(screen.getByRole('combobox', { name: '每页通知数' })).toBeInTheDocument();
   expect(view.container.querySelector('.v2-alert-channel-card.semi-card')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-alert-channel-descriptions.semi-descriptions')).toBeInTheDocument();
   expect(mocks.alertRulesV2).not.toHaveBeenCalled();
   expect(mocks.metricCatalog).not.toHaveBeenCalled();
-  expect(mocks.alertNotificationsV2).toHaveBeenCalledTimes(1);
+  expect(mocks.alertNotificationsV2).toHaveBeenCalledTimes(2);
-  expect(mocks.alertNotificationsV2.mock.calls[0][0].toString()).toBe('limit=100');
+  expect(mocks.alertNotificationsV2.mock.calls.map(([params]) => params.toString())).toEqual(expect.arrayContaining([
+    'unreadOnly=true&limit=1',
+    'limit=20&offset=0'
+  ]));
 });
 
 test('ends notification mutation feedback with a visible retryable error instead of a silent pending state', async () => {

vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx

@@ -4,7 +4,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FormEvent, useEffect, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import { api } from '../../api/client';
-import type { AlertEvent, AlertNotification, AlertQuery, AlertRule, AlertRuleInput, AlertStatus, MetricDefinition, Page } from '../../api/types';
+import type { AlertEvent, AlertQuery, AlertRule, AlertRuleInput, AlertStatus, MetricDefinition, Page } from '../../api/types';
 import { actionLabels, alertValue, canAct, formatAlertTime, operatorLabels, ruleCondition, severityLabels, statusLabels, thresholdText } from '../domain/alert';
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
 import { MetricActionButton } from '../shared/MetricActionButton';
@@ -373,23 +373,30 @@ function RulesWorkspace({ rules, metrics }: { rules: AlertRule[]; metrics: Metri
   </div>;
 }
 
-type NotificationsQuery = {
+function NotificationsWorkspace({ editable }: { editable: boolean }) {
-  data?: Page<AlertNotification>;
-  error: Error | null;
-  isError: boolean;
-  isPending: boolean;
-  refetch: () => unknown;
-};
-
-function NotificationsWorkspace({ editable, notifications }: { editable: boolean; notifications: NotificationsQuery }) {
   const queryClient = useQueryClient();
+  const [offset, setOffset] = useState(0);
+  const [limit, setLimit] = useState(20);
+  const notifications = useQuery({
+    queryKey: ['alert-notifications-v2', 'all', limit, offset],
+    queryFn: ({ signal }) => api.alertNotificationsV2(new URLSearchParams({ limit: String(limit), offset: String(offset) }), signal),
+    staleTime: 5_000,
+    gcTime: QUERY_MEMORY.highVolumeGcTime
+  });
   const read = useMutation({ mutationFn: api.readAlertNotificationsV2, onSuccess: async () => { await Promise.all([queryClient.invalidateQueries({ queryKey: ['alert-notifications-v2'] }), queryClient.invalidateQueries({ queryKey: ['alert-summary-v2'] })]); } });
   const items = notifications.data?.items ?? [];
-  return <Card className="v2-alert-notifications" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="站内通知" description="仅站内通道具备真实送达与已读状态" meta={`${items.length.toLocaleString('zh-CN')} 条`} actions={editable ? <Button theme="light" disabled={read.isPending || !items.some((item) => !item.read)} onClick={() => read.mutate(items.filter((item) => !item.read).map((item) => item.id))}>{read.isPending ? '正在更新' : '全部标为已读'}</Button> : <span className="v2-role-badge">只读</span>} />{notifications.isError ? <InlineError message={notifications.error?.message ?? '站内通知读取失败'} onRetry={() => notifications.refetch()} /> : null}{read.isError ? <InlineError message={read.error instanceof Error ? read.error.message : '通知状态更新失败'} /> : null}
+  const total = notifications.data?.total ?? 0;
+  const totalPages = Math.max(1, Math.ceil(total / limit));
+  const page = Math.floor(offset / limit) + 1;
+  useEffect(() => {
+    if (offset > 0 && offset >= total && !notifications.isPending) setOffset(Math.max(0, (totalPages - 1) * limit));
+  }, [limit, notifications.isPending, offset, total, totalPages]);
+  return <Card className="v2-alert-notifications" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="站内通知" description="仅站内通道具备真实送达与已读状态" meta={`共 ${total.toLocaleString('zh-CN')} 条`} actions={editable ? <Button theme="light" disabled={read.isPending || !items.some((item) => !item.read)} onClick={() => read.mutate(items.filter((item) => !item.read).map((item) => item.id))}>{read.isPending ? '正在更新' : '本页全部已读'}</Button> : <span className="v2-role-badge">只读</span>} />{notifications.isError ? <InlineError message={notifications.error?.message ?? '站内通知读取失败'} onRetry={() => notifications.refetch()} /> : null}{read.isError ? <InlineError message={read.error instanceof Error ? read.error.message : '通知状态更新失败'} /> : null}
     <div className="v2-alert-notification-list">{notifications.isPending ? <div className="v2-alert-notification-loading"><Spin size="middle" tip="正在读取站内通知" /></div> : items.length ? <CardGroup className="v2-alert-notification-cards" type="grid" spacing={0}>{items.map((item) => <Card className={`v2-alert-notification-card${item.read ? ' is-read' : ' is-unread'}`} key={item.id} title={<span className="v2-alert-notification-title"><SeverityTag severity={item.severity} /><span title={item.title}>{item.title}</span></span>} headerExtraContent={<Tag color={item.read ? 'grey' : 'orange'} type="light" size="small">{item.read ? '已读' : '未读'}</Tag>} headerLine bodyStyle={{ padding: 0 }}>
       <p className="v2-alert-notification-content" title={item.content}>{item.content}</p>
       <footer><Typography.Text type="tertiary">{formatAlertTime(item.createdAt)}</Typography.Text>{editable && !item.read ? <Button theme="borderless" disabled={read.isPending} onClick={() => read.mutate([item.id])}>{read.isPending ? '更新中' : '标为已读'}</Button> : null}</footer>
     </Card>)}</CardGroup> : !notifications.isError ? <Empty className="v2-alert-notification-empty" image={<IconBell />} title="暂无站内通知" description="告警触发或状态变更后，通知会在这里形成可追溯记录。" /> : null}</div>
+    <footer className="v2-alert-notification-pagination"><TablePagination page={page} totalPages={totalPages} info={`共 ${total.toLocaleString('zh-CN')} 条 · 本页 ${items.length.toLocaleString('zh-CN')} 条`} disabled={notifications.isFetching} onPageChange={(next) => setOffset((next - 1) * limit)} pageSize={limit} pageSizeLabel="每页通知数" onPageSizeChange={(next) => { setLimit(next); setOffset(0); }} pageSizeOptions={[{ value: 20, label: '20 条/页' }, { value: 50, label: '50 条/页' }]} /></footer>
     <Card className="v2-alert-channel-card" title={<strong>外部通知通道</strong>} headerLine bodyStyle={{ padding: 0 }}><Descriptions className="v2-alert-channel-descriptions" align="left" size="small" data={[
       { key: '短信（SMS）', value: <Tag color="grey" type="light" size="small">预留 · 未启用</Tag> },
       { key: '邮件（Email）', value: <Tag color="grey" type="light" size="small">预留 · 未启用</Tag> },
@@ -406,13 +413,10 @@ export default function AlertsPage() {
   const [filters, setFilterState] = useState(initialFilters); const [eventDraft, setEventDraft] = useState(initialFilters);
   const rules = useQuery({ queryKey: ['alert-rules-v2'], queryFn: ({ signal }) => api.alertRulesV2(signal), staleTime: 30_000, gcTime: QUERY_MEMORY.summaryGcTime, enabled: activeTab !== 'notifications' });
   const metrics = useQuery({ queryKey: ['metric-catalog-v2'], queryFn: ({ signal }) => api.metricCatalog(signal), staleTime: 300_000, enabled: activeTab === 'rules' });
-  const notices = useQuery({ queryKey: ['alert-notifications-v2', 'unread'], queryFn: ({ signal }) => api.alertNotificationsV2(new URLSearchParams({ unreadOnly: 'true', limit: '100' }), signal), staleTime: 5_000, gcTime: QUERY_MEMORY.summaryGcTime, enabled: activeTab !== 'notifications' });
+  const notices = useQuery({ queryKey: ['alert-notifications-v2', 'unread'], queryFn: ({ signal }) => api.alertNotificationsV2(new URLSearchParams({ unreadOnly: 'true', limit: '1' }), signal), staleTime: 5_000, gcTime: QUERY_MEMORY.summaryGcTime });
-  const notifications = useQuery({ queryKey: ['alert-notifications-v2', 'all'], queryFn: ({ signal }) => api.alertNotificationsV2(new URLSearchParams({ limit: '100' }), signal), staleTime: 5_000, gcTime: QUERY_MEMORY.summaryGcTime, enabled: activeTab === 'notifications' });
+  const unread = notices.data?.total ?? 0;
-  const unread = activeTab === 'notifications'
-    ? notifications.data?.items.filter((item) => !item.read).length ?? notices.data?.total ?? 0
-    : notices.data?.total ?? 0;
   const setTab = (next: Tab) => { setTabState(next); const copy = new URLSearchParams(params); copy.set('tab', next); setParams(copy, { replace: true }); };
   const setFilters = (next: Filters) => { setFilterState(next); const copy = new URLSearchParams(); if (tab !== 'events') copy.set('tab', tab); Object.entries(next).forEach(([key, value]) => { if (value) copy.set(key, value); }); setParams(copy, { replace: true }); };
   const tabs = [{ key: 'events' as const, label: '告警事件', icon: <IconAlarm /> }, ...(admin ? [{ key: 'rules' as const, label: '规则配置' }] : []), { key: 'notifications' as const, label: '站内通知', icon: <IconBell />, count: unread || undefined }];
-  return <div className={`v2-alert-page is-${activeTab}`}><div className="v2-alert-navigation"><SegmentedTabs className="v2-alert-tabs" variant="filled" ariaLabel="告警中心分类" value={activeTab} items={tabs} onChange={setTab} /><div className="v2-alert-navigation-meta"><Typography.Text type="tertiary">{operator ? '可处置事件' : '只读查看'}</Typography.Text><Tag color={unread ? 'orange' : 'green'} type="light" size="small">{unread ? `${unread.toLocaleString('zh-CN')} 条未读` : '通知已读'}</Tag></div></div>{activeTab !== 'notifications' && rules.isError ? <InlineError message={rules.error.message} onRetry={() => rules.refetch()} /> : null}{activeTab === 'rules' && metrics.isError ? <InlineError message={metrics.error.message} onRetry={() => metrics.refetch()} /> : null}{activeTab === 'events' ? <EventWorkspace filters={filters} draft={eventDraft} setDraft={setEventDraft} setFilters={setFilters} rules={rules.data ?? []} unread={unread} editable={operator} onTab={setTab} /> : activeTab === 'rules' ? <RulesWorkspace rules={rules.data ?? []} metrics={metrics.data?.metrics ?? []} /> : <NotificationsWorkspace editable={operator} notifications={notifications} />}</div>;
+  return <div className={`v2-alert-page is-${activeTab}`}><div className="v2-alert-navigation"><SegmentedTabs className="v2-alert-tabs" variant="filled" ariaLabel="告警中心分类" value={activeTab} items={tabs} onChange={setTab} /><div className="v2-alert-navigation-meta"><Typography.Text type="tertiary">{operator ? '可处置事件' : '只读查看'}</Typography.Text><Tag color={unread ? 'orange' : 'green'} type="light" size="small">{unread ? `${unread.toLocaleString('zh-CN')} 条未读` : '通知已读'}</Tag></div></div>{activeTab !== 'notifications' && rules.isError ? <InlineError message={rules.error.message} onRetry={() => rules.refetch()} /> : null}{activeTab === 'rules' && metrics.isError ? <InlineError message={metrics.error.message} onRetry={() => metrics.refetch()} /> : null}{activeTab === 'events' ? <EventWorkspace filters={filters} draft={eventDraft} setDraft={setEventDraft} setFilters={setFilters} rules={rules.data ?? []} unread={unread} editable={operator} onTab={setTab} /> : activeTab === 'rules' ? <RulesWorkspace rules={rules.data ?? []} metrics={metrics.data?.metrics ?? []} /> : <NotificationsWorkspace editable={operator} />}</div>;
 }

vehicle-data-platform/apps/web/src/v2/styles/workspace.css

@@ -6589,42 +6589,42 @@
  * command rail and reserves the remaining height for the operational list.
  */
 .v2-alert-page {
-  gap: 9px;
+  gap: 12px;
-  padding: 12px 18px 16px;
+  padding: 14px 18px 18px;
   background: #f6f8fb;
 }
 
 .v2-alert-navigation {
   display: flex;
-  min-height: 46px;
+  min-height: 52px;
   flex: 0 0 auto;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   overflow: hidden;
   border: 1px solid #dce4ed;
-  border-radius: 10px;
+  border-radius: 12px;
   background: #fff;
-  padding: 4px 8px 4px 4px;
+  padding: 5px 10px 5px 5px;
-  box-shadow: 0 3px 12px rgba(31, 53, 80, .04);
+  box-shadow: 0 5px 18px rgba(31, 53, 80, .045);
 }
 
 .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs {
   width: auto;
-  min-height: 36px;
+  min-height: 40px;
   flex: 0 1 auto;
-  grid-auto-columns: minmax(126px, 1fr);
+  grid-auto-columns: minmax(136px, 1fr);
   border: 0;
-  border-radius: 7px;
+  border-radius: 9px;
   background: #f2f5f9;
   padding: 3px;
   box-shadow: none;
 }
 
 .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button {
-  min-height: 32px;
+  min-height: 34px;
-  border-radius: 6px;
+  border-radius: 7px;
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .v2-alert-navigation-meta {
@@ -6638,13 +6638,13 @@
 
 .v2-alert-navigation-meta > .semi-typography {
   color: #7d899a;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .v2-alert-navigation-meta > .semi-tag {
-  min-height: 24px;
+  min-height: 26px;
   border-radius: 6px;
-  font-size: 10px;
+  font-size: 11px;
 }
 
 .v2-alert-filter-card.semi-card,
@@ -6655,8 +6655,8 @@
 .v2-alert-rule-editor.semi-card,
 .v2-alert-notifications.semi-card {
   border-color: #dce4ed;
-  border-radius: 9px;
+  border-radius: 12px;
-  box-shadow: 0 3px 14px rgba(31, 53, 80, .045);
+  box-shadow: 0 5px 18px rgba(31, 53, 80, .045);
 }
 
 .v2-alert-filter-card.semi-card {
@@ -6668,33 +6668,35 @@
 }
 
 .v2-alert-filter.v2-alert-filter-primary {
-  min-height: 60px;
+  min-height: 70px;
   grid-template-columns: minmax(250px, 1.45fr) minmax(122px, .62fr) minmax(136px, .68fr) auto auto auto;
-  gap: 8px;
+  gap: 10px;
-  padding: 9px 11px;
+  padding: 11px 13px;
 }
 
 .v2-alert-filter.v2-alert-filter-primary label {
-  gap: 4px;
+  gap: 5px;
-  font-size: 10px;
+  color: #66778e;
+  font-size: 11px;
+  font-weight: 600;
 }
 
 .v2-alert-filter.v2-alert-filter-primary label > div,
 .v2-alert-filter.v2-alert-filter-primary .semi-select,
 .v2-alert-filter.v2-alert-filter-primary .semi-input-wrapper,
 .v2-alert-filter.v2-alert-filter-primary > .semi-button {
-  min-height: 34px;
+  min-height: 38px;
-  border-radius: 7px;
+  border-radius: 8px;
 }
 
 .v2-alert-filter.v2-alert-filter-primary .semi-input,
 .v2-alert-filter.v2-alert-filter-primary .semi-select-selection-text,
 .v2-alert-filter.v2-alert-filter-primary > .semi-button {
-  font-size: 12px;
+  font-size: 13px;
 }
 
 .v2-alert-context-card.semi-card {
-  min-height: 64px;
+  min-height: 76px;
   flex: 0 0 auto;
   overflow: hidden;
 }
@@ -6702,54 +6704,54 @@
 .v2-alert-context-card > .semi-card-body {
   display: grid;
   height: 100%;
-  grid-template-columns: minmax(0, 1fr) 278px;
+  grid-template-columns: minmax(0, 1fr) 300px;
 }
 
 .v2-alert-context-card .v2-alert-kpis,
 .v2-alert-context-card .v2-alert-kpis .v2-metric-action-content {
-  min-height: 64px;
+  min-height: 76px;
 }
 
 .v2-alert-context-card .v2-alert-kpis small {
-  font-size: 10px;
+  font-size: 11px;
 }
 
 .v2-alert-context-card .v2-alert-kpis strong {
-  margin-top: 5px;
+  margin-top: 7px;
-  font-size: 19px;
+  font-size: 22px;
 }
 
 .v2-alert-context-card .v2-alert-secondary-states {
-  padding: 6px;
+  padding: 8px;
-  gap: 4px;
+  gap: 6px;
 }
 
 .v2-alert-context-card .v2-alert-secondary-states > .semi-button {
-  border-radius: 6px;
+  border-radius: 8px;
-  padding: 5px 6px;
+  padding: 7px 8px;
 }
 
 .v2-alert-context-card .v2-alert-secondary-states span {
-  font-size: 9px;
+  font-size: 10px;
 }
 
 .v2-alert-context-card .v2-alert-secondary-states b {
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .v2-alert-workspace {
   min-height: 0;
   flex: 1 1 0;
-  gap: 9px;
+  gap: 12px;
 }
 
 .v2-alert-workspace.is-inspector-open {
-  grid-template-columns: minmax(680px, 1fr) 370px;
+  grid-template-columns: minmax(680px, 1fr) 390px;
 }
 
 .v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header {
-  min-height: 48px;
+  min-height: 54px;
-  padding: 7px 12px;
+  padding: 8px 14px;
 }
 
 .v2-alert-table-card .v2-workspace-panel-copy {
@@ -6757,18 +6759,18 @@
 }
 
 .v2-alert-table-card .v2-workspace-panel-copy > h5.semi-typography {
-  font-size: 14px;
+  font-size: 15px;
 }
 
 .v2-alert-table-card .v2-workspace-panel-copy > .semi-typography {
   color: #8793a4;
-  font-size: 9px;
+  font-size: 10px;
 }
 
 .v2-alert-table-card .v2-workspace-panel-actions > .semi-button {
-  min-height: 30px;
+  min-height: 34px;
-  border-radius: 6px;
+  border-radius: 8px;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .v2-alert-table-scroll {
@@ -6789,26 +6791,28 @@
 }
 
 .v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-thead > .semi-table-row > .semi-table-row-head {
-  height: 38px;
+  height: 42px;
   background: #f7f9fc;
-  font-size: 10px;
+  color: #5e7087;
-}
-
-.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
-  height: 46px;
-  padding: 6px 9px;
   font-size: 11px;
 }
 
+.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
+  height: 52px;
+  padding: 7px 10px;
+  color: #47586e;
+  font-size: 12px;
+}
+
 .v2-alert-table-card > .semi-card-body > footer {
-  min-height: 42px;
+  min-height: 46px;
-  padding: 5px 10px;
+  padding: 6px 12px;
 }
 
 .v2-alert-table-card > .semi-card-body > footer button,
 .v2-alert-table-card > .semi-card-body > footer select {
-  height: 28px;
+  height: 32px;
-  font-size: 11px;
+  font-size: 12px;
 }
 
 .v2-alert-inspector.semi-card {
@@ -6823,16 +6827,16 @@
 }
 
 .v2-alert-inspector > .semi-card-body > .v2-alert-inspector-heading {
-  min-height: 58px;
+  min-height: 64px;
-  padding: 8px 11px;
+  padding: 10px 13px;
 }
 
 .v2-alert-inspector-content {
   min-height: 0;
   flex: 1 1 auto;
-  gap: 0;
+  gap: 10px;
   overflow: auto;
-  padding: 0 10px 10px;
+  padding: 10px;
 }
 
 .v2-alert-inspector-content > .v2-alert-detail-card.semi-card {
@@ -6841,22 +6845,20 @@
 }
 
 .v2-alert-detail-card.semi-card {
-  border-width: 0 0 1px;
+  overflow: hidden;
-  border-color: #e4e9f0;
+  border: 1px solid #dfe6ef;
-  border-radius: 0;
+  border-radius: 10px;
-  background: transparent;
+  background: #fff;
-  box-shadow: none;
+  box-shadow: 0 3px 12px rgba(31, 53, 80, .035);
 }
 
 .v2-alert-detail-card > .semi-card-header {
-  min-height: 40px;
+  min-height: 44px;
-  border-bottom: 0;
+  border-bottom: 1px solid #e8edf3;
-  padding: 0 2px;
+  padding: 0 12px;
 }
 
 .v2-alert-detail-card > .semi-card-body {
-  border: 1px solid #e1e7ef;
-  border-radius: 7px;
   background: #fff;
 }
 
@@ -6866,19 +6868,19 @@
 }
 
 .v2-alert-inspector > .semi-card-body > .v2-alert-links {
-  min-height: 46px;
+  min-height: 50px;
-  padding: 6px 10px;
+  padding: 7px 10px;
 }
 
 .v2-alert-inspector > .semi-card-body > .v2-alert-links a {
-  min-height: 32px;
+  min-height: 34px;
 }
 
 .v2-alert-rules {
   min-height: 0;
   flex: 1 1 0;
-  grid-template-columns: minmax(300px, 340px) minmax(600px, 1fr);
+  grid-template-columns: minmax(320px, 350px) minmax(620px, 1fr);
-  gap: 9px;
+  gap: 12px;
 }
 
 .v2-alert-rule-list.semi-card,
@@ -6915,40 +6917,80 @@
 
 .v2-alert-rule-list > .semi-card-body > .v2-alert-rule-list-heading,
 .v2-alert-rule-editor-form > .v2-alert-rule-editor-heading {
-  min-height: 56px;
+  min-height: 60px;
-  padding: 8px 12px;
+  padding: 9px 14px;
 }
 
 .v2-alert-rule-item.semi-button {
-  min-height: 68px;
+  min-height: 74px;
-  padding: 8px 11px;
+  padding: 10px 13px;
 }
 
 .v2-alert-rule-copy > small {
-  margin-top: 5px;
+  margin-top: 6px;
 }
 
 .v2-alert-rule-templates {
-  padding: 11px 12px;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: stretch;
+  gap: 9px;
+  padding: 13px 14px 14px;
+}
+
+.v2-alert-rule-templates > div {
+  gap: 3px;
+}
+
+.v2-alert-rule-templates > nav {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
 }
 
 .v2-alert-template-card.semi-button {
-  min-height: 72px;
+  min-height: 94px;
-  padding: 9px;
+  padding: 11px;
+}
+
+.v2-alert-template-card.semi-button .semi-button-content {
+  grid-template-columns: 38px minmax(0, 1fr);
+  align-content: center;
+  row-gap: 7px;
+}
+
+.v2-alert-template-card .v2-alert-template-icon {
+  grid-row: 1 / span 2;
+}
+
+.v2-alert-template-card .v2-alert-template-copy {
+  grid-column: 2;
+}
+
+.v2-alert-template-card .v2-alert-template-copy small {
+  display: -webkit-box;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.v2-alert-template-card .semi-tag {
+  max-width: 100%;
+  grid-column: 2;
+  justify-self: start;
+  font-size: 9px;
 }
 
 .v2-rule-form-grid {
-  gap: 11px 13px;
+  gap: 13px 15px;
-  padding: 13px 14px 16px;
+  padding: 16px 16px 18px;
 }
 
 .v2-alert-rule-editor-form > footer {
   position: sticky;
   z-index: 3;
   bottom: 0;
-  min-height: 56px;
+  min-height: 60px;
   background: rgba(255, 255, 255, .97);
-  padding: 8px 14px;
+  padding: 9px 16px;
   backdrop-filter: blur(10px);
 }
 
@@ -6963,24 +7005,40 @@
   height: 100%;
   min-height: 0;
   max-height: none;
-  grid-template-rows: 54px minmax(0, 1fr) auto;
+  grid-template-rows: 60px minmax(0, 1fr) 48px auto;
   overflow: hidden;
 }
 
 .v2-alert-notifications > .semi-card-body > .v2-workspace-panel-header {
-  min-height: 54px;
+  min-height: 60px;
-  padding: 8px 12px;
+  padding: 10px 14px;
 }
 
 .v2-alert-notification-list {
   min-height: 0;
   overflow: auto;
-  padding: 9px;
+  padding: 12px;
 }
 
 .v2-alert-notification-cards.semi-card-group {
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 9px;
+  gap: 11px;
+}
+
+.v2-alert-notification-card.semi-card {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 132px;
+}
+
+.v2-alert-notification-pagination {
+  display: flex;
+  min-height: 48px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-top: 1px solid #e4eaf1;
+  background: #fff;
+  padding: 6px 12px;
 }
 
 .v2-alert-channel-card.semi-card {
@@ -6990,12 +7048,12 @@
 }
 
 .v2-alert-channel-card > .semi-card-header {
-  min-height: 34px;
+  min-height: 38px;
-  padding: 0 12px;
+  padding: 0 14px;
 }
 
 .v2-alert-channel-descriptions.semi-descriptions {
-  padding: 5px 9px 8px;
+  padding: 6px 11px 9px;
 }
 
 .v2-alert-channel-descriptions table {
@@ -7011,14 +7069,14 @@
 .v2-alert-channel-descriptions tr {
   display: flex;
   min-width: 0;
-  min-height: 32px;
+  min-height: 34px;
   align-items: center;
   justify-content: space-between;
   gap: 6px;
   border: 1px solid #e4e9f0;
   border-radius: 6px;
   background: #fafbfd;
-  padding: 4px 7px;
+  padding: 5px 8px;
 }
 
 .v2-alert-channel-descriptions .semi-descriptions-item {
@@ -7031,6 +7089,15 @@
   padding-right: 0;
 }
 
+.v2-alert-channel-descriptions .semi-descriptions-key,
+.v2-alert-channel-descriptions .semi-descriptions-value {
+  font-size: 10px;
+}
+
+.v2-alert-channel-descriptions .semi-tag {
+  font-size: 9px;
+}
+
 @media (max-width: 1180px) and (min-width: 681px) {
   .v2-alert-filter.v2-alert-filter-primary {
     grid-template-columns: minmax(220px, 1fr) 120px 130px auto auto auto;
@@ -7061,9 +7128,9 @@
 
 @media (max-width: 680px) {
   .v2-alert-page {
-    gap: 8px;
+    gap: 10px;
     overflow: auto;
-    padding: 8px 7px 16px;
+    padding: 9px 8px 16px;
   }
 
   .v2-alert-page.is-events {
@@ -7077,23 +7144,23 @@
     position: sticky;
     z-index: 8;
     top: 0;
-    min-height: 46px;
+    min-height: 50px;
-    border-radius: 9px;
+    border-radius: 11px;
-    padding: 3px;
+    padding: 4px;
   }
 
   .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs {
     position: static;
     width: 100%;
-    min-height: 38px;
+    min-height: 42px;
     grid-auto-columns: minmax(104px, 1fr);
     overflow-x: auto;
   }
 
   .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button {
-    min-height: 32px;
+    min-height: 36px;
     padding-inline: 7px;
-    font-size: 10px;
+    font-size: 11px;
   }
 
   .v2-alert-navigation-meta {
@@ -7108,7 +7175,7 @@
     min-height: 0;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
-    padding: 9px;
+    padding: 10px;
   }
 
   .v2-alert-filter.v2-alert-filter-primary label:first-child {
@@ -7124,7 +7191,7 @@
   }
 
   .v2-alert-context-card.semi-card {
-    min-height: 94px;
+    min-height: 104px;
   }
 
   .v2-alert-context-card > .semi-card-body {
@@ -7132,14 +7199,14 @@
   }
 
   .v2-alert-context-card .v2-alert-kpis {
-    height: 58px;
+    height: 64px;
-    min-height: 58px;
+    min-height: 64px;
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .v2-alert-context-card .v2-alert-kpis .v2-metric-action,
   .v2-alert-context-card .v2-alert-kpis .v2-metric-action-content {
-    min-height: 58px;
+    min-height: 64px;
   }
 
   .v2-alert-context-card .v2-alert-kpis .v2-metric-action {
@@ -7157,32 +7224,32 @@
   }
 
   .v2-alert-context-card .v2-alert-kpis small {
-    font-size: 8px;
+    font-size: 9px;
   }
 
   .v2-alert-context-card .v2-alert-kpis strong {
     margin-top: 0;
-    font-size: 16px;
+    font-size: 18px;
   }
 
   .v2-alert-context-card .v2-alert-secondary-states {
-    min-height: 34px;
+    min-height: 40px;
     border-top: 1px solid #e4e9f0;
     border-left: 0;
     padding: 3px 4px;
   }
 
   .v2-alert-context-card .v2-alert-secondary-states > .semi-button {
-    min-height: 30px;
+    min-height: 34px;
     padding: 2px 5px;
   }
 
   .v2-alert-context-card .v2-alert-secondary-states span {
-    font-size: 8px;
+    font-size: 9px;
   }
 
   .v2-alert-context-card .v2-alert-secondary-states b {
-    font-size: 12px;
+    font-size: 13px;
   }
 
   .v2-alert-page.is-events .v2-alert-workspace {
@@ -7236,8 +7303,8 @@
   }
 
   .v2-alert-mobile-list {
-    gap: 6px;
+    gap: 8px;
-    padding: 6px;
+    padding: 8px;
   }
 
   .v2-alert-mobile-list > .v2-alert-mobile-card.semi-card {
@@ -7246,11 +7313,11 @@
   }
 
   .v2-alert-mobile-card-content {
-    padding: 8px 9px;
+    padding: 10px 11px;
   }
 
   .v2-alert-mobile-card-content header > strong {
-    font-size: 13px;
+    font-size: 14px;
   }
 
   .v2-alert-mobile-card-content header > span {
@@ -7259,19 +7326,19 @@
 
   .v2-alert-mobile-card-content .v2-alert-severity.semi-tag,
   .v2-alert-mobile-card-content .v2-alert-status.semi-tag {
-    height: 20px;
+    height: 22px;
-    min-height: 20px;
+    min-height: 22px;
-    border-radius: 5px;
+    border-radius: 6px;
-    padding-inline: 5px;
+    padding-inline: 6px;
-    font-size: 8px;
+    font-size: 9px;
   }
 
   .v2-alert-mobile-card-content p {
-    margin: 4px 0 5px;
+    margin: 6px 0 7px;
     overflow: hidden;
     color: #405168;
-    font-size: 11px;
+    font-size: 12px;
-    line-height: 14px;
+    line-height: 16px;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -7279,13 +7346,13 @@
   .v2-alert-mobile-card-content dl {
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 0;
-    padding-top: 6px;
+    padding-top: 7px;
   }
 
   .v2-alert-mobile-card-content dl > div {
     display: block;
     min-width: 0;
-    min-height: 28px;
+    min-height: 32px;
     padding: 0 5px;
   }
 
@@ -7299,7 +7366,7 @@
 
   .v2-alert-mobile-card-content dt {
     overflow: hidden;
-    font-size: 8px;
+    font-size: 9px;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -7308,8 +7375,8 @@
     min-width: 0;
     margin: 3px 0 0;
     overflow: hidden;
-    font-size: 9px;
+    font-size: 10px;
-    line-height: 12px;
+    line-height: 13px;
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -7361,10 +7428,35 @@
     flex: none;
   }
 
+  .v2-alert-notifications > .semi-card-body {
+    grid-template-rows: 58px minmax(320px, 1fr) 76px auto;
+  }
+
   .v2-alert-notification-cards.semi-card-group {
     grid-template-columns: 1fr;
   }
 
+  .v2-alert-notification-pagination {
+    min-height: 76px;
+    align-items: stretch;
+    justify-content: center;
+    flex-direction: column;
+    gap: 7px;
+    padding: 8px 10px;
+  }
+
+  .v2-alert-notification-pagination .v2-table-pagination-info {
+    width: 100%;
+  }
+
+  .v2-alert-notification-pagination .v2-table-pagination-controls {
+    width: 100%;
+  }
+
+  .v2-alert-notification-pagination .v2-table-pagination {
+    flex: 1 1 auto;
+  }
+
   .v2-alert-channel-descriptions tbody {
     display: table-row-group;
   }