# 绩效管理模块 - UI 交互规范

> **module**: performance
> **doc_type**: UISpec
> **status**: Active
> **owner**: FFOA 开发团队
> **upstream_docs**: 01-prd.md, 02-user-journey.md, 04-state-machine.md
> **last_verified**: 2026-03-19

---

## 导航结构

绩效模块采用二级侧边栏导航，分为**用户菜单**和**管理菜单**两部分。

### 用户菜单（按权限过滤）

| 菜单项 | 路由 | 图标 | 权限要求 |
|--------|------|------|---------|
| 概览 | `/performance` | LayoutDashboard | 无（所有用户可见） |
| 我的 KPI | `/performance/kpi` | Target | 无（所有用户可见） |
| 团队 KPI | `/performance/kpi/team` | Users | `performance:team:read` 或 `performance:cycle:read`（经理/HR） |
| 360 评估 | `/performance/360` | Users | 无（所有用户可见） |

### 管理菜单（权限控制）

| 菜单项 | 路由 | 所需权限 |
|--------|------|---------|
| 配置概览 | `/performance/admin` | `performance:cycle:read` + `performance:settings:manage` |
| 绩效周期 | `/performance/cycles` | `performance:cycle:read` |
| 战略目标 | `/performance/strategic-objectives` | `performance:cycle:read` |
| 结果管理 | `/performance/results/admin` | `performance:result:manage` |
| 校准管理 | `/performance/calibration` | `performance:calibration:read` |
| 统计分析 | `/performance/analytics` | `performance:analytics:read` |
| 等级设置 | `/performance/settings/grades` | `performance:settings:manage` |
| 360 模板 | `/performance/settings/360-templates` | `performance:settings:manage` |

---

## 兼容路由与重定向

| 路由 | 行为 | 说明 |
|------|------|------|
| `/performance/kpi/evaluation` | `router.replace('/performance/kpi/team')` | 旧 KPI 评估页已合并到团队 KPI 页面，保留兼容重定向 |

**不存在的路由**（前端无对应页面，测试不应以这些路由为入口）：
- `/performance/cycles/create` — 创建周期（已改为周期列表页内弹窗）
- `/performance/kpi/indicators` — KPI 指标库（当前 KPI 在我的 KPI 页面行内创建）
- `/performance/results`（非 admin） — 员工结果独立页（结果在概览页和管理页展示）
- `/performance/cycles/:id` — 周期详情独立页（周期操作在管理概览页）

---

## 页面清单

| 页面 | 路由 | 说明 | 角色 |
|------|------|------|------|
| 绩效概览 | `/performance` | 个人绩效仪表板 | 所有用户 |
| 管理概览 | `/performance/admin` | 管理员配置引导与周期推进 | HR |
| 绩效周期 | `/performance/cycles` | 周期列表管理（列表页内弹窗创建周期） | HR |
| 我的 KPI | `/performance/kpi` | 个人 KPI 管理（多阶段） | 所有用户 |
| 团队 KPI | `/performance/kpi/team` | 团队 KPI 审批/评分 | 经理/HR |
| 360 评估 | `/performance/360` | 360 评估双标签页（待我评估 + 我的结果） | 所有用户 |
| 360 评估详情 | `/performance/360/:id` | 评估详情与管理 | HR/经理 |
| 校准管理 | `/performance/calibration` | 周期级校准表格 | HR |
| 校准看板 | `/performance/calibration/:id` | 校准看板（等级分布与调整） | HR |
| 结果管理 | `/performance/results/admin` | 结果发布与导出 | HR |
| 统计分析 | `/performance/analytics` | 部门/公司报表 | HR |
| 战略目标 | `/performance/strategic-objectives` | 战略目标管理 | HR |
| 等级设置 | `/performance/settings/grades` | 绩效等级配置 | HR |
| 360 模板设置 | `/performance/settings/360-templates` | 360 评估模板管理 | HR |

---

## 页面详细规范

### 1. 绩效概览（`/performance`）

**组件**: `UserOverview`

