# 周期聚焦重构 — 设计规格

## 概述

将所有操作页面的周期选择统一为"专注当下"模式：默认进入当前进行中周期，已归档和未开始周期从操作页面移除，改为独立入口访问。

## 变更清单

### 1. 新增组件：PeriodBanner

路径：`frontend/src/components/PeriodBanner.vue`

Props:
- `periods` — 所有周期列表（由父页面加载，通常来自 `periodApi.list()`）
- `modelValue` — 当前选中周期 ID
- `showSwitch` — 是否显示切换按钮（默认 true）

Emits:
- `update:modelValue` — 切换周期时触发

行为：
- 过滤出进行中周期（status != 'ARCHIVED'）
- 默认选中当前生效的周期
- 展示彩色横幅：状态图标 + 周期名 + 日期区间 + 状态标签
- 多个进行中周期时右侧显示切换下拉
- 横幅颜色随周期状态变化

### 2. 新增页面：历史记录

路由：`/scores/history`

组件：`frontend/src/views/scoring/HistoryView.vue`

布局：左侧已归档周期列表 + 右侧选中周期的绩效详情（只读）

API：复用 `GET /api/scores/my?periodId=xxx`

### 3. 修改页面（6 处）

| 页面 | 改动 |
|------|------|
| MyOkrView | 替换 chip 选择器 → PeriodBanner；过滤掉已归档/未开始 |
| TeamOkrView | 同上 |
| ScoringListView | 替换 el-select → PeriodBanner；右上角「历史记录」按钮 |
| MyResultView | 替换 el-select → PeriodBanner；右上角「历史记录」按钮 |
| FeedbackView | 替换周期选择 → PeriodBanner |
| PeriodListView | 不变（管理员全集视图） |

### 4. 路由新增

```javascript
{ path: 'scores/history', name: 'ScoreHistory', component: () => import('../views/scoring/HistoryView.vue'), meta: { title: '历史绩效' } }
```

### 5. 后端

无需改动。现有 API 已支持按 `periodId` 查询，前端过滤即可。