修复供水报警管理卡片重叠并统一统计页视觉

复位统计图标定位、左对齐筛选标题，并对齐管网数据统计分析页的卡片与图表视觉；增加共享主题布局回归测试。

memory/sessions/2026-09-28.md

@@ -25,3 +25,11 @@
 - 当前筛选导出逐页查询统一接口（每页最多 100），不只导出屏幕上当前页。列表与态势独立失败反馈、保留已有数据，并用请求代次防止旧响应覆盖新查询；图表有局部加载，详情抽屉适配窄屏。
 - 代码审查 Standards 初报 4 项，纠正 3 项硬性问题，剩余 SQL 与 Java 同步状态优先级的重复规则为分页筛选所需的启发式风险，测试锁定两边口径；Spec 初报的工单跳转及状态口径偏差均已修正并复核撤回。
 - 前端全量 Node 177 项：174 通过、3 个旧设备台账/责任人测试既存失败；生产构建通过。后端 zksy-system 全量 190 项：189 通过、1 个 cockpit 旧 pipe_length 检查失败（其他任务代码）；报警 service 与 mapper 定向测试通过。未进行真实登录与 Kingbase 联调，前后端需同步部署。
+
+## 供水报警管理页面视觉回归
+
+- 用户反馈从报警管理切到首页再返回时，顶部两张统计卡图标与文字重叠；筛选标题的图标与文字被分到两端，并要求视觉语言对齐「供水设施管理-管网数据统计分析」。
+- 独立的样式反馈测试先复现：共享 `waterSupplyPageTheme.scss` 把 `.metric-icon` 绝对定位，而本页没有将其复位；本页 `.card-title` 的 `justify-content: space-between` 将筛选标题推向右侧。两个断言先红后绿。
+- 仅调整 `WaterAlarmPage.vue` 的 scoped 布局与图表标题：图标回到弹性布局，筛选标题左侧并排，页头/卡片/图表区沿用统计分析页的蓝白色值与间距；四级报警业务配色不变。新增 `tests/waterAlarmLayout.test.mjs` 作为回归测试。
+- 本地前端服务可访问，但当前应用内会话停在登录页，Chrome 扩展连接不可用，因此真实「首页→报警管理」路线仍需人工视觉复核；未提交登录信息或修改用户会话。
+- 单文件布局与业务测试 11 项通过，生产构建通过；全量 179 项中 176 项通过，余下 3 项为此前已知的旧设备台账/责任人测试失败，无新增失败。

src/views/subSystem/waterSupply/components/WaterAlarmPage.vue

@@ -20,9 +20,9 @@
 
     <el-alert v-if="dashboardError" class="dashboard-error" :title="dashboardError" type="error" show-icon :closable="false"><el-button link type="primary" @click="load">重新加载</el-button></el-alert>
     <div v-loading="dashboardLoading" class="chart-grid">
-      <el-card shadow="never" class="water-panel trend-card"><template #header><div class="card-title"><span>报警趋势</span><span class="muted">近 {{ trendDays }} 天 · 四级报警</span></div></template><div ref="trendRef" class="chart" /></el-card>
-      <el-card shadow="never" class="water-panel"><template #header><div class="card-title">报警分类占比</div></template><div ref="warningRef" class="chart chart--small" /></el-card>
-      <el-card shadow="never" class="water-panel"><template #header><div class="card-title">设备分类占比</div></template><div ref="deviceRef" class="chart chart--small" /></el-card>
+      <el-card shadow="never" class="water-panel chart-card trend-card"><template #header><div class="card-title"><el-icon><TrendCharts /></el-icon><span>报警趋势</span><span class="muted chart-caption">近 {{ trendDays }} 天 · 四级报警</span></div></template><div ref="trendRef" class="chart" /></el-card>
+      <el-card shadow="never" class="water-panel chart-card"><template #header><div class="card-title"><el-icon><PieChart /></el-icon><span>报警分类占比</span></div></template><div ref="warningRef" class="chart chart--small" /></el-card>
+      <el-card shadow="never" class="water-panel chart-card"><template #header><div class="card-title"><el-icon><DataAnalysis /></el-icon><span>设备分类占比</span></div></template><div ref="deviceRef" class="chart chart--small" /></el-card>
     </div>
 
     <el-card shadow="never" class="filter-card water-panel"><template #header><div class="card-title"><el-icon><Search /></el-icon><span>报警台账筛选</span></div></template>
