OKR 目标管理系统
一套面向企业的 OKR（Objectives and Key Results）目标管理平台，支持目标创建与追踪、上下级对齐、数据看板、评论反馈以及组织与周期管理，帮助团队实现目标对齐与高效协作。
github: github.com/zhouwenjun-…
gitee: gitee.com/imagine0820…
技术栈
| 层级 | 技术 | 版本 |
|---|---|---|
| 前端框架 | Vue 2 + Vue Router 3 + Vuex 3 | 2.7.16 |
| 图表 | ECharts 5 + vue-echarts | 5.6.0 |
| 对齐树 | vue-okr-tree | 自定义仓库 |
| HTTP 客户端 | Axios | 1.15.0 |
| 前端构建 | Vue CLI 5 | 5.0.8 |
| 后端框架 | Spring Boot | 3.2.5 |
| 后端语言 | Java | 17 |
| ORM | MyBatis-Plus | 3.5.7 |
| 安全认证 | Spring Security + JWT (jjwt) | 0.12.5 |
| 数据库 | MySQL | 8.0 |
| 密码加密 | BCrypt | - |
| 工具库 | Lombok | - |
功能模块
1. OKR 管理
创建、编辑、删除目标（Objective）和关键结果（Key Result）。每个目标包含标题、进度、权重、评分、进度记录和对齐关系；每个关键结果包含标题、进度、权重和评分。
2. 目标对齐
对齐树视图（vue-okr-tree）以横向树形结构展示目标在组织中的级联关系，支持拖拽、缩放和点击查看详情。
3. 评论反馈
用户可以对其他人的 OKR 进行评论，评论包含用户信息和时间戳，便于上下级之间的目标沟通与反馈。
4. 数据看板
管理/分析视图，包含：
- 四大指标卡片：填写率、对齐率、7日更新率、评分率
- 关注项列表：未填写 OKR、未对齐、进度停滞、进度过低
- 分布图表：目标数量分布、状态分布、进度分布、评分分布
- 明细数据表：按人员或部门查看详细数据，支持分页与筛选
6. 部门管理（管理员）
树形结构的部门增删改查，指定部门负责人，添加/移除部门成员。
7. 周期管理（管理员）
创建/编辑 OKR 周期（如"2025 Q1"），归档已结束的周期。
8. 用户管理（管理员）
创建用户、编辑用户信息、查看上下级关系、分配到部门。
项目结构
okr/
├── front/ # Vue 2 前端
│ ├── src/
│ │ ├── api/ # API 模块（auth, objective, keyResult, comment, period, department, user, dashboard, alignment）
│ │ ├── components/
│ │ │ ├── modals/ # ObjectiveModal, KrModal, ProgressModal, AlignModal, UserEditModal
│ │ │ ├── dashboard/ # MetricCard, AttentionItem, DistributionCharts, DetailsTable
│ │ │ ├── AppHeader.vue # 顶部导航栏
│ │ │ ├── Sidebar.vue # 左侧边栏（用户层级 + 部门树）
│ │ │ ├── OkrCard.vue # OKR 目标卡片
│ │ │ ├── KeyResult.vue # 关键结果行组件
│ │ │ ├── Comments.vue # 评论区
│ │ │ ├── AlignmentNode.vue # 对齐树节点
│ │ │ ├── AlignPopover.vue # 对齐信息悬浮弹窗
│ │ │ ├── Toast.vue # 通知提示
│ │ │ └── DeptNode.vue # 部门树节点
│ │ ├── store/
│ │ │ └── modules/ # Vuex 模块（auth, user, okr, comment, alignment, department, dashboard）
│ │ ├── views/
│ │ │ ├── LoginView.vue # 登录页
│ │ │ ├── OkrView.vue # OKR 列表页
│ │ │ ├── AlignmentView.vue # 对齐树视图
│ │ │ ├── DashboardView.vue # 数据看板
│ │ │ ├── SystemManageView.vue # 管理后台：部门 + 周期管理
│ │ │ ├── DepartmentManageView.vue # 部门树增删改查
│ │ │ └── PeriodManageView.vue # 周期增删改查 + 归档
│ │ ├── router/index.js # 路由定义 + 认证守卫
│ │ ├── main.js # 应用入口
│ │ └── App.vue # 根组件
│ ├── public/index.html
│ ├── vue.config.js # 开发服务器代理配置
│ └── package.json
│
├── server/ # Spring Boot 后端
│ ├── src/main/java/com/okr/
│ │ ├── config/ # SecurityConfig, CorsConfig, MybatisPlusConfig
│ │ ├── security/ # JwtTokenProvider, JwtAuthFilter, UserDetailsServiceImpl
│ │ ├── controller/ # AuthController, ObjectiveController, KeyResultController, CommentController, PeriodController, DepartmentController, UserController, DashboardController, AlignmentController
│ │ ├── service/ # 业务逻辑层
│ │ ├── entity/ # 实体类（OkrObjective, OkrKeyResult, OkrPeriod, OkrComment, SysUser, SysDepartment）
│ │ ├── dto/ # 请求/响应 DTO
│ │ ├── mapper/ # MyBatis-Plus Mapper 接口
│ │ └── common/ # Result（统一响应包装）, GlobalExceptionHandler
│ ├── src/main/resources/
│ │ ├── application.yml # 主配置
│ │ └── application-local.yml # 本地覆盖配置
│ ├── sql/
│ │ └── V1__init.sql # 完整数据库 Schema + 种子数据
│ └── pom.xml
│
├── openspec/ # OpenSpec 变更管理文档
├── tasks/ # PRD 任务文件
├── .claude/ # Claude Code 配置
└── .gitignore
快速开始
环境要求
- Java 17+
- Maven 3.6+
- Node.js 16+
- MySQL 8.0+
1. 数据库初始化
# 创建数据库
mysql -u root -p -e "CREATE DATABASE okr_system CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci;"
# 导入 Schema 和种子数据
mysql -u root -p okr_system < server/sql/V1__init.sql
2. 启动后端
cd server
# （可选）创建 application-local.yml 配置本地数据库连接
# spring:
# datasource:
# url: jdbc:mysql://127.0.0.1:3306/okr_system?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&useSSL=false
# username: root
# password: your_password
mvn spring-boot:run
后端启动在 http://localhost:8080
3. 启动前端
cd front
npm install
npm run serve
前端开发服务器启动在 http://localhost:8081，`/api` 请求自动代理到后端 8080 端口。
4. 访问系统
浏览器打开 http://localhost:8081，使用种子数据中的账号登录。
认证与安全
- JWT 无状态认证：登录后返回 JWT 令牌，前端存储在 localStorage，所有请求携带
Authorization: Bearer <token> - 令牌有效期：24 小时（86400000ms）
- 密码加密：BCrypt 哈希
- 权限控制：
ROLE_ADMIN和ROLE_USER，管理员接口使用@PreAuthorize("hasRole('ADMIN')") - 数据所有权：目标和关键结果仅所有者可修改
- CORS：允许
localhost:*来源 - 全局异常处理：统一
Result<>错误响应（401、403、400、500）
开发说明
前端代理
开发环境下，前端通过 vue.config.js 配置代理，将 /api 请求转发到后端 http://localhost:8080，避免跨域问题。
自动填充
MyBatis-Plus 自动填充 created_at 和 updated_at 字段。
对齐树优化
ObjectiveService.getAlignmentTree() 使用批量加载优化，避免 N+1 查询问题。
构建部署
前端构建
cd front
npm run build
构建产物输出到 front/dist/ 目录，可部署到 Nginx 等 Web 服务器。
后端构建
cd server
mvn clean package -DskipTests
java -jar target/okr-server-1.0.0.jar
许可证
本项目基于 Apache License 2.0 开源协议发布。