**功能描述**: 个人绩效仪表板，展示当前周期状态、待办任务和最近绩效结果。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 当前周期卡片 | 卡片 | 显示周期名称、状态、日期范围 |
| 待办任务列表 | 列表 | 根据周期阶段动态生成待办项 |
| 最近绩效结果 | 卡片 | 最新一期成绩（等级、分数） |
| 历史对比 | 对比组件 | 本周期 vs 上周期得分对比 |

**待办任务规则**（按周期阶段动态生成）:

| 周期阶段 | 生成的待办项 |
|---------|------------|
| GOAL_SETTING | KPI 设定任务 |
| EVALUATING | 自评任务、360 评估配置 |
| CONFIRMING | 结果确认任务 |

**API 调用**:

| 交互 | API | 结果 |
|------|-----|------|
| 页面加载 | `getCurrentCycle(orgId)` | 获取当前周期 |
| 页面加载 | `getMyKpiAssignments(cycleId)` | 获取 KPI 状态 |
| 页面加载 | `getMyFeedbackTasks()` | 获取待评估 360 任务 |
| 页面加载 | `getMyResults(params)` | 获取绩效结果列表 |
| 确认结果 | `confirmResult(cycleId)` | 确认绩效结果 |
| 申诉 | `appealResult(cycleId, reason)` | 提交申诉（弹窗输入原因） |

---

### 2. 管理概览（`/performance/admin`）

**组件**: `AdminOverview`

**功能描述**: HR 管理员的核心控制面板。选择周期后，展示当前阶段的进度指标，并提供阶段推进按钮。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 周期选择器 | 下拉框 | 选择要管理的周期 |
| 阶段推进按钮 | 按钮 | 根据当前状态显示下一步操作 |
| 进度卡片 | 统计卡片 | 各阶段关键指标 |
| 等级配置区 | 内嵌组件 | DRAFT 阶段可编辑等级配置 |

**各阶段展示内容**:

| 阶段 | 进度指标 | 操作按钮 |
|------|---------|---------|
| DRAFT | 等级配置详情 | 发布周期 |
| GOAL_SETTING | 提交数/草稿数/未开始数、部门分布 | 启动执行 |
| IN_PROGRESS | - | 启动评估 |
| EVALUATING | 自评完成数、经理评完成数、360 完成数、待处理员工列表 | 启动校准 |
| CALIBRATING | 已校准人数、等级分布、部门级分布 | 发布结果 |
| CONFIRMING | 确认进度、申诉情况 | 完成周期 |
| COMPLETED | 平均分、等级分布、完成度统计 | 归档 |

**API 调用**:

| 交互 | API | 结果 |
|------|-----|------|
| 加载周期 | `getCycles(params)` | 渲染周期选择器 |
| GOAL_SETTING 进度 | `getGoalSettingProgress(cycleId)` | 展示目标设定进度 |
| EVALUATING 进度 | `getEvaluationProgress(cycleId)` | 展示评估进度 |
| CALIBRATING 进度 | `getCalibrationProgress(cycleId)` | 展示校准进度 |
| COMPLETED 汇总 | `getCycleResultsSummary(cycleId)` | 展示结果汇总 |
| 编辑等级 | `updateCycle(cycleId, params)` | 更新周期等级配置 |
| 发布周期 | `publishCycle(cycleId)` | DRAFT → GOAL_SETTING |
| 启动执行 | `startExecution(cycleId)` | GOAL_SETTING → IN_PROGRESS |
| 启动评估 | `startEvaluation(cycleId)` | IN_PROGRESS → EVALUATING |
| 启动校准 | `startCalibration(cycleId)` | EVALUATING → CALIBRATING |
| 发布结果 | `startConfirming(cycleId)` | CALIBRATING → CONFIRMING |
| 完成周期 | `completeCycle(cycleId)` | CONFIRMING → COMPLETED |
| 归档 | `archiveCycle(cycleId)` | COMPLETED → ARCHIVED |

---

### 3. 绩效周期管理（`/performance/cycles`）

