eee40fa071
添加项目开发指南 CLAUDE.md 和项目说明 README.md - CLAUDE.md 包含项目架构、开发规范和技术细节 - README.md 提供项目简介、功能说明和快速开始指南
299 lines
9.0 KiB
Markdown
299 lines
9.0 KiB
Markdown
# ITTOView - PMP 项目管理 ITTO 可视化学习平台
|
||
|
||
<div align="center">
|
||
|
||
**一个精美、交互式的 PMP 认证考试 ITTO 知识点可视化学习工具**
|
||
|
||
[](https://reactjs.org/)
|
||
[](https://www.typescriptlang.org/)
|
||
[](https://vitejs.dev/)
|
||
[](https://tailwindcss.com/)
|
||
[](LICENSE)
|
||
|
||
</div>
|
||
|
||
---
|
||
|
||
## 📖 项目简介
|
||
|
||
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
|
||
|
||
### 本地开发
|
||
|
||
```bash
|
||
# 1. 克隆项目
|
||
git clone <repository-url>
|
||
cd ITTOView
|
||
|
||
# 2. 安装依赖
|
||
npm install
|
||
|
||
# 3. 启动开发服务器
|
||
npm run dev
|
||
|
||
# 4. 在浏览器中打开 http://localhost:3000
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
# 类型检查 + 构建
|
||
npm run build
|
||
|
||
# 预览生产构建
|
||
npm run preview
|
||
```
|
||
|
||
### 代码检查
|
||
|
||
```bash
|
||
# 运行 ESLint
|
||
npm run lint
|
||
```
|
||
|
||
---
|
||
|
||
## 🐳 Docker 部署
|
||
|
||
### 使用 Docker Compose（推荐）
|
||
|
||
```bash
|
||
# 启动服务
|
||
docker compose up -d
|
||
|
||
# 查看日志
|
||
docker compose logs -f
|
||
|
||
# 停止服务
|
||
docker compose down
|
||
```
|
||
|
||
服务将在 `http://11.144.144.9:8035` 上运行（可在 `docker-compose.yml` 中修改端口）。
|
||
|
||
### 手动构建 Docker 镜像
|
||
|
||
```bash
|
||
# 构建镜像
|
||
docker build -t ittoview:latest .
|
||
|
||
# 运行容器
|
||
docker run -d -p 8080:80 --name ittoview ittoview:latest
|
||
```
|
||
|
||
---
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
### 核心框架
|
||
|
||
- **[React 18](https://reactjs.org/)** - 用户界面库
|
||
- **[TypeScript](https://www.typescriptlang.org/)** - 类型安全的 JavaScript
|
||
- **[Vite](https://vitejs.dev/)** - 下一代前端构建工具
|
||
|
||
### UI 与样式
|
||
|
||
- **[Tailwind CSS](https://tailwindcss.com/)** - 原子化 CSS 框架
|
||
- **[Radix UI](https://www.radix-ui.com/)** - 无样式的可访问组件库
|
||
- **[Framer Motion](https://www.framer.com/motion/)** - 生产级动画库
|
||
- **[Lucide React](https://lucide.dev/)** - 精美的图标库
|
||
|
||
### 可视化
|
||
|
||
- **[ReactFlow](https://reactflow.dev/)** - 流程图和节点编辑器
|
||
- **[AntV G6](https://g6.antv.antgroup.com/)** - 图可视化引擎
|
||
- **[Recharts](https://recharts.org/)** - 基于 React 的图表库
|
||
|
||
### 状态管理与路由
|
||
|
||
- **[Zustand](https://zustand-demo.pmnd.rs/)** - 轻量级状态管理
|
||
- **[React Router](https://reactrouter.com/)** - 声明式路由
|
||
|
||
### 部署
|
||
|
||
- **[Docker](https://www.docker.com/)** - 容器化部署
|
||
- **[Nginx](https://nginx.org/)** - 高性能 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` 提供了丰富的数据查询工具函数：
|
||
```typescript
|
||
// 计算数据流向关系
|
||
computeDataFlows(): DataFlow[]
|
||
|
||
// 获取工件的使用情况
|
||
getArtifactUsage(artifactId: string): { asInput: Process[], asOutput: Process[] }
|
||
|
||
// 获取工具的使用情况
|
||
getToolUsage(toolId: string): Process[]
|
||
|
||
// 获取过程的完整信息
|
||
getProcessDetail(processId: string)
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 路线图
|
||
|
||
### ✅ 已完成功能
|
||
|
||
- [x] 知识领域视图
|
||
- [x] 过程组视图
|
||
- [x] 过程详情页（含 5W1H 记忆辅助）
|
||
- [x] 49 过程矩阵图
|
||
- [x] 工件详情页
|
||
- [x] 工具详情页
|
||
- [x] 深色模式
|
||
- [x] 响应式布局
|
||
- [x] 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/` 的路径别名
|
||
|
||
---
|
||
|