feat(P2): 实现质量保障类5项功能(无障碍/视觉回归/通知渠道/漏洞扫描/灾备)

## 新增功能 ### 1. 屏幕阅读器兼容性增强（a11y） - 无障碍工具库：src/shared/lib/a11y.ts - aria-live Hook：src/shared/hooks/use-aria-live.ts - a11y 组件：skip-link/visually-hidden/focus-trap/aria-status - 增强 UI：table.tsx 系统性 ARIA role，dialog.tsx aria-modal - 审计文档：docs/accessibility/a11y-audit.md（WCAG 2.1 AA 清单） ### 2. 视觉回归测试 - 测试套件：tests/visual/（homepage + 3 个 dashboard） - 3 视口（desktop/tablet/mobile）× 2 主题（light/dark） - 动态元素遮罩，避免误报 - playwright.config.ts 新增 visual-chromium 项目 - 文档：docs/testing/visual-regression.md ### 3. 短信/微信推送渠道集成 - 新模块：src/modules/notifications/ - 4 个渠道：SMS（阿里云/腾讯云）、WeChat（公众号）、Email（SMTP）、In-App - 分发器按用户偏好并行多渠道发送 - 外部 SDK 动态 import，Mock 模式开发可用 - 文档：docs/notifications/channels.md ### 4. 漏洞扫描 CI 集成 - CI security-scan job：npm audit + Snyk + Trivy FS + OWASP ZAP - 独立工作流 security.yml：每周一深度扫描 + 容器镜像扫描 - 配置：suppressions.json + .trivyignore - 本地脚本：security-scan.sh/ps1 - 文档：docs/security/scanning.md（SLA 分级） ### 5. 灾备方案 - 脚本：backup-verify/backup-offsite-sync/dr-drill/failover/health-check - CI 增强：备份后校验+异地同步，每周灾备演练 - 独立工作流 dr-drill.yml：每周一凌晨 4 点自动演练 - 文档：docs/dr/dr-plan.md（RTO 4h/RPO 24h）+ dr-runbook.md（6 故障场景） ## 验证 - npx tsc --noEmit：0 错误 - npm run lint：0 错误 0 警告
2026-06-17 20:18:29 +08:00
parent b86255f0ea
commit 6585e10c6f
53 changed files with 7491 additions and 37 deletions
--- a/tests/visual/helpers/visual-helpers.ts
+++ b/tests/visual/helpers/visual-helpers.ts
@@ -0,0 +1,104 @@
+/**
+ * 视觉测试通用辅助
+ *
+ * 提供视口切换、主题切换、页面就绪等待以及动态元素遮罩能力,
+ * 用于消除视觉快照中的误报。
+ */
+import type { Locator, Page } from "@playwright/test"
+import { VIEWPORTS, type ThemeName, type ViewportSize } from "../visual.config"
+
+/**
+ * 设置视口尺寸
+ * @param page Playwright Page 实例
+ * @param size 视口标识 desktop | tablet | mobile
+ */
+export async function setViewport(page: Page, size: ViewportSize): Promise<void> {
+  const viewport = VIEWPORTS[size]
+  await page.setViewportSize({ width: viewport.width, height: viewport.height })
+}
+
+/**
+ * 设置主题
+ *
+ * 项目使用 next-themes(attribute="class"),通过在 <html> 上切换 class 实现。
+ * 这里直接操作 localStorage 与 DOM,避免依赖主题切换 UI。
+ *
+ * @param page Playwright Page 实例
+ * @param theme 主题 light | dark
+ */
+export async function setTheme(page: Page, theme: ThemeName): Promise<void> {
+  // next-themes 默认将主题持久化在 localStorage 的 "theme" key
+  await page.addInitScript((themeValue) => {
+    try {
+      window.localStorage.setItem("theme", themeValue)
+    } catch {
+      // 忽略 localStorage 不可用的情况
+    }
+  }, theme)
+  // 若页面已加载,同步切换 DOM class
+  const htmlClass = await page.evaluate(() => document.documentElement.className)
+  const nextClass = theme === "dark" ? `${htmlClass} dark` : htmlClass.replace(/\bdark\b/g, "").trim()
+  await page.evaluate((cls) => {
+    document.documentElement.className = cls
+  }, nextClass)
+}
+
+/**
+ * 等待页面就绪
+ *
+ * 等待 networkidle、字体加载以及主内容渲染完成,
+ * 确保快照稳定。
+ */
+export async function waitForPageReady(page: Page): Promise<void> {
+  await page.waitForLoadState("networkidle")
+  // 等待字体加载完成,避免文字位移
+  await page.evaluate(() => document.fonts.ready)
+  // 给 React hydration 一点缓冲
+  await page.waitForTimeout(300)
+}
+
+/**
+ * 默认需要遮罩的动态元素选择器
+ * - 时间戳
+ * - 用户头像/用户名
+ * - 实时数据
+ */
+const DEFAULT_DYNAMIC_SELECTORS = [
+  "[data-testid='timestamp']",
+  "[data-testid='current-time']",
+  "[data-testid='user-avatar']",
+  "[data-testid='user-name']",
+  "time",
+  "[data-visual-dynamic]",
+]
+
+/**
+ * 遮罩动态元素
+ *
+ * 将指定选择器匹配的元素用纯色块覆盖,
+ * 避免时间戳、用户名等动态内容导致快照误报。
+ *
+ * @param page Playwright Page 实例
+ * @param selectors 额外需要遮罩的选择器(会与默认列表合并)
+ */
+export async function maskDynamicElements(page: Page, selectors: string[] = []): Promise<Locator[]> {
+  const allSelectors = [...new Set([...DEFAULT_DYNAMIC_SELECTORS, ...selectors])]
+  const masks: Locator[] = []
+  for (const selector of allSelectors) {
+    const locator = page.locator(selector)
+    const count = await locator.count()
+    if (count > 0) {
+      masks.push(locator)
+    }
+  }
+  return masks
+}
+
+/**
+ * 生成 toHaveScreenshot 的 mask 选项
+ *
+ * 配合 maskDynamicElements 使用,将动态元素从对比中遮罩。
+ */
+export function buildMaskOption(masks: Locator[]) {
+  return masks.length > 0 ? { mask: masks } : {}
+}