Initial commit: K12C教师岗位胜任力数字化管理方案

2026-06-19 15:17:20 +08:00
commit 857810d2e3
20 changed files with 6956 additions and 0 deletions
@@ -0,0 +1,362 @@
+# 开发任务文档 | 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 },
+]
+```