**功能描述**: 周期列表页，支持父子周期结构。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 搜索框 | 输入框 | 按名称搜索 |
| 状态筛选 | 下拉框 | 按状态筛选 |
| 类型筛选 | 下拉框 | 按类型筛选 |
| 创建周期按钮 | 按钮 | 打开创建弹窗 |
| 周期表格 | 表格 | 周期列表（支持树形展开） |

**表格列定义**:

| 列 | 内容 | 功能 |
|----|------|------|
| 名称 | 周期名称 | 点击进入管理页 |
| 类型 | 周期类型标签 | ANNUAL/SEMI_ANNUAL/QUARTERLY/MONTHLY |
| 日期范围 | startDate - endDate | 格式化显示 |
| 状态 | CycleStatusBadge | 彩色状态徽章 |
| 进度 | 进度条 + 百分比 | 按阶段计算 |
| 操作 | 动作菜单 | 根据当前状态显示可用操作 |

**创建周期弹窗表单**:

| 字段 | 类型 | 验证规则 |
|------|------|---------|
| name | text | 必填 |
| type | select | ANNUAL / SEMI_ANNUAL / QUARTERLY / MONTHLY |
| startDate | date | 必填 |
| endDate | date | 必填，>startDate，随类型自动计算 |
| gradeConfigId | select | 可选，自动选择 isDefault=true 的配置 |
| parentCycleId | select | 可选，创建子周期时选择父周期 |

**日期自动计算逻辑**: 选择类型后自动计算 endDate：
- ANNUAL: startDate + 12 个月 - 1 天
- SEMI_ANNUAL: startDate + 6 个月 - 1 天
- QUARTERLY: startDate + 3 个月 - 1 天
- MONTHLY: startDate + 1 个月 - 1 天

**子周期规则**:
- 父周期不在 ARCHIVED 时可创建子周期
- 子周期继承父周期的 gradeConfigId
- 子周期支持独立状态流转

**API 调用**:

| 交互 | API | 结果 |
|------|-----|------|
| 页面加载 | `getCycles(params)` | 渲染周期列表 |
| 创建周期 | `createCycle(params)` | 新周期出现在列表 |
| 加载等级配置 | `getGradeConfigs(params)` | 填充等级配置下拉框 |
| 删除周期 | `deleteCycle(cycleId)` | 从列表移除 |
| 状态操作 | `publishCycle` / `startExecution` / ... | 状态流转 |

---

### 4. 我的 KPI（`/performance/kpi`）

**功能描述**: 多阶段复合页面。根据周期状态自动切换模式（目标设定 / 执行中 / 评估中 / 只读）。

**阶段模式 (PhaseMode)**:

| 周期状态 | 模式 | 可操作项 |
|---------|------|---------|
| GOAL_SETTING | goalSetting | 创建/编辑/删除 KPI、提交审批、设定依赖 |
| IN_PROGRESS | inProgress | 只读 |
| EVALUATING | evaluating | 自评（打分+完成情况）、配置 360 评估人 |
| CALIBRATING | calibrating | 只读 |
| CONFIRMING | readonly | 只读，可确认结果或申诉 |
| COMPLETED/ARCHIVED | readonly | 只读，仅查看历史结果 |

**KPI 行内编辑表单（goalSetting 模式）**:

| 字段 | 类型 | 说明 |
|------|------|------|
| name | text | KPI 名称 |
| description | text | KPI 描述 |
| weight | number | 权重（0-100，总和需为 100%） |
| unit | text | 单位 |
| baseTarget | text | 基本目标 |
| stretchTarget | text | 挑战目标 |
| dependentUserId | user-picker | 跨部门依赖人（可选） |
| dependencyDescription | text | 依赖描述（选择依赖人后显示） |

**自评表单（evaluating 模式）**:

| 字段 | 类型 | 说明 |
|------|------|------|
| selfScore | number | 自评分（0-100） |
| completionNote | text | 完成情况说明 |

**整体评语区**:

| 字段 | 类型 | 说明 |
|------|------|------|
| comment (self) | textarea | 整体自评评语 |
| comment (manager) | textarea | 经理整体评语（团队 KPI 页填写） |

