shiyue/ittoview

Fork 0

Files

史悦 ae1ca8bfaa Initial commit

2026-02-02 18:30:58 +08:00

13 KiB

Raw Blame History

ITTOView - PMP项目管理ITTO可视化学习平台

需求设计文档 v1.0

1. 项目概述

1.1 项目背景

PMP（Project Management Professional）认证考试中，ITTO（Input-Tools & Techniques-Output）是核心知识点。PMBOK第6版包含：

10大知识领域：整合、范围、进度、成本、质量、资源、沟通、风险、采购、相关方管理
5大过程组：启动、规划、执行、监控、收尾
49个项目管理过程：每个过程都有对应的输入、工具与技术、输出

传统的ITTO学习方式（PDF/表格）存在以下痛点：

信息孤立：难以看到过程之间的数据流向关系
记忆困难：大量术语和对应关系难以记忆
缺乏互动：无法进行自测和针对性复习
查找低效：无法快速定位特定输入/输出的使用场景

1.2 项目目标

构建一个精美、交互式的ITTO可视化学习平台，帮助PMP考生：

直观理解：通过流程图可视化ITTO关系
高效记忆：基于间隔重复的记忆卡片系统
精准评估：完整的测评、错题、统计功能
快速查询：强大的搜索和关联分析能力

1.3 目标用户

PMP/CAPM认证备考人员
项目管理学习者
企业项目管理培训机构

2. 功能需求

2.1 核心功能模块

2.1.1 知识浏览模块

功能	描述	优先级
知识领域视图	按10大知识领域分类展示所有过程	P0
过程组视图	按5大过程组分类展示所有过程	P0
过程详情页	展示单个过程的完整ITTO信息	P0
表格视图	传统表格形式展示，支持排序筛选	P1
卡片视图	卡片形式展示，适合快速浏览	P1

2.1.2 可视化模块

功能	描述	优先级
ITTO流程图	输入→工具技术→输出的流程图展示	P0
数据流向图	展示输出如何流向其他过程作为输入	P0
知识领域全景图	单个知识领域内所有过程的关系图	P1
全局关系图谱	49个过程的完整关系网络	P2

2.1.3 搜索与筛选模块

功能	描述	优先级
全局搜索	搜索过程名、输入、工具、输出	P0
分类筛选	按知识领域/过程组筛选	P0
类型筛选	仅搜索输入/工具/输出	P1
关联查询	查看某项作为输入/输出的所有过程	P1

2.1.4 学习模块

功能	描述	优先级
记忆卡片	基于间隔重复算法的闪卡系统	P0
自测模式	多种题型（选择、填空、连线）	P0
错题本	自动收集错题，支持针对性复习	P0
掌握度标记	熟悉/模糊/陌生三级标记	P1
学习统计	学习时长、正确率、进度可视化	P1
复习计划	基于艾宾浩斯遗忘曲线的复习提醒	P2

2.1.5 用户体验模块

功能	描述	优先级
响应式布局	适配PC和平板设备	P0
深色模式	支持明暗主题切换	P1
键盘导航	支持快捷键操作	P2
数据导出	导出学习记录为JSON/CSV	P2

2.2 页面结构

ITTOView/
├── 首页 (Dashboard)
│   ├── 学习进度概览
│   ├── 今日复习任务
│   └── 快速入口
├── 知识浏览
│   ├── 知识领域视图
│   ├── 过程组视图
│   └── 过程详情页
├── 可视化
│   ├── ITTO流程图
│   ├── 数据流向图
│   └── 全局关系图谱
├── 学习中心
│   ├── 记忆卡片
│   ├── 自测模式
│   ├── 错题本
│   └── 学习统计
└── 设置
    ├── 主题设置
    └── 数据管理

3. 技术架构

3.1 技术选型

类别	技术方案	选型理由
框架	React 18 + TypeScript	生态成熟、类型安全、组件化开发
构建工具	Vite	快速冷启动、HMR、现代化构建
UI组件库	Radix UI + Tailwind CSS	无样式组件+原子化CSS，高度可定制
可视化	React Flow + ELK.js	流程图交互完善 + 自动布局算法
状态管理	Zustand	轻量、简洁、TypeScript友好
搜索引擎	FlexSearch	高性能全文搜索，支持中文
路由	React Router v6	官方路由方案，功能完善
动画	Framer Motion	声明式动画，流畅交互
图表	Recharts	基于React的图表库，学习统计使用
持久化	localStorage + IndexedDB	本地存储学习进度和用户数据

