# 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. **记忆困难**：大量术语和对应关系难以记忆
3. **缺乏互动**：无法进行自测和针对性复习
4. **查找低效**：无法快速定位特定输入/输出的使用场景

### 1.2 项目目标

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

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

### 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)

```typescript
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)

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

#### 4.1.3 过程 (Process)

```typescript
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)

```typescript
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)

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

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

### 4.2 学习数据结构

```typescript
// 学习记录
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 组件设计原则

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

---

## 7. 附录

### 7.1 10大知识领域

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

### 7.2 5大过程组

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

### 7.3 参考资料

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

---

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