**360 评估配置区（evaluating 模式）**:
- 创建 360 评估 `createEvaluation360`
- 添加/删除评估人 `addEvaluators` / `removeEvaluation360Evaluator`
- 查看 360 评估汇总 `getEmployee360Summary`

**结果展示区（confirming+ 模式）**:
- 最终等级、总分、KPI 分数、360 分数
- 确认/申诉按钮

**KPI 指南侧边栏**: `KpiGuideSidebar` 组件，展示 KPI 填写最佳实践和示例。

**API 调用**:

| 交互 | API |
|------|-----|
| 加载周期 | `getCurrentCycle(orgId)`, `getCycles(params)` |
| 加载 KPI | `getMyKpiAssignments(params)` |
| 创建/编辑 KPI | `assignKpi(params)`, `updateKpiAssignment(id, params)` |
| 删除 KPI | `deleteKpiIndicator(id)` — 删除当前员工的 KPI assignment 记录，不是全局指标定义 |
| 自评 | `selfEvaluateKpi(id, params)` |
| 保存评语 | `saveOverallEvalComment(params)` |
| 获取评语 | `getOverallEvalComment(cycleId, userId, role)` |
| 提交全部 | `submitAllKpi(cycleId)` |
| 依赖确认 | `confirmKpiDependency(id)`, `rejectKpiDependency(id, reason)` |
| 获取待确认依赖 | `getPendingDependencyConfirmations(cycleId)` |
| 360 配置 | `createEvaluation360`, `addEvaluators`, `removeEvaluation360Evaluator` |
| 360 结果 | `getEmployee360Summary(cycleId, userId)` |
| 结果详情 | `getMyResultByCycle(cycleId)`, `getMyResults(params)` |
| 确认/申诉 | `confirmResult(cycleId)`, `appealResult(cycleId, reason)` |

---

### 5. 团队 KPI（`/performance/kpi/team`）

**功能描述**: 经理查看/审批/评分团队成员 KPI。

**阶段功能**:

| 阶段 | 显示内容 | 可操作项 |
|------|---------|---------|
| GOAL_SETTING | 下属 KPI 列表 + 审批状态 | 批准/拒绝每个 KPI |
| IN_PROGRESS | 下属 KPI 列表 | 无 |
| EVALUATING | 下属 KPI + 自评分 | 输入经理评分和评语 |
| CALIBRATING+ | 下属 KPI + 最终成绩 + 360 结果 | 无 |

**经理评分表单**:

| 字段 | 类型 | 说明 |
|------|------|------|
| score | number | 经理评分（0-100） |
| comment | text | 经理评语 |

**API 调用**:

| 交互 | API |
|------|-----|
| 加载团队 KPI | `getTeamKpiAssignments(params)` |
| 批准 | `approveKpiAssignment(id)` |
| 拒绝 | `rejectKpiAssignment(id, reason)` |
| 经理评分 | `managerEvaluateKpi(id, params)` |
| 保存评语 | `saveOverallEvalComment(params)` |
| 获取评语 | `getOverallEvalComment(cycleId, userId, role)` |
| 360 结果 | `getEmployee360Summary(cycleId, userId)` |

---

### 6. 360 评估（`/performance/360`）

**功能描述**: 双标签视图 —— 待评估任务 + 我的 360 结果。

**标签一：待评估任务**:
- 展示我需要给别人的 360 评估任务列表
- 每个任务卡片包含：被评估人信息、关系类型、截止时间、状态
- 点击进入评估表单

**标签二：我的 360 结果**:
- 按周期展示我收到的 360 评估结果
- 按关系类型分组：SUPERVISOR、PEER、SUBORDINATE、CROSS_FUNCTIONAL
- 按维度展示分数

**反馈表单字段**:

| 字段 | 类型 | 说明 |
|------|------|------|
| scores | Record<dimensionId, number> | 各维度评分 |
| comments | Record<dimensionId, string> | 各维度评语 |
| overallComment | text | 整体反馈 |

