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

一个精美、交互式的 PMP 认证考试 ITTO 知识点可视化学习工具

---

📖 项目简介

ITTOView 是一个专为 PMP（Project Management Professional）认证考生设计的 ITTO（Input-Tools & Techniques-Output）可视化学习平台。

什么是 ITTO？

PMBOK 第6版包含：

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

为什么需要 ITTOView？

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

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

ITTOView 通过可视化和交互式设计解决这些问题：

• ✅ 直观理解：通过流程图和矩阵图可视化 ITTO 关系
• ✅ 高效记忆：5W1H 记忆辅助信息帮助理解过程本质
• ✅ 快速查询：支持按知识领域、过程组、工件、工具多维度浏览
• ✅ 精美界面：现代化 UI 设计，支持深色模式

---

✨ 核心功能

🗂️ 多维度知识浏览

• 知识领域视图：按 10 大知识领域分类展示所有过程
• 过程组视图：按 5 大过程组分类展示所有过程
• 过程详情页：展示单个过程的完整 ITTO 信息及 5W1H 记忆辅助
• 工件详情页：查看工件作为输入/输出的所有过程
• 工具详情页：查看工具在哪些过程中被使用

📊 可视化矩阵图

• 49 过程矩阵图：知识领域（行）× 过程组（列）的二维矩阵
• 全屏模式：支持全屏查看，优化大屏显示效果
• 颜色编码：使用主题色区分不同知识领域和过程组
• 交互式导航：点击单元格快速跳转到过程详情

🎨 用户体验

• 响应式设计：适配 PC 和平板设备
• 深色模式：支持明暗主题切换，保护视力
• 流畅动画：使用 Framer Motion 实现优雅的页面过渡
• 侧边栏导航：可折叠的侧边栏，提供快速导航

---

🚀 快速开始

前置要求

• Node.js >= 18.0.0
• npm >= 9.0.0

本地开发

# 1. 克隆项目
git clone <repository-url>
cd ITTOView

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

# 4. 在浏览器中打开 http://localhost:3000

构建生产版本

# 类型检查 + 构建
npm run build

# 预览生产构建
npm run preview

代码检查

# 运行 ESLint
npm run lint

---

🐳 Docker 部署

使用 Docker Compose（推荐）

# 启动服务
docker compose up -d

# 查看日志
docker compose logs -f

# 停止服务
docker compose down

服务将在 http://11.144.144.9:8035 上运行（可在 docker-compose.yml 中修改端口）。

手动构建 Docker 镜像

# 构建镜像
docker build -t ittoview:latest .

# 运行容器
docker run -d -p 8080:80 --name ittoview ittoview:latest

---

🛠️ 技术栈

核心框架

• React 18 - 用户界面库
• TypeScript - 类型安全的 JavaScript
• Vite - 下一代前端构建工具

UI 与样式

• Tailwind CSS - 原子化 CSS 框架
• Radix UI - 无样式的可访问组件库
• Framer Motion - 生产级动画库
• Lucide React - 精美的图标库

可视化

• ReactFlow - 流程图和节点编辑器
• AntV G6 - 图可视化引擎
• Recharts - 基于 React 的图表库

状态管理与路由

• Zustand - 轻量级状态管理
• React Router - 声明式路由

部署

• Docker - 容器化部署
• Nginx - 高性能 Web 服务器

---

📁 项目结构

ITTOView/
├── src/
│   ├── components/          # React 组件
│   │   ├── layout/         # 布局组件（Header, Sidebar, Layout）
│   │   ├── ui/             # 通用 UI 组件
│   │   └── visualize/      # 可视化组件（ProcessMatrix）
│   ├── data/               # 静态数据文件
│   │   ├── knowledge-areas.json   # 10 大知识领域
│   │   ├── process-groups.json    # 5 大过程组
│   │   ├── processes.json         # 49 个过程（含 5W1H）
│   │   ├── artifacts.json         # 工件/文档
│   │   ├── tools.json             # 工具与技术
│   │   └── index.ts               # 数据索引和查询 API
│   ├── pages/              # 页面组件
│   │   ├── HomePage.tsx              # 首页
│   │   ├── KnowledgeAreasPage.tsx    # 知识领域页
│   │   ├── ProcessGroupsPage.tsx     # 过程组页
│   │   ├── ProcessDetailPage.tsx     # 过程详情页
│   │   ├── ProcessMatrixPage.tsx     # 矩阵图页
│   │   ├── ProcessGraphPage.tsx      # 流程图页
│   │   ├── ArtifactDetailPage.tsx    # 工件详情页
│   │   ├── ToolDetailPage.tsx        # 工具详情页
│   │   └── SettingsPage.tsx          # 设置页
│   ├── stores/             # Zustand 状态管理
│   │   └── useAppStore.ts
│   ├── types/              # TypeScript 类型定义
│   │   └── itto.ts
│   ├── hooks/              # 自定义 React Hooks
│   ├── utils/              # 工具函数
│   ├── App.tsx             # 应用根组件
│   └── main.tsx            # 应用入口
├── docs/                   # 文档
│   └── 需求设计文档.md
├── Dockerfile              # Docker 镜像构建文件
├── docker-compose.yml      # Docker Compose 配置
├── nginx.conf              # Nginx 配置（SPA 路由支持）
├── package.json            # 项目依赖
├── vite.config.ts          # Vite 配置
├── tailwind.config.js      # Tailwind CSS 配置
├── tsconfig.json           # TypeScript 配置
├── CLAUDE.md               # Claude Code 开发指南
└── README.md               # 本文件

---

📊 数据说明

数据来源

项目数据基于 PMBOK 第6版（项目管理知识体系指南），包含：

• 10 大知识领域的完整定义
• 5 大过程组的完整定义
• 49 个项目管理过程的详细 ITTO 信息
• 每个过程的 5W1H 记忆辅助信息

数据格式

所有数据以 JSON 格式存储在 src/data/ 目录下：

• knowledge-areas.json - 知识领域数据
• process-groups.json - 过程组数据
• processes.json - 过程数据（含输入、工具、输出 ID 引用）
• artifacts.json - 工件/文档数据
• tools.json - 工具与技术数据

数据查询 API

src/data/index.ts 提供了丰富的数据查询工具函数：

// 计算数据流向关系
computeDataFlows(): DataFlow[]

// 获取工件的使用情况
getArtifactUsage(artifactId: string): { asInput: Process[], asOutput: Process[] }

// 获取工具的使用情况
getToolUsage(toolId: string): Process[]

// 获取过程的完整信息
getProcessDetail(processId: string)

---

🎯 路线图

✅ 已完成功能

• 知识领域视图
• 过程组视图
• 过程详情页（含 5W1H 记忆辅助）
• 49 过程矩阵图
• 工件详情页
• 工具详情页
• 深色模式
• 响应式布局
• Docker 部署支持

---

🤝 贡献指南

欢迎贡献代码、报告问题或提出新功能建议！

如何贡献

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

代码规范

• 使用 TypeScript 编写代码
• 遵循 ESLint 规则（运行 npm run lint 检查）
• 组件使用函数式组件 + Hooks
• 使用 @/ 作为 src/ 的路径别名

---