README.md

metadata

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. 克隆项目：

   git clone <repository-url>
   cd interactive-checklist-maker
   

2. 安装依赖：

   pip install -r requirements.txt
   

3. 运行应用：

   python app.py
   

   访问 http://localhost:7860。

Docker 运行

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