---
title: Interactive Checklist Maker
emoji: ✅
colorFrom: blue
colorTo: green
sdk: docker
pinned: false
app_port: 7860
short_description: 交互式清单生成器
---

# Interactive Checklist Maker (交互式清单生成器)

一个简单而强大的工具，用于创建、分享和使用交互式检查清单。专为创作者、独立开发者和团队设计，可用于制作产品发布清单、SEO 审计表、入职指南等"诱饵"（Lead Magnet）内容。

## ✨ 主要功能

- **可视化编辑器**：实时编辑清单标题、描述、章节和项目。
- **双模式切换**：
  - **编辑模式**：构建和修改清单结构。
  - **预览模式**：体验最终用户的交互效果（点击勾选、进度条动画）。
- **数据持久化**：自动保存编辑进度到浏览器本地存储，防止数据丢失。
- **灵活导出**：
  - **导出 JSON**：保存清单数据，方便备份或分享给其他创作者。
  - **导出独立 HTML**：生成一个**完全独立**的 `.html` 文件，包含所有数据和逻辑。用户可以直接下载并在任何浏览器中打开使用，甚至可以作为静态网页托管（如 GitHub Pages）。
- **导入功能**：支持导入之前保存的 JSON 数据。
- **现代化 UI**：基于 Vue 3 和 Tailwind CSS 构建，界面简洁美观，支持响应式设计。

## 🛠️ 技术栈

- **后端**：Python Flask (轻量级 Web 服务)
- **前端**：Vue 3 (Composition API), Tailwind CSS (样式), FontAwesome (图标)
- **部署**：Docker, Gunicorn

## 🚀 快速开始

### 本地运行

1. 克隆项目：
   ```bash
   git clone <repository-url>
   cd interactive-checklist-maker
   ```

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

3. 运行应用：
   ```bash
   python app.py
   ```
   访问 `http://localhost:7860`。

### Docker 运行

```bash
docker build -t checklist-maker .
docker run -p 7860:7860 checklist-maker
```

## 📦 部署到 Hugging Face Spaces

本项目已配置好 `Dockerfile`，可直接部署到 Hugging Face Spaces (Docker Space)。

1. 在 Hugging Face 创建一个新的 Space，选择 Docker SDK。
2. 将代码推送到 Space 的仓库。
3. 等待构建完成即可使用。

## 💡 使用场景示例

- **产品发布清单**：列出发布前需要完成的所有事项（域名、服务器、推广素材等）。
- **SEO 优化指南**：为客户提供一份可操作的 SEO 检查表。
- **新员工入职手册**：帮助新员工按步骤完成入职流程。
- **旅行打包清单**：分享你的旅行必备物品清单。

---
Made with ❤️ by Interactive Checklist Maker Team