| | --- |
| | 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 |
| |
|
