README.md

---
title: Roadmap Builder Pro
emoji: 🗺️
colorFrom: blue
colorTo: indigo
sdk: docker
pinned: false
app_port: 7860
short_description: 产品路线图生成器
---

# 产品路线图生成器 (Roadmap Builder Pro)

一个简单、高效的产品路线图（Roadmap）可视化生成工具。专为产品经理、独立开发者和团队负责人设计，帮助你快速规划和展示项目进度。

## 功能特点

- **看板式布局**：默认提供 Q1/Q2/Q3/Q4 阶段划分，支持自定义阶段名称。
- **灵活的任务管理**：
  - 快速添加/删除任务。
  - 支持任务在不同阶段间移动（左右移动）。
  - 支持任务在同阶段内排序（上下移动）。
- **状态标签系统**：
  - 内置 5 种状态标签（规划中、进行中、已完成、待定、高优）。
  - 点击标签即可循环切换颜色/状态。
- **本地化存储**：数据自动保存在浏览器 LocalStorage 中，刷新页面不丢失。
- **一键导出**：支持将路线图导出为高清 PNG 图片，方便插入 PPT 或分享给团队。
- **隐私安全**：所有数据仅在本地处理，不上传服务器。

## 技术栈

- **Backend**: Flask (Python)
- **Frontend**: Vue 3 (Composition API)
- **UI Framework**: Tailwind CSS
- **Export**: html2canvas
- **Deployment**: Docker + Hugging Face Spaces

## 本地运行

1. 克隆项目：
   ```bash
   git clone <repository-url>
   cd roadmap-builder-pro
   ```

2. 安装依赖：
   ```bash
   pip install -r requirements.txt
   ```

3. 运行应用：
   ```bash
   python app.py
   ```

4. 访问：
   打开浏览器访问 `http://localhost:7860`

## Docker 部署

```bash
docker build -t roadmap-builder-pro .
docker run -p 7860:7860 roadmap-builder-pro
```

## Hugging Face Spaces

本项目已配置为可以直接部署到 Hugging Face Spaces (Docker Space)。
只需将代码推送到 Space 仓库即可。