K12C/3-task-K12C.md

# 开发任务文档 | K12C

**项目**：教师岗位胜任力管理 Demo 原型
**版本**：v1.0
**状态**：待开发

---

## 1. 整体规划

### 1.1 技术选型

| 技术 | 选择 | 理由 |
|------|------|------|
| 前端框架 | React + Vite | 快速开发、热更新、组件化 |
| UI 组件库 | Tailwind CSS | 现代化样式、响应式 |
| 图表库 | Recharts | 雷达图、柱状图 |
| 路由 | React Router | 页面跳转 |
| 状态管理 | Zustand | 轻量级、全局状态 |

### 1.2 项目结构

```
k12c-demo/
├── public/
│   └── index.html
├── src/
│   ├── components/          # 通用组件
│   │   ├── Layout/
│   │   ├── Navbar/
│   │   ├── RadarChart/
│   │   ├── ScoreCard/
│   │   └── Button/
│   ├── pages/              # 页面
│   │   ├── Login/
│   │   ├── RoleSelect/
│   │   ├── Teacher/        # 教师端
│   │   │   ├── Profile/    # 能力画像
│   │   │   ├── Suggestions/# AI建议
│   │   │   └── PDP/        # 发展计划
│   │   ├── Manager/       # 管理者端
│   │   │   └── Dashboard/  # 管理驾驶舱
│   │   └── Shared/         # 共享页面
│   ├── data/               # 模拟数据
│   │   ├── teachers.ts
│   │   ├── competencies.ts
│   │   └── evaluations.ts
│   ├── hooks/              # 自定义Hooks
│   ├── styles/            # 全局样式
│   ├── App.tsx
│   └── main.tsx
├── package.json
└── vite.config.ts
```

---

## 2. 页面清单（25页）

### 2.1 入口与导航（3页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 1 | 登录页 | `/login` | 账号密码输入、记住登录 |
| 2 | 角色选择页 | `/select-role` | 选择进入：学科教师/班主任/管理者 |
| 3 | 首页/仪表盘 | `/` | 欢迎页、快捷入口、待办事项 |

### 2.2 教师端（10页）

#### 能力画像模块（4页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 4 | 能力画像-概览 | `/teacher/profile` | 五维雷达图 + 综合得分 |
| 5 | 能力画像-专业知识 | `/teacher/profile/knowledge` | 专业知识维度详情 |
| 6 | 能力画像-教学能力 | `/teacher/profile/teaching` | 教学设计与实施详情 |
| 7 | 能力画像-协作沟通 | `/teacher/profile/collaboration` | 协作沟通维度详情 |
| 8 | 能力画像-数字技术 | `/teacher/profile/digital` | 数字技术维度详情 |
| 9 | 能力画像-持续发展 | `/teacher/profile/growth` | 持续发展维度详情 |

#### AI 发展建议模块（2页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 10 | AI 建议-概览 | `/teacher/suggestions` | AI 生成的个性化建议卡片 |
| 11 | AI 建议-详情 | `/teacher/suggestions/:id` | 单条建议的详细内容与资源 |

#### 个人发展计划（PDP）模块（3页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 12 | PDP-列表 | `/teacher/pdp` | 个人发展计划列表 |
| 13 | PDP-创建 | `/teacher/pdp/create` | 创建新的发展计划 |
| 14 | PDP-详情 | `/teacher/pdp/:id` | 查看/编辑计划详情与进度 |

#### 自评模块（1页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 15 | 自评问卷 | `/teacher/evaluate` | 在线填写自评问卷 |

### 2.3 管理者端（10页）

#### 管理驾驶舱模块（5页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 16 | 驾驶舱-概览 | `/manager/dashboard` | 全校胜任力热力图、关键指标 |
| 17 | 驾驶舱-学科对比 | `/manager/dashboard/subject` | 各学科教师胜任力对比 |
| 18 | 驾驶舱-年级分析 | `/manager/dashboard/grade` | 各年级胜任力分布 |
| 19 | 驾驶舱-能力排名 | `/manager/dashboard/ranking` | 教师能力排行榜 |
| 20 | 驾驶舱-四象限 | `/manager/dashboard/quadrant` | 能力-成果关联分析 |

#### 人才管理模块（4页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 21 | 人才-高潜教师 | `/manager/talent/potential` | 高潜教师识别与详情 |
| 22 | 人才-待提升 | `/manager/talent/pending` | 待提升教师列表 |
| 23 | 人才-标杆教师 | `/manager/talent/best` | 标杆案例展示 |
| 24 | 人才-配置建议 | `/manager/talent/assign` | 岗位配置智能推荐 |

