6585e10c6f
## 新增功能 ### 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 警告
132 lines
3.0 KiB
TypeScript
132 lines
3.0 KiB
TypeScript
import * as React from "react"
|
|
|
|
import { cn } from "@/shared/lib/utils"
|
|
|
|
const Table = React.forwardRef<
|
|
HTMLTableElement,
|
|
React.HTMLAttributes<HTMLTableElement>
|
|
>(({ className, role = "table", ...props }, ref) => (
|
|
<div className="relative w-full overflow-auto">
|
|
<table
|
|
ref={ref}
|
|
role={role}
|
|
className={cn("w-full caption-bottom text-sm", className)}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
))
|
|
Table.displayName = "Table"
|
|
|
|
const TableHeader = React.forwardRef<
|
|
HTMLTableSectionElement,
|
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
>(({ className, role = "rowgroup", ...props }, ref) => (
|
|
<thead
|
|
ref={ref}
|
|
role={role}
|
|
className={cn("[&_tr]:border-b", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableHeader.displayName = "TableHeader"
|
|
|
|
const TableBody = React.forwardRef<
|
|
HTMLTableSectionElement,
|
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
>(({ className, role = "rowgroup", ...props }, ref) => (
|
|
<tbody
|
|
ref={ref}
|
|
role={role}
|
|
className={cn("[&_tr:last-child]:border-0", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableBody.displayName = "TableBody"
|
|
|
|
const TableFooter = React.forwardRef<
|
|
HTMLTableSectionElement,
|
|
React.HTMLAttributes<HTMLTableSectionElement>
|
|
>(({ className, role = "rowgroup", ...props }, ref) => (
|
|
<tfoot
|
|
ref={ref}
|
|
role={role}
|
|
className={cn(
|
|
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableFooter.displayName = "TableFooter"
|
|
|
|
const TableRow = React.forwardRef<
|
|
HTMLTableRowElement,
|
|
React.HTMLAttributes<HTMLTableRowElement>
|
|
>(({ className, role = "row", ...props }, ref) => (
|
|
<tr
|
|
ref={ref}
|
|
role={role}
|
|
className={cn(
|
|
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableRow.displayName = "TableRow"
|
|
|
|
const TableHead = React.forwardRef<
|
|
HTMLTableCellElement,
|
|
React.ThHTMLAttributes<HTMLTableCellElement>
|
|
>(({ className, role = "columnheader", ...props }, ref) => (
|
|
<th
|
|
ref={ref}
|
|
role={role}
|
|
className={cn(
|
|
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableHead.displayName = "TableHead"
|
|
|
|
const TableCell = React.forwardRef<
|
|
HTMLTableCellElement,
|
|
React.TdHTMLAttributes<HTMLTableCellElement>
|
|
>(({ className, role = "cell", ...props }, ref) => (
|
|
<td
|
|
ref={ref}
|
|
role={role}
|
|
className={cn(
|
|
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableCell.displayName = "TableCell"
|
|
|
|
const TableCaption = React.forwardRef<
|
|
HTMLTableCaptionElement,
|
|
React.HTMLAttributes<HTMLTableCaptionElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<caption
|
|
ref={ref}
|
|
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableCaption.displayName = "TableCaption"
|
|
|
|
export {
|
|
Table,
|
|
TableHeader,
|
|
TableBody,
|
|
TableFooter,
|
|
TableHead,
|
|
TableRow,
|
|
TableCell,
|
|
TableCaption,
|
|
}
|