freedak/K12C

Fork 0

Files

T

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

2026-06-19 15:17:20 +08:00

12 KiB

Raw Permalink Blame History

开发任务文档 | 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. 附录：路由配置

// 路由表结构
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 },
]

12 KiB Raw Permalink Blame History Unescape Escape