# okr

**Repository Path**: imagine0820/okr

## Basic Information

- **Project Name**: okr
- **Description**: No description available
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2026-04-17
- **Last Updated**: 2026-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OKR 目标管理系统

一套面向企业的 OKR（Objectives and Key Results）目标管理平台，支持目标创建与追踪、上下级对齐、数据看板、评论反馈以及组织与周期管理，帮助团队实现目标对齐与高效协作。

## 技术栈

| 层级 | 技术 | 版本 |
|------|------|------|
| 前端框架 | 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）。每个目标包含标题、进度、权重、评分、进度记录和对齐关系；每个关键结果包含标题、进度、权重和评分。

![img.png](img/okr.png)



### 2. 目标对齐

对齐树视图（vue-okr-tree）以横向树形结构展示目标在组织中的级联关系，支持拖拽、缩放和点击查看详情。

![img.png](img/duiqi.png)


### 3. 评论反馈

用户可以对其他人的 OKR 进行评论，评论包含用户信息和时间戳，便于上下级之间的目标沟通与反馈。

### 4. 数据看板

管理/分析视图，包含：
- **四大指标卡片**：填写率、对齐率、7日更新率、评分率
- **关注项列表**：未填写 OKR、未对齐、进度停滞、进度过低
- **分布图表**：目标数量分布、状态分布、进度分布、评分分布
- **明细数据表**：按人员或部门查看详细数据，支持分页与筛选


<img src="img/board.png" alt="img.png" width="50%" height="50%">

### 6. 部门管理（管理员）

树形结构的部门增删改查，指定部门负责人，添加/移除部门成员。

![img.png](img/department.png)

### 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. 数据库初始化

```bash
# 创建数据库
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. 启动后端

```bash
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. 启动前端

```bash
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 查询问题。

## 构建部署

### 前端构建

```bash
cd front
npm run build
```

构建产物输出到 `front/dist/` 目录，可部署到 Nginx 等 Web 服务器。

### 后端构建

```bash
cd server
mvn clean package -DskipTests
java -jar target/okr-server-1.0.0.jar
```

## 许可证

本项目基于 [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) 开源协议发布。