**评估维度来源**：必须基于已配置的 360 模板，无模板时禁止发起评估（返回 PERF_E360_014），并引导 HR 先在 `/performance/settings/360-templates` 配置模板。

**API 调用**:

| 交互 | API |
|------|-----|
| 加载任务 | `getMyEvaluation360Tasks()` |
| 加载结果 | `getEmployee360Summary(cycleId, userId)` |
| 提交反馈 | `submitEvaluation360Feedback(taskId, params)` |
| 加载模板 | `get360Templates(params)` |

---

### 7. 360 评估详情（`/performance/360/:id`）

**功能描述**: 查看单个 360 评估的详细信息，管理评估人和状态。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 评估信息 | 详情区 | 被评估人、周期、状态、截止时间 |
| 评估人列表 | 表格 | 评估人、关系类型、完成状态 |
| 操作按钮 | 按钮组 | 启动/完成 |
| 评估结果 | 数据区 | 各维度得分汇总（COMPLETED+） |

**状态操作**:

| 当前状态 | 可操作 |
|---------|--------|
| DRAFT | 添加/删除评估人、启动评估 |
| IN_PROGRESS | 查看进度、完成评估 |
| COMPLETED | 只读（结果评完即可见，无需发布） |

**添加评估人表单**:

| 字段 | 类型 | 说明 |
|------|------|------|
| userId | user-picker | 评估人选择 |
| relationshipType | select | SELF/SUPERVISOR/PEER/SUBORDINATE/CROSS_FUNCTIONAL |

**API 调用**:

| 交互 | API |
|------|-----|
| 加载详情 | `getEvaluation360ById(id)` |
| 加载结果 | `getEvaluation360Results(id)` |
| 启动 | `startEvaluation360(id)` |
| 完成 | `completeEvaluation360(id)` |
| 添加评估人 | `addEvaluation360Evaluators(id, params)` |
| 删除评估人 | `removeEvaluation360Evaluator(evaluatorId)` |

---

### 8. 校准管理（`/performance/calibration`）

**功能描述**: 周期级校准表格，HR 在此调整员工等级。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 周期选择器 | 下拉框 | 仅显示 CALIBRATING 状态的周期（COMPLETED 为业务终态，不可再调整） |
| 校准表格 | 表格 | 员工校准数据（可展开） |
| 等级选择器 | 下拉框 | 行内调整等级（仅 CALIBRATING 时可操作） |
| 备注输入 | 文本框 | 调整原因（必填） |
| 保存按钮 | 按钮 | 保存校准结果（仅 CALIBRATING 时可见） |

**校准表单字段（按员工行）**:

| 字段 | 类型 | 说明 |
|------|------|------|
| calibratedGrade | select | 校准后等级 |
| calibrationNote | text | 校准备注 |

**等级颜色映射**:

| 等级 | 背景色 | 文字色 | 进度条色 |
|------|--------|--------|---------|
| S | #f5f0ff | #722ed1 | #722ED1 |
| A | #e8f7e8 | #00b42a | #00B42A |
| B | #e8f3ff | #3370ff | #3370FF |
| C | #fff7e8 | #ff7d00 | #FF7D00 |
| D | #ffece8 | #f53f3f | #F53F3F |

**API 调用**:

| 交互 | API |
|------|-----|
| 加载周期 | `getCycles(params)` |
| 加载校准数据 | `getCalibrationOverview(cycleId)` |
| 保存调整 | `saveCalibrationAdjustment(params)` |

---

### 9. 校准看板（`/performance/calibration/:id`）

**功能描述**: 校准看板页面，展示等级分布并支持行内调整等级。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 等级分布图 | 图表 | GradeDistributionChart |
| 员工列表 | 表格 | 员工及等级，支持行内调整 |
| 调整日志 | 列表 | 历史调整记录 |

**API 调用**:

| 交互 | API |
|------|-----|
| 加载详情 | `getCalibrationSessionById(id)` |
| 调整等级 | `adjustGrade(params)` — 仅 CALIBRATING 阶段可编辑，COMPLETED 及之后只读 |
| 等级分布 | `getGradeDistribution(id)` |
| 调整日志 | `getAdjustmentLogs(id)` |