@@ -61,7 +61,7 @@
 
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import { BellFilled, Download, List, Monitor, Refresh, RefreshLeft, Search, View } from '@element-plus/icons-vue'
+import { BellFilled, DataAnalysis, Download, List, Monitor, PieChart, Refresh, RefreshLeft, Search, TrendCharts, View } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { saveAs } from 'file-saver'
 import * as echarts from 'echarts'
@@ -168,20 +168,70 @@ onBeforeUnmount(() => { ++loadGeneration; window.removeEventListener('resize', r
 </script>
 
 <style scoped>
-.water-page { min-height: calc(100vh - 84px); padding: 20px; color: #1e293b; background: #f3f7fb; }
-.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
-.page-title { display:flex; align-items:center; gap:12px; }
-.page-title-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:8px; color:#fff; background:#2563eb; }
-.page-heading h2 { margin:0 0 4px; color:#172b4d; font-size:20px; }
-.heading-actions { display:flex; gap:8px; }
-.muted { color:#718096; font-size:13px; }
-.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
-.metric { display:flex; align-items:center; gap:12px; min-height:74px; padding:14px 16px; background:#fff; border:1px solid #e1ebf3; border-radius:8px; box-shadow:0 5px 16px rgba(28,75,110,.05); }
-.metric-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:8px; font-size:20px; }
-.tone-blue { color:#2563eb; background:#e6f4ff; }.tone-orange { color:#d97706; background:#fff7ed; }.tone-cyan { color:#0891b2; background:#ecfeff; }.tone-green { color:#16a34a; background:#f0fdf4; }.tone-red { color:#dc2626; background:#fff1f2; }
-.metric-body { min-width:0; }.metric-body span { display:block; color:#718096; font-size:13px; }.metric-value { display:flex; align-items:baseline; gap:5px; }.metric-value strong { color:#17324d; font-size:24px; }.metric-value small { color:#94a3b8; }
-.chart-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr) minmax(260px,1fr); gap:12px; margin-bottom:16px; }.water-panel { overflow:hidden; border:1px solid #e1ebf3; border-radius:8px; box-shadow:0 5px 16px rgba(28,75,110,.05); }.chart { height:300px; }.chart--small { height:300px; }.trend-card :deep(.el-card__header), .water-panel :deep(.el-card__header) { padding:14px 16px; }.card-title { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#17324d; font-weight:600; }
-.dashboard-error { margin-bottom:16px; }.filter-card { margin-bottom:16px; }.filter-card :deep(.el-form-item) { margin-top:8px; margin-bottom:8px; }.table-card :deep(.el-table) { --el-table-header-bg-color:#f8fafc; --el-table-row-hover-bg-color:#eff6ff; }.table-card :deep(.el-pagination) { justify-content:flex-end; margin-top:16px; }.table-toolbar { display:flex; justify-content:space-between; align-items:center; }
-@media (max-width:1000px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.chart-grid { grid-template-columns:1fr; } }
-@media (max-width:650px) { .page-heading { align-items:flex-start; flex-direction:column; }.metric-grid { grid-template-columns:1fr; }.heading-actions { width:100%; }.heading-actions .el-button { flex:1; } }
+/* 仅在报警页作用域内复用管网数据统计分析的蓝白卡片语言，避免影响其他供水页面。 */
+.water-page {
+  min-height: calc(100vh - 84px);
+  padding: 20px;
+  color: #1e293b;
+  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 45%, #eef2f7 100%);
+}
+.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
+.page-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.page-title-icon {
+  display: grid; place-items: center; flex: 0 0 42px;
+  width: 42px; height: 42px; border-radius: 8px; color: #fff;
+  background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
+  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
+}
+.page-heading h2 { margin: 0 0 4px; font-size: 20px; color: #1e293b; }
+.heading-actions { display: flex; align-items: center; gap: 12px; }
+.muted { color: #64748b; font-size: 13px; }
+
+.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
+.metric {
+  position: static; display: flex; align-items: center; gap: 14px;
+  min-width: 0; padding: 16px 18px; background: #fff;
+  border: 1px solid #e2e8f0; border-radius: 8px;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
+}
+.metric-icon {
+  position: static; top: auto; left: auto; flex: 0 0 42px;
+  display: grid; place-items: center; width: 42px; height: 42px;
+  border-radius: 8px; font-size: 22px;
+}
+.tone-blue { color: #2563eb; background: linear-gradient(135deg, #dbeafe, #eff6ff); }
+.tone-red { color: #dc2626; background: linear-gradient(135deg, #fee2e2, #fff1f2); }
+.metric-body { min-width: 0; }
+.metric-body span { display: block; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: 13px; }
+.metric-value { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
+.metric-value strong { color: #1e293b; font-size: 24px; line-height: 1.2; }
+.metric-value small { margin-left: 0; color: #94a3b8; }
+
+.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
+.trend-card { grid-column: 1 / -1; }
+.water-panel { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04); }
+.chart { height: 320px; }
+.card-title { display: flex; align-items: center; justify-content: flex-start; gap: 8px; color: #1e293b; font-weight: 600; }
+.card-title .el-icon { color: #2563eb; font-size: 18px; }
+.chart-caption { margin-left: auto; font-weight: 400; }
+.chart-card :deep(.el-card__header), .filter-card :deep(.el-card__header), .table-card :deep(.el-card__header) {
+  padding: 14px 18px; border-bottom: 1px solid #e2e8f0;
+}
+.filter-card :deep(.el-card__header) { background: #fbfdff; }
+.dashboard-error, .filter-card { margin-bottom: 16px; }
+.filter-card :deep(.el-form-item) { margin: 8px 16px 8px 0; }
+.filter-card :deep(.el-form-item__label) { color: #475569; }
+.table-card :deep(.el-card__body) { padding-top: 0; }
+.table-card :deep(.el-table) { --el-table-border-color: #e2e8f0; --el-table-header-bg-color: #f8fafc; --el-table-header-text-color: #475569; --el-table-row-hover-bg-color: #eff6ff; }
+.table-card :deep(.el-pagination) { justify-content: flex-end; margin-top: 16px; }
+.table-toolbar { display: flex; align-items: center; gap: 10px; }
+@media (max-width: 1000px) { .chart-grid { grid-template-columns: 1fr; } }
+@media (max-width: 650px) {
+  .water-page { padding: 12px; }
+  .page-heading { align-items: flex-start; flex-direction: column; }
+  .metric-grid { grid-template-columns: 1fr; }
+  .heading-actions { width: 100%; }
+  .heading-actions .el-button { flex: 1; }
+  .chart-caption { margin-left: 0; }
+}
 </style>

tests/waterAlarmLayout.test.mjs

@@ -0,0 +1,34 @@
+import assert from 'node:assert/strict'
+import { readFile } from 'node:fs/promises'
+import test from 'node:test'
+import postcss from 'postcss'
+import { parse } from '@vue/compiler-sfc'
+
+const pagePath = new URL('../src/views/subSystem/waterSupply/components/WaterAlarmPage.vue', import.meta.url)
+const themePath = new URL('../src/views/subSystem/waterSupply/components/waterSupplyPageTheme.scss', import.meta.url)
+
+async function effectiveDeclarations(selector) {
+  const { descriptor } = parse(await readFile(pagePath, 'utf8'))
+  const sharedTheme = await readFile(themePath, 'utf8')
+  const scopedStyle = descriptor.styles.find(style => style.scoped)?.content || ''
+  const declarations = {}
+  // 实际页面在全局共享主题之后加载 scoped 页面样式；同名选择器按顺序覆盖。
+  postcss.parse(`${sharedTheme}\n${scopedStyle}`).walkRules(rule => {
+    if (!rule.selectors.some(item => item.trim() === selector)) return
+    rule.walkDecls(decl => { declarations[decl.prop] = decl.value })
+  })
+  return declarations
+}
+
+test('alarm metric icon remains in flex flow when the shared page theme is loaded', async () => {
+  const icon = await effectiveDeclarations('.metric-icon')
+  const card = await effectiveDeclarations('.metric')
+  assert.equal(icon.position, 'static', '绝对定位会让图标脱离卡片弹性布局，与数字文字重叠')
+  assert.match(card.display || '', /flex/u)
+})
+
+test('alarm filter title keeps its text adjacent to the search icon', async () => {
+  const heading = await effectiveDeclarations('.card-title')
+  assert.equal(heading['justify-content'], 'flex-start', 'space-between 会将标题推到筛选卡片右侧')
+  assert.ok(Number.parseFloat(heading.gap) > 0)
+})