#### 评估管理（1页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 25 | 评估管理 | `/manager/evaluation` | 发起评估、查看回收进度 |

### 2.4 共享页面（2页）

| 序号 | 页面 | 路由 | 功能描述 |
|------|------|------|----------|
| 26 | 胜任力模型说明 | `/model` | 展示五维胜任力定义与岗位配置 |
| 27 | 设置 | `/settings` | 个人信息、通知设置 |

---

## 3. 组件清单

### 3.1 通用组件

| 组件名 | 说明 | 状态 |
|--------|------|------|
| `Button` | 按钮（primary/secondary/ghost） | ⬜ |
| `Card` | 卡片容器 | ⬜ |
| `Badge` | 徽章标签 | ⬜ |
| `Avatar` | 头像 | ⬜ |
| `Input` | 输入框 | ⬜ |
| `Select` | 下拉选择 | ⬜ |
| `Modal` | 模态框 | ⬜ |
| `Toast` | 消息提示 | ⬜ |
| `Loading` | 加载状态 | ⬜ |
| `Empty` | 空状态 | ⬜ |

### 3.2 业务组件

| 组件名 | 说明 | 状态 |
|--------|------|------|
| `Navbar` | 顶部导航栏 | ⬜ |
| `Sidebar` | 侧边栏菜单 | ⬜ |
| `RadarChart` | 五维雷达图 | ⬜ |
| `BarChart` | 柱状图 | ⬜ |
| `Heatmap` | 热力图 | ⬜ |
| `QuadrantChart` | 四象限图 | ⬜ |
| `ScoreCard` | 得分卡片 | ⬜ |
| `ProgressRing` | 环形进度 | ⬜ |
| `SuggestionCard` | AI建议卡片 | ⬜ |
| `PDPItem` | 发展计划项 | ⬜ |
| `CompetencyBar` | 能力条形图 | ⬜ |
| `TeacherCard` | 教师信息卡片 | ⬜ |
| `Questionnaire` | 问卷组件 | ⬜ |

---

## 4. 模拟数据

### 4.1 教师数据

| 字段 | 类型 | 示例 |
|------|------|------|
| id | string | T001 |
| name | string | 张明 |
| role | enum | teacher/head_teacher/grade_leader/director |
| subject | string | 数学 |
| grade | string | 高一 |
| avatar | string | /avatars/t001.png |
| scores | object | { knowledge: 4.2, teaching: 4.5, ... } |
| results | object | { progress_rate: 0.85, satisfaction: 4.3, ... } |

### 4.2 示例教师（6人）

| ID | 姓名 | 岗位 | 画像特征 |
|----|------|------|----------|
| T001 | 张明 | 学科教师 | 能力强 + 成果好（高潜） |
| T002 | 李华 | 学科教师 | 能力强 + 成果差（待挖掘） |
| T003 | 王芳 | 班主任 | 能力弱 + 成果好（经验型） |
| T004 | 刘强 | 学科教师 | 能力弱 + 成果差（待提升） |
| T005 | 陈静 | 年级组长 | 五维均衡（管理者） |
| T006 | 赵伟 | 教务主任 | 战略眼光（领导者） |

---

## 5. 开发里程碑

### 5.1 里程碑划分

| 阶段 | 周期 | 交付内容 | 页面数 |
|------|------|----------|--------|
| **M1 基础搭建** | Day 1 | 项目初始化、路由配置、通用组件 | - |
| **M2 登录流程** | Day 2 | 登录页、角色选择、首页 | 3页 |
| **M3 教师画像** | Day 3-4 | 能力画像6页面、雷达图 | 7页 |
| **M4 AI建议+PDP** | Day 5-6 | AI建议、PDP管理 | 5页 |
| **M5 管理者端** | Day 7-9 | 驾驶舱5页面、人才管理4页面 | 9页 |
| **M6 自评问卷** | Day 10 | 自评问卷页 | 1页 |
| **M7 完善优化** | Day 11-12 | 动效、响应式、细节打磨 | - |
| **M8 测试验收** | Day 13 | 全链路测试、问题修复 | - |

### 5.2 每日任务

**Day 1 - 基础搭建**
- [ ] 初始化 Vite + React + TypeScript 项目
- [ ] 安装依赖（Tailwind、Recharts、React Router、Zustand）
- [ ] 配置 Tailwind CSS
- [ ] 创建目录结构
- [ ] 配置路由
- [ ] 实现通用组件（Button、Card、Badge、Avatar）

**Day 2 - 登录流程**
- [ ] 实现登录页
- [ ] 实现角色选择页
- [ ] 实现首页框架
- [ ] 添加导航组件