---

### 10. 结果管理（`/performance/results/admin`）

**功能描述**: HR 管理员查看、发布和导出全员绩效结果。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 周期筛选 | 下拉框 | 按周期筛选 |
| 等级筛选 | 下拉框 | 按等级筛选 |
| 发布状态筛选 | 下拉框 | 已发布/未发布 |
| 结果表格 | 表格 | 员工结果列表 |
| 批量发布按钮 | 按钮 | 批量发布结果 |
| 导出按钮 | 按钮 | 导出结果 |

**表格列**:

| 列 | 内容 |
|----|------|
| 员工名称 | 员工信息 |
| 部门 | 部门名称 |
| 总分 | 总得分 |
| 等级 | 绩效等级（彩色标签） |
| 发布状态 | 已发布/未发布 |
| 查看状态 | 员工是否已查看 |
| 操作 | 发布/查看详情 |

**API 调用**:

| 交互 | API |
|------|-----|
| 加载结果 | `getResults(params)` |
| 加载周期 | `getCycles(params)` |
| 发布结果 | `publishResults(cycleId, params)` — 批量发布员工明细结果，与管理概览页的 `startConfirming(cycleId)` 是不同操作：管理概览做周期级阶段推进，本页做员工级结果发布。**约束：publishResults 不得绕过周期状态机，仅当周期已进入 CONFIRMING 阶段时才可执行** |
| 导出 | `exportResults(params)` |

---

### 11. 统计分析（`/performance/analytics`）

**功能描述**: 双标签视图 —— 部门报表 + 公司整体报表。

**标签一：部门报表**:
- 周期选择器（仅 COMPLETED 状态）
- 部门选择器
- 部门等级分布图
- 部门统计指标

**标签二：公司报表**:
- 周期选择器
- 公司整体等级分布
- 各部门对比

**部门报表数据**:

| 字段 | 说明 |
|------|------|
| departmentName | 部门名称 |
| totalEmployees | 员工总数 |
| avgScore | 平均分 |
| grades | 等级分布 |

**API 调用**:

| 交互 | API |
|------|-----|
| 加载周期 | `getCycles(params)` |
| 加载部门 | `getDepartments()` |
| 部门报表 | `getDepartmentReport(deptId, cycleId)` |
| 公司报表 | `getCompanyReport(cycleId)` |

---

### 12. 战略目标（`/performance/strategic-objectives`）

**功能描述**: 管理绩效周期的战略目标，可分配到部门和员工。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 周期选择器 | 下拉框 | 按周期筛选 |
| 创建按钮 | 按钮 | 新增战略目标 |
| 目标列表 | 表格 | 战略目标列表（行内编辑） |
| 部门选择器 | 下拉框 | 分配目标到部门 |
| 人员选择器 | @选择器 | InlineMentionPicker 组件 |

**目标表单字段**:

| 字段 | 类型 | 说明 |
|------|------|------|
| name | text | 目标名称 |
| description | text | 目标描述 |
| departmentId | select | 所属部门 |
| assigneeIds | multi-select | 分配给的员工 |
| seq | number | 排序序号 |

**API 调用**:

| 交互 | API |
|------|-----|
| 加载目标 | `getStrategicObjectives(cycleId)` |
| 创建目标 | `createStrategicObjective(params)` |
| 更新目标 | `updateStrategicObjective(id, params)` |
| 删除目标 | `deleteStrategicObjective(id)` |
| 分配目标 | `assignStrategicObjective(id, params)` |

---

### 13. 等级设置（`/performance/settings/grades`）

**功能描述**: 管理绩效等级配置方案。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 配置列表 | 卡片列表 | 等级配置方案 |
| 创建按钮 | 按钮 | 新建等级配置 |
| 设为默认按钮 | 按钮 | 设为默认配置 |
| 删除按钮 | 按钮 | 删除未使用配置 |

**配置表单字段**:

