2026-05-12-period-focus-redesign.md 1.8 KB
周期聚焦重构 — 设计规格
概述
将所有操作页面的周期选择统一为"专注当下"模式：默认进入当前进行中周期，已归档和未开始周期从操作页面移除，改为独立入口访问。
变更清单
1. 新增组件：PeriodBanner
路径：frontend/src/components/PeriodBanner.vue
Props:
periods— 所有周期列表（由父页面加载，通常来自periodApi.list()）modelValue— 当前选中周期 IDshowSwitch— 是否显示切换按钮（默认 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. 路由新增
{ path: 'scores/history', name: 'ScoreHistory', component: () => import('../views/scoring/HistoryView.vue'), meta: { title: '历史绩效' } }
5. 后端
无需改动。现有 API 已支持按 periodId 查询，前端过滤即可。