**Day 3 - 能力画像（概览+详情）**
- [ ] 创建模拟数据（teachers.ts、competencies.ts）
- [ ] 实现雷达图组件
- [ ] 实现能力画像概览页
- [ ] 实现5个维度详情页

**Day 4 - 能力画像（数据绑定）**
- [ ] 绑定6位示例教师数据
- [ ] 实现四象限分析图
- [ ] 实现能力对比功能
- [ ] 完善数据展示

**Day 5 - AI发展建议**
- [ ] 实现AI建议卡片组件
- [ ] 实现AI建议列表页
- [ ] 实现建议详情页
- [ ] 添加推荐资源展示

**Day 6 - 个人发展计划**
- [ ] 实现PDP列表页
- [ ] 实现PDP创建页
- [ ] 实现PDP详情页
- [ ] 添加进度追踪

**Day 7 - 管理驾驶舱（概览）**
- [ ] 实现全校胜任力热力图
- [ ] 实现关键指标卡片
- [ ] 实现数据筛选功能

**Day 8 - 管理驾驶舱（分析）**
- [ ] 实现学科对比图
- [ ] 实现年级分析图
- [ ] 实现能力排行榜
- [ ] 实现四象限分析

**Day 9 - 人才管理**
- [ ] 实现高潜教师页面
- [ ] 实现待提升教师页面
- [ ] 实现标杆案例页面
- [ ] 实现岗位配置建议

**Day 10 - 自评问卷**
- [ ] 实现问卷组件
- [ ] 实现自评问卷页面
- [ ] 添加表单验证
- [ ] 添加提交反馈

**Day 11-12 - 完善优化**
- [ ] 添加页面过渡动画
- [ ] 优化图表动效
- [ ] 适配 iPad 横屏
- [ ] 修复已知问题

**Day 13 - 测试验收**
- [ ] 全链路功能测试
- [ ] 响应式测试
- [ ] 浏览器兼容性测试
- [ ] 问题修复与验收

---

## 6. 验收标准

### 6.1 功能验收

| 功能 | 验收标准 |
|------|----------|
| 登录 | 输入账号密码可登录，默认演示账号 |
| 角色选择 | 可选择不同角色进入对应视图 |
| 能力画像 | 雷达图正确显示，数据切换流畅 |
| AI建议 | 建议卡片展示，点击展开详情 |
| PDP | 可创建、查看、编辑发展计划 |
| 驾驶舱 | 热力图、图表正确展示，数据可筛选 |
| 人才管理 | 四象限分析正确，人才分类准确 |
| 自评问卷 | 问卷可填写，提交后显示成功 |

### 6.2 视觉验收

| 项目 | 验收标准 |
|------|----------|
| 配色 | 蓝色系主色调，柔和、专业 |
| 字体 | 思源黑体/苹方，清晰易读 |
| 间距 | 留白充足，层级分明 |
| 动效 | 页面切换流畅，图表有入场动画 |
| 响应式 | iPad 横屏正常显示 |

---

## 7. 风险与应对

| 风险 | 影响 | 应对措施 |
|------|------|----------|
| Recharts雷达图定制困难 | 中 | 使用 SVG 自定义绘制，或选择 ECharts |
| 动效实现耗时 | 中 | 使用预设动画库（Framer Motion） |
| 数据绑定复杂度高 | 中 | 先完成静态页面，再绑定数据 |
| 时间紧张 | 高 | 砍掉次要页面（M2优先级），保证核心路径 |

---

## 8. 附录：路由配置

```typescript
// 路由表结构
const routes = [
  { path: '/login', component: LoginPage },
  { path: '/select-role', component: RoleSelectPage },
  { path: '/', component: HomePage, auth: true },
  
  // 教师端
  { path: '/teacher/profile', component: ProfilePage },
  { path: '/teacher/profile/:dimension', component: DimensionDetailPage },
  { path: '/teacher/suggestions', component: SuggestionsPage },
  { path: '/teacher/suggestions/:id', component: SuggestionDetailPage },
  { path: '/teacher/pdp', component: PDPListPage },
  { path: '/teacher/pdp/create', component: PDPCreatePage },
  { path: '/teacher/pdp/:id', component: PDPDetailPage },
  { path: '/teacher/evaluate', component: EvaluatePage },
  
  // 管理者端
  { path: '/manager/dashboard', component: DashboardPage },
  { path: '/manager/dashboard/:tab', component: DashboardTabPage },
  { path: '/manager/talent/:type', component: TalentPage },
  { path: '/manager/evaluation', component: EvaluationPage },
  
  // 共享
  { path: '/model', component: ModelPage },
  { path: '/settings', component: SettingsPage },
]
```