📋 PmP --- 个人项目管理 · 轻量高效 · 多端适配
一款简洁实用的个人项目管理应用，支持浏览器 PWA 与 Android 原生运行
📱 应用截图
| 🏠 项目列表 | 📊 统计分析 | ⚙️ 数据管理 |
|---|---|---|
✨ 功能特性
📋 项目管理
创建、编辑和管理多个项目，支持自定义状态标签与优先级标记，一目了然掌控全局。
🔗 节点流程
可视化项目节点与进度追踪，清晰呈现每个阶段的完成情况，进度不再模糊。
📊 统计分析
基于 ECharts 的多维度数据图表，项目分布、状态占比、趋势变化尽在掌握。
💾 数据备份
一键导出 JSON 备份文件，支持合并/替换两种导入模式，数据安全有保障。
📱 多端适配
浏览器 PWA + Android 原生应用，Capacitor 桥接原生能力，数据导出支持系统分享面板选择保存位置。
🛠️ 技术栈
| 类别 | 技术 | 说明 |
|---|---|---|
| ⚛️ | React 18 | 前端框架 |
| ⚡ | Vite 5 | 构建工具 |
| 🧭 | React Router 6 | 路由管理 |
| 📈 | ECharts 5 | 图表可视化 |
| 📲 | vite-plugin-pwa | PWA 支持 |
| 🌉 | Capacitor 6 | 原生桥接 |
| 📁 | @capacitor/filesystem | 文件系统 |
| 🔗 | @capacitor/share | 系统分享 |
| 💾 | LocalStorage | 本地存储 |
📤 数据导出机制
应用根据运行环境自动选择最优导出方式：
- 📱 Capacitor 原生（Android）：Filesystem 写入缓存 → Share 调起系统分享面板，用户可选择保存位置
- 🔄 React Native WebView：通过 postMessage 桥接传递给宿主应用
- 🌐 浏览器 ：Blob +
<a>标签传统前端文件下载
🤖 Android APK 构建
步骤 1：构建 Web 资源并同步
bash
npm run build
npx cap sync android步骤 2：编译 APK
bash
cd android
gradlew assembleDebug📦 Debug APK：自动签名，可直接安装
Release APK 已启用 R8 压缩 + 资源缩减，体积约 1.5 MB
🚀 快速开始
📋 环境要求
| 环境 | 版本 |
|---|---|
| 🟢 Node.js | 18+ |
| ☕ Java | 17 |
| 📱 Android SDK | 34 |
安装依赖
bash
cd pmp-app && npm install开发模式
bash
npm run dev生产构建
bash
npm run build📁 项目结构
pmp-app/
├── 📂 public/ # 静态资源
├── 📂 src/
│ ├── 📂 components/
│ │ ├── ProjectList.jsx # 🏠 项目列表
│ │ ├── ProjectDetail.jsx # 📋 项目详情
│ │ ├── Statistics.jsx # 📊 统计分析
│ │ ├── Settings.jsx # ⚙️ 数据管理
│ │ └── About.jsx # ℹ️ 关于
│ ├── 📂 store/
│ │ └── storage.js # 💾 数据层
│ ├── App.jsx # 🧩 根组件
│ └── main.jsx # 🚀 入口
├── 📂 android/ # 🤖 原生项目
└── package.json # 📦 依赖👨💻 关于作者
JiangWei
📱 微信公众号
软趴趴的工程师
👇 欢迎关注 👇
© 2026 JiangWei. All rights reserved.
⭐ 如果这个项目对你有帮助，欢迎 Star 支持