Initial commit

2026-02-02 18:30:58 +08:00
commit ae1ca8bfaa
40 changed files with 10900 additions and 0 deletions
--- a/docs/需求设计文档.md
+++ b/docs/需求设计文档.md
@@ -0,0 +1,429 @@
+# 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