3.2 项目结构

src/
├── assets/                # 静态资源
│   ├── icons/
│   └── images/
├── components/            # 通用组件
│   ├── ui/               # 基础UI组件
│   ├── layout/           # 布局组件
│   └── shared/           # 共享业务组件
├── features/              # 功能模块
│   ├── browse/           # 知识浏览
│   ├── visualize/        # 可视化
│   ├── learn/            # 学习中心
│   └── search/           # 搜索功能
├── data/                  # 数据层
│   ├── itto.json         # ITTO核心数据
│   ├── models/           # 数据模型定义
│   └── index/            # 搜索索引
├── stores/                # 状态管理
│   ├── useAppStore.ts
│   ├── useLearnStore.ts
│   └── useSearchStore.ts
├── hooks/                 # 自定义Hooks
├── utils/                 # 工具函数
├── styles/                # 全局样式
├── types/                 # TypeScript类型
└── App.tsx

4. 数据模型

4.1 核心数据结构

4.1.1 知识领域 (KnowledgeArea)

interface KnowledgeArea {
  id: string;           // 如 "KA01"
  name: string;         // 如 "项目整合管理"
  nameEn: string;       // 如 "Project Integration Management"
  order: number;        // 排序序号 1-10
  color: string;        // 主题色 "#3B82F6"
  description: string;  // 简要描述
}

4.1.2 过程组 (ProcessGroup)

interface ProcessGroup {
  id: string;           // 如 "PG01"
  name: string;         // 如 "启动过程组"
  nameEn: string;       // 如 "Initiating Process Group"
  order: number;        // 排序序号 1-5
  color: string;        // 主题色
}

4.1.3 过程 (Process)

interface Process {
  id: string;              // 如 "P001"
  name: string;            // 如 "制定项目章程"
  nameEn: string;          // 如 "Develop Project Charter"
  knowledgeAreaId: string; // 所属知识领域
  processGroupId: string;  // 所属过程组
  order: number;           // 在知识领域内的序号
  inputs: ArtifactRef[];   // 输入列表
  tools: ToolRef[];        // 工具与技术列表
  outputs: ArtifactRef[];  // 输出列表
}

4.1.4 工件/文档 (Artifact)

interface Artifact {
  id: string;           // 如 "A0001"
  name: string;         // 如 "项目章程"
  nameEn: string;       // 如 "Project Charter"
  category: ArtifactCategory;
  description?: string;
}

type ArtifactCategory =
  | 'document'    // 文档
  | 'plan'        // 计划
  | 'baseline'    // 基准
  | 'report'      // 报告
  | 'register'    // 登记册
  | 'log'         // 日志
  | 'deliverable' // 可交付成果
  | 'other';      // 其他

4.1.5 工具与技术 (ToolTechnique)

interface ToolTechnique {
  id: string;           // 如 "TT0001"
  name: string;         // 如 "专家判断"
  nameEn: string;       // 如 "Expert Judgment"
  type: ToolType;
  description?: string;
}

type ToolType =
  | 'tool'       // 工具
  | 'technique'  // 技术
  | 'method'     // 方法
  | 'skill'      // 技能
  | 'meeting';   // 会议

4.2 学习数据结构

// 学习记录
interface LearningRecord {
  id: string;
  userId: string;
  processId: string;
  masteryLevel: 'familiar' | 'fuzzy' | 'unfamiliar';
  reviewCount: number;
  correctCount: number;
  lastReviewAt: Date;
  nextReviewAt: Date;  // 基于间隔重复算法计算
}

// 错题记录
interface WrongAnswer {
  id: string;
  questionId: string;
  questionType: 'choice' | 'fill' | 'match';
  userAnswer: string;
  correctAnswer: string;
  createdAt: Date;
  reviewed: boolean;
}