| 字段 | 类型 | 说明 |
|------|------|------|
| name | text | 配置名称 |
| description | text | 配置描述 |
| grades | 数组 | 等级列表 |

**等级定义字段**:

| 字段 | 类型 | 说明 |
|------|------|------|
| code | text | 等级代码（S/A/B/C/D） |
| name | text | 等级名称 |
| minScore | number | 最低分 |
| maxScore | number | 最高分 |
| color | color | 等级颜色 |
| description | text | 等级描述 |

**默认等级配置**:

| 等级 | 名称 | 分数区间 | 颜色 |
|------|------|---------|------|
| S | 卓越 | 90-100 | #8B5CF6 |
| A | 优秀 | 80-89 | #3B82F6 |
| B | 良好 | 70-79 | #10B981 |
| C | 达标 | 60-69 | #F97316 |
| D | 待提升 | 0-59 | #EF4444 |

**API 调用**:

| 交互 | API |
|------|-----|
| 加载列表 | `getGradeConfigs(params)` |
| 创建 | `createGradeConfig(params)` |
| 更新 | `updateGradeConfig(id, params)` |
| 删除 | `deleteGradeConfig(id)` |
| 设为默认 | `setDefaultGradeConfig(id)` |

---

### 14. 360 模板设置（`/performance/settings/360-templates`）

**功能描述**: 管理 360 评估模板，定义评估维度和可用关系类型。

**页面元素**:

| 元素 | 类型 | 说明 |
|------|------|------|
| 模板列表 | 卡片列表 | 360 模板列表 |
| 创建按钮 | 按钮 | 新建模板 |
| 设为默认按钮 | 按钮 | 设为默认模板 |
| 删除按钮 | 按钮 | 删除模板 |

**模板表单字段**:

| 字段 | 类型 | 说明 |
|------|------|------|
| name | text | 模板名称 |
| description | text | 模板描述 |
| dimensions | 数组 | 评估维度列表 |
| relationshipTypes | multi-select | 可用关系类型 |

**维度定义字段**:

| 字段 | 类型 | 说明 |
|------|------|------|
| name | text | 中文名称 |
| nameEn | text | 英文名称 |
| description | text | 中文描述 |
| descriptionEn | text | 英文描述 |

**可用关系类型**:
- SELF（自评）
- SUPERVISOR（经理）
- PEER（同级）
- SUBORDINATE（下级）
- CROSS_FUNCTIONAL（跨部门）

**API 调用**:

| 交互 | API |
|------|-----|
| 加载列表 | `get360Templates(params)` |
| 创建 | `create360Template(params)` |
| 更新 | `update360Template(id, params)` |
| 删除 | `delete360Template(id)` |
| 设为默认 | `setDefault360Template(id)` |

---

## 公共组件

| 组件 | 文件 | 用途 |
|------|------|------|
| PageHeader | `_components/PageHeader.tsx` | 统一页面标题、搜索、操作按钮 |
| UserOverview | `_components/UserOverview.tsx` | 个人绩效概览 |
| AdminOverview | `_components/AdminOverview.tsx` | 管理员概览 |
| CycleStatusBadge | `_components/CycleStatusBadge.tsx` | 周期状态彩色徽章 |
| CycleProgressStepper | `_components/CycleProgressStepper.tsx` | 周期进度步骤条（8阶段） |
| PerformanceStatCard | `_components/PerformanceStatCard.tsx` | 统计数据卡片 |
| GradeDistributionChart | `_components/GradeDistributionChart.tsx` | 等级分布图表 |
| CalibrationBoard | `_components/CalibrationBoard.tsx` | 校准看板 |
| SetupCard | `_components/SetupCard.tsx` | 配置引导卡片 |
| KpiGuideSidebar | `kpi/_components/KpiGuideSidebar.tsx` | KPI 填写指南 |
| InlineMentionPicker | `kpi/_components/InlineMentionPicker.tsx` | @人员选择器 |

---

## 国际化与文案规范

