OKR 可视化系统

专为个人开发者、独立创作者和初创团队打造的目标管理工具

版本：v1.0.0

---

项目简介

OKR可视化系统是一款桌面端的目标与关键结果（Objectives and Key Results）管理软件。它专为熟悉OKR理念的资深玩家设计，提供理性、专业的数据可视化体验，帮助个人和小团队高效管理目标、追踪进度、识别风险。

核心特性

• 完整OKR架构：周期 → 目标 → 关键结果，层级清晰
• 专业数据可视化：仪表盘、燃尽图、雷达图，一目了然
• 无摩擦跟进：极简进度更新，仅需"当前数值 + 备注 + 负责人"
• 本地存储：数据存储在本地，安全可靠，离线可用
• 深色主题：护眼设计，适合长时间使用

快速开始

环境要求

• Node.js >= 18.0.0
• npm >= 9.0.0

功能模块

1. 仪表盘 (Dashboard)

• 整体OKR健康度概览
• 核心指标卡片：完成度、目标数、KR数、风险项
• 进度燃尽图：理想进度 vs 实际进度
• 目标完成雷达图：多维度对比
• 目标进度概览：快速了解各目标状态

2. 周期管理 (Cycles)

• 创建/编辑/删除OKR周期（通常以季度为单位）
• 周期切换
• 周期统计数据

3. 目标与KR管理 (Objectives & Key Results)

• 创建/编辑/删除目标
• 为每个目标添加关键结果（KR）
• KR进度更新（当前数值 + 备注 + 更新人）
• 可视化进度条与风险标识

4. 数据分析 (Analytics)

• 进度趋势图
• KR风险分布
• 目标完成度对比
• 负责人工作量分析

技术架构

层级	技术选型
前端框架	React 18 + TypeScript
构建工具	Vite
状态管理	Zustand (持久化)
UI样式	Tailwind CSS
图表库	Recharts
日期处理	date-fns
数据存储	LocalStorage

项目结构

src/
├── components/           # UI组件
│   ├── Layout.tsx       # 布局组件（侧边栏 + 主内容）
│   ├── Dashboard.tsx    # 仪表盘
│   ├── CycleManager.tsx # 周期管理
│   ├── ObjectiveManager.tsx # 目标与KR管理
│   └── Analytics.tsx    # 数据分析
├── store/
│   └── useStore.ts      # Zustand状态管理
├── types/
│   └── index.ts         # TypeScript类型定义
├── App.tsx              # 应用入口
├── main.tsx             # React入口
└── index.css            # 全局样式

设计理念

极简进度更新

每次进度更新仅需三个字段：

1. 当前数值：KR的最新完成值
2. 备注：简短说明（可选）
3. 更新人：记录谁做了更新

风险暴露机制

系统自动计算并标识三种风险等级：

• 🟢 健康：进度与时间进度差距 ≤ 10%
• 🟡 需关注：进度与时间进度差距 10-25%
• 🔴 有风险：进度与时间进度差距 > 25%

数据说明

数据存储

所有数据存储在浏览器的 LocalStorage 中，键名为 okr-storage。

_{专业数据可视化工具 🎯}