// 学习统计
interface LearningStats {
  totalStudyTime: number;      // 总学习时长(分钟)
  totalQuestions: number;      // 总答题数
  correctRate: number;         // 正确率
  masteredCount: number;       // 已掌握过程数
  streakDays: number;          // 连续学习天数
  lastStudyDate: Date;
}

5. 实施计划

5.1 里程碑规划

阶段	名称	主要产出	验收标准
M0	数据准备	ITTO数据JSON、数据校验	49个过程数据完整可用
M1	基础架构	项目骨架、路由、布局	可浏览10大领域和5大过程组
M2	核心浏览	过程详情页、ITTO表格、搜索	可搜索并查看任意过程详情
M3	可视化	ITTO流程图、数据流向图	图谱支持缩放/高亮/筛选
M4	学习系统	卡片、测评、错题、统计	完整学习闭环可用
M5	体验优化	动效、响应式、性能优化	流畅度达标、视觉统一

5.2 详细任务分解

M0: 数据准备

从PDF提取49个过程的ITTO数据
设计并实现数据JSON结构
建立输入/输出的关联关系
数据校验与完整性检查

M1: 基础架构

初始化Vite + React + TypeScript项目
配置Tailwind CSS和Radix UI
实现基础布局组件（Header、Sidebar、Content）
配置React Router路由
实现知识领域列表页
实现过程组列表页

M2: 核心浏览

实现过程详情页
实现ITTO表格组件
集成FlexSearch搜索引擎
实现全局搜索功能
实现分类筛选功能

M3: 可视化

集成React Flow
实现ITTO流程图组件
实现数据流向分析
实现知识领域全景图
优化图谱交互体验

M4: 学习系统

实现记忆卡片组件
实现间隔重复算法
实现自测模式（多种题型）
实现错题本功能
实现学习统计页面
实现数据持久化

M5: 体验优化

添加页面过渡动画
实现深色模式
响应式布局适配
性能优化（懒加载、虚拟化）
用户体验细节打磨

6. UI设计规范

6.1 色彩系统

知识领域主题色

知识领域	主色	用途
整合管理	`#6366F1` (Indigo)	统领全局
范围管理	`#8B5CF6` (Violet)	边界定义
进度管理	`#EC4899` (Pink)	时间紧迫
成本管理	`#10B981` (Emerald)	财务绿色
质量管理	`#F59E0B` (Amber)	金牌品质
资源管理	`#3B82F6` (Blue)	人力资源
沟通管理	`#06B6D4` (Cyan)	信息流动
风险管理	`#EF4444` (Red)	风险警示
采购管理	`#84CC16` (Lime)	采购绿通
相关方管理	`#F97316` (Orange)	人际温暖

过程组主题色

过程组	主色	含义
启动	`#22C55E`	绿灯启动
规划	`#3B82F6`	蓝图规划
执行	`#F59E0B`	黄金执行
监控	`#8B5CF6`	紫色监控
收尾	`#6B7280`	灰色收尾

6.2 组件设计原则

卡片化设计：信息以卡片形式呈现，层次分明
色彩编码：通过颜色快速识别知识领域和过程组
渐进式披露：先展示概要，点击展开详情
一致性交互：相同操作保持一致的交互反馈
无障碍设计：确保足够的对比度和可访问性

7. 附录

7.1 10大知识领域

项目整合管理 - 7个过程
项目范围管理 - 6个过程
项目进度管理 - 6个过程
项目成本管理 - 4个过程
项目质量管理 - 3个过程
项目资源管理 - 6个过程
项目沟通管理 - 3个过程
项目风险管理 - 7个过程
项目采购管理 - 3个过程
项目相关方管理 - 4个过程

7.2 5大过程组

启动过程组 - 2个过程
规划过程组 - 24个过程
执行过程组 - 10个过程
监控过程组 - 12个过程
收尾过程组 - 1个过程

7.3 参考资料

PMBOK第6版指南
ITTO输入输出工具手册（本项目源PDF）
React Flow官方文档
Tailwind CSS设计系统

文档版本: v1.0 创建日期: 2026-02-02 最后更新: 2026-02-02

13 KiB Raw Blame History Unescape Escape