- 所有用户可见文案使用 i18n key，不允许硬编码
- 动态内容使用插值，不拼接字符串
- 日期/数字必须本地化格式化
- i18n key 命名规范：`performance.{feature}.{element}`
- 翻译文件：`frontend/src/locales/performance/zh.ts`（中文）、`en.ts`（英文）

## 状态反馈

| 操作 | 成功反馈 | 失败反馈 |
|------|----------|----------|
| 创建/更新 | Toast: 操作成功 | Toast: 错误信息 |
| 删除 | 确认弹窗 → Toast: 删除成功 | Toast: 错误信息 |
| 状态流转 | Toast: 操作成功 + 状态刷新 | Toast: 错误信息 |
| 提交评估 | Toast: 提交成功 | Toast: 错误信息 |

## 响应式设计

| 断点 | 布局调整 |
|------|----------|
| < 768px | 卡片单列，表格横向滚动 |
| 768px - 1024px | 卡片两列，简化显示 |
| > 1024px | 完整布局，卡片三列 |

---

## 页面状态规范

> 所有页面必须处理以下 4 种状态，不得只实现正常态。

### 加载态

- 所有数据请求期间展示 Skeleton 加载占位
- 表格使用行级 Skeleton，卡片使用块级 Skeleton
- 避免全屏 Loading 遮罩，优先局部加载

### 空数据态

| 页面 | 空数据条件 | 展示内容 |
|------|-----------|---------|
| 我的 KPI | 当前周期无 KPI | 引导文案"暂无 KPI，点击新增开始" + 新增按钮 |
| 团队 KPI | 无下属或下属无 KPI | "暂无团队 KPI 数据" |
| 360 评估 | 无待评估任务 | "暂无待评估任务" |
| 校准看板 | 周期无评估数据 | "当前周期暂无评估数据，请确认评估阶段已完成" |
| 统计分析 | 无已完成周期 | "暂无统计数据，请先完成至少一个绩效周期" |
| 周期列表 | 无周期 | "暂无绩效周期，点击创建" + 创建按钮 |
| 等级配置 | 无配置 | "暂无等级配置，点击创建" + 创建按钮 |
| 360 模板 | 无模板 | "暂无评估模板，点击创建" + 创建按钮 |
| 战略目标 | 无目标 | "暂无战略目标，点击创建" + 创建按钮 |
| 结果管理 | 无结果数据 | "当前周期暂无绩效结果" |

### 无权限态

| 场景 | 展示方式 |
|------|---------|
| 侧边栏菜单 | 无权限的管理菜单项不显示 |
| 直接访问管理页 URL | 重定向到个人概览页或显示 403 提示 |
| 经理功能（非经理访问） | 团队 KPI 入口不显示 |
| API 返回 403 | Toast 提示"无权限执行此操作" |

### 错误态

| 错误类型 | 展示方式 |
|---------|---------|
| 网络错误 | Toast 提示"网络错误，请稍后重试" + 重试按钮 |
| API 400（参数错误） | 表单字段级错误提示 |
| API 409（状态冲突） | Toast 提示具体冲突原因（如"当前阶段不允许此操作"） |
| API 500（服务器错误） | Toast 提示"服务器异常，请稍后重试" |
| 表单验证失败 | 字段下方红色提示文字，阻止提交 |

### 输入验证规则

| 字段 | 验证规则 |
|------|---------|
| 周期名称 | 必填，最长 100 字符 |
| KPI 名称 | 必填，最长 200 字符 |
| KPI 权重 | 必填，1-100 整数，所有 KPI 权重总和 = 100 |
| KPI 描述 | 可选，最长 1000 字符 |
| 评分 | 必填，0-100 数值 |
| 评语 | 可选，最长 2000 字符 |
| 整体评语 | 可选，最长 5000 字符 |
| 驳回/申诉/调整原因 | 必填，最少 10 字符 |
| 等级代码 | 必填，最长 10 字符，同一配置内唯一 |
| 等级名称 | 必填，最长 50 字符 |
| 分数区间 | 必填，min < max，不能与其他等级重叠，需覆盖 0-100 |

---

**创建时间**: 2025-12-25
**更新时间**: 2026-03-19
**版本**: v4.1