Shanmanoid/CADENCE
GitHub: Shanmanoid/CADENCE
面向技术管理者的工程健康仪表盘作品集项目，以模拟数据展示 PR 速度、代码审查深度、事件响应等团队健康指标，演示多视图应用架构和数据密集型 UI 设计的最佳实践。
Stars: 0 | Forks: 0
# Cadence
面向技术管理者的工程健康平台。PR 速度、代码审查深度、事件响应——一目了然。
**在线演示：** [cadence-swart-three.vercel.app](https://cadence-swart-three.vercel.app)
## 项目简介
Cadence 是一个虚构的 SaaS 可观测性工具，专为工程经理和技术主管设计。它呈现了有价值的团队健康指标——代码审查模式、待命疲劳度、事件响应、PR 流动——而没有典型项目管理仪表盘的嘈杂。
这是一个作品集项目。所有数据均为模拟数据（确定性、种子化生成），无后端，无身份验证。
## 六大视图
- **Overview (总览)** — 一目了然的团队健康状况（4 项指标 + 图表 + PR 队列 + 活动时间线 + 热力图 + 待命面板）
- **Team (团队)** — 包含个人统计数据的工程师名册（PR 数、代码审查数、待命时长）
- **Pull Requests (拉取请求)** — 完整的 PR 历史（600 条记录）+ 速度分析 + 尺寸分布
- **Incidents (事件)** — 事件日志（150 条记录）+ 严重程度细分 + 单服务分析
- **On-call (待命)** — 包含班次详情面板的月度日历
- **Settings (设置)** — 主题 + 密度偏好设置（持久化）
附加功能：向下钻取抽屉（工程师 / PR / 事件），支持跨 768 个实体模糊搜索和最近项的 Cmd+K 命令面板。
## 设计说明
- **美学风格：** 终端 / 彭博社风格的编辑式设计。以 JetBrains Mono 为主字体，默认深色主题。
- **无冗余：** 无渐变色、无 rounded-full、无 transforms、无装饰性图标、无动画计数器。信息密度优于装饰。
- **数据诚实：** 工作负载指标使用中位数（对异常值具有鲁棒性）而非平均值。PR 时长层级符合现实。模拟数据包含叙事——工程经理 Yunus Huseynkhanov 的自主创建 PR 数量低，但审查数量高（在 UI 中作为刻意设计的“EM 特征”可见）。
## 技术栈
- Next.js 16 (App Router，路由组，ImageResponse)
- React 19
- Tailwind 4 (`@theme` token，`[data-theme]` 层叠覆盖)
- TypeScript strict
- Zustand (抽屉状态，主题 + 密度偏好设置，命令面板状态)
- Recharts (为 /overview 和 /prs 图表懒加载)
- cmdk (命令面板)
## 模拟数据
通过 `mulberry32` 伪随机数生成器 (PRNG) 和种子 `SEED = 0xCADECE` 确定性生成。验证脚本确保在重新生成时保持不变量。
```
npm run validate:mock
# 18/18 ✓
```
数据快照：
- 2 个团队（Platform / Product）的 12 名工程师
- 180 天内的 600 个 PR
- 150 个具有严重程度层级 (P1–P4) 的事件
- 28 个待命班次（过去 + 未来 14 天）
- 2,160 条每日活动指标
- 50 条活动时间线事件
## 本地开发
```
npm install
npm run dev
# http://localhost:3030
```
质量关卡：
```
npm run typecheck
npm run lint
npm run build
npm run validate:mock
```
## 可访问性
Lighthouse 可访问性目标：所有 6 条路由均达到 **100/100**。
- 全程支持键盘导航（抽屉、调色板、可排序表格）
- ARIA：切换按钮上的 `aria-pressed`，可排序表头上的 `aria-sort`，导航上的 `aria-current`，抽屉上的 `aria-modal`
- 用于抽屉和调色板的原生 `
标签：API集成, Mutation, Next.js 16, On-call管理, PR速度, React 19, SaaS仪表盘, Tailwind 4, TypeScript, UI/UX设计, Zustand, 事故响应, 代码审查深度, 代码示例, 信息密度, 可观测性, 可视化, 命令面板, 团队健康度监控, 安全插件, 工程效能, 技术管理, 技术经理, 数据分析, 无后端, 暗黑主题, 模拟数据, 模糊搜索, 研发效能平台, 终端风格, 自动化攻击, 项目组合