📁 HTML Manager

把零散、难找、难预览的 HTML 文件，整理成一个真正可用的本地资源库。

English | 简体中文

HTML Manager 是一个运行在浏览器中的本地 HTML 文件管理与预览工具，帮助你整理、预览和管理大量零散的 HTML 文件。

在线使用网址： https://html-manager0930.netlify.app （项目纯前端，你的文件不会上传到云端）

很多人手里都有这样一堆文件：

• 活动页终版.html
• 活动页终版2.html
• 活动页终版-真的最终版.html
• landing-final-v3.html

文件是有了，但问题也跟着来了：

• 想找某个页面，根本记不清名字
• 想看效果，还得一个个双击打开
• 想知道它属于哪个项目、哪个分类，全靠脑子记
• 想把几个页面打包发给别人，还得手动翻文件夹
• 时间一久，素材越来越多，最后谁也不想整理

HTML Manager 就是专门解决这个问题的。

它不是普通的文件列表，而是一个面向 HTML 资源的本地管理台：
你可以把常用页面、模板、落地页、历史活动页、组件 Demo 统一收进来，分类、预览、搜索、导出，一套流程都在里面完成。

---

为什么你会需要它

如果你经常遇到下面这些场景，这个项目会非常顺手：

1. 你的 HTML 文件越来越多，但越来越难找

传统文件夹最大的问题，不是不能存，而是不适合检索和复用。

HTML Manager 提供：

• 分类整理
• 当前分类内搜索
• 模糊匹配文件名、标签、内容
• 文件收藏
• 排序和正倒序切换

你不用再靠文件名猜测内容。

2. 你想快速看页面效果，而不是只看源码文件名

很多时候你需要的不是“这个文件在哪”，而是“这个页面长什么样”。

HTML Manager 支持：

• 直接预览 HTML 渲染结果
• 显示文件信息
• 全屏查看页面

它更像一个可视化素材库，而不是冷冰冰的资源目录。

3. 你不想把这些文件上传到服务器或第三方平台

很多 HTML 资源本身就是内部物料、历史页面、交付备份，没必要上传。

这个项目采用本地优先设计：

• 无需后端
• 不依赖数据库服务
• 默认不上传到云端
• 优先使用 IndexedDB 本地持久化

更适合个人、本地团队、小型内容库场景。

4. 你需要把文件重新交付出去

整理不是终点，复用和交付才是。

HTML Manager 支持：

• 单文件导出
• 批量多选导出
• 打包 ZIP 下载

当你要把一组 HTML 页面发给同事、客户或备份到别处时，会轻松很多。

---

项目亮点

预览优先

比起“文件名管理”，更重视“页面内容管理”。

• 导入后可直接预览
• 不用反复切出应用
• 适合管理模板、活动页、演示页、原型页

本地优先

• 数据保存在浏览器本地
• 默认不依赖服务器
• 适合私有素材、内部交付文件、离线使用

轻量但完整

虽然是前端项目，但常用管理流程基本已经具备：

• 导入
• 分类
• 搜索
• 收藏
• 回收站
• 导出

面向真实工作流

这个项目的目标不是“展示一个技术 Demo”，而是尽量贴近日常工作里的实际使用体验。

---

功能一览

文件导入

• 支持选择文件导入
• 支持拖拽导入
• 支持批量导入多个 .html / .htm 文件
• 自动校验文件类型与大小
• 单文件大小限制：10MB

文件预览

• 在应用内直接预览 HTML 页面
• 支持全屏查看
• 显示文件名、文件大小、更新时间
• 首次打开自动加载欢迎示例页

分类管理

• 内置默认分类
• 支持新建自定义分类
• 支持分类重命名与图标设置
• 删除分类后自动迁移文件

文件整理

• 收藏 / 取消收藏
• 移动到其他分类
• 删除到回收站
• 从回收站恢复
• 永久删除
• 一键清空回收站

搜索与排序

• 搜索入口位于左侧侧边栏
• 搜索范围限定在当前分类
• 支持模糊搜索
• 搜索文件名、标签、文件内容
• 只显示命中的文件
• 支持按名称、大小、更新时间排序
• 支持正序 / 倒序切换

文件导出

• 支持单文件导出
• 支持批量多选
• 支持逐个下载
• 支持打包 ZIP 下载

体验层能力

• 深色 / 浅色主题
• 主题本地持久化
• 移动端响应式兼容
• 默认欢迎页自动初始化
• 自定义标签页图标

---

谁适合使用它

这个项目尤其适合：

• 前端开发者整理 HTML 模板和静态页面
• 设计 / 运营团队管理活动页和落地页
• 需要归档交付页面的人
• 想把零散 HTML 文件做成可复用资产库的人

---

技术栈

• Next.js 14
• React 18
• TypeScript
• Tailwind CSS
• Fuse.js：模糊搜索
• Lucide React：图标系统
• Vitest：单元测试
• Playwright：端到端测试

---

存储方案

项目采用本地优先的持久化策略：

• 优先使用 IndexedDB
• IndexedDB 不可用时自动降级到 localStorage
• 支持旧版本地数据迁移

存储内容包括：

• 文件数据
• 分类数据
• 应用设置

这意味着：

• 文件默认只保存在当前浏览器本地
• 清理浏览器站点数据后内容会消失
• 不同浏览器之间不会自动同步

---

默认欢迎页

应用首次打开且本地没有文件时，会自动加载：

• public/samples/welcome-guide.html

这样用户第一次进入不会面对空白界面，而是能立刻知道这个工具该怎么用。

---

项目结构

HTML_manager/
├─ public/                  # 静态资源与默认欢迎页
├─ src/
│  ├─ app/                  # Next.js App Router 入口
│  ├─ components/           # UI、功能、布局组件
│  ├─ context/              # 全局状态上下文
│  ├─ hooks/                # 自定义 hooks
│  ├─ lib/
│  │  ├─ services/          # 存储、搜索、分类服务
│  │  ├─ types/             # 类型定义
│  │  └─ utils/             # 工具方法
│  └─ reducers/             # 状态 reducer
├─ tests/                   # 测试代码
├─ favicon.png              # 项目图标源文件
└─ README.md

---

快速开始

安装依赖

npm install

启动开发环境

npm run dev

访问：

http://localhost:3000

构建生产版本

npm run build

启动生产环境

npm run start

---

可用脚本

npm run dev        # 启动开发环境
npm run build      # 构建生产版本
npm run start      # 启动生产环境
npm run test       # 运行单元测试
npm run test:watch # 测试监听模式
npm run test:e2e   # 运行 E2E 测试

---

当前版本状态

v1.0 已完成核心交付。

这一版已经具备作为正式可用产品的主流程能力：

• 本地 HTML 导入与预览
• 分类、收藏、回收站、移动
• IndexedDB 优先持久化
• 当前分类搜索与排序
• 单文件导出与批量 ZIP 导出
• 默认欢迎页自动初始化
• 深浅色主题切换
• 移动端响应式适配

换句话说，它已经不是一个只能演示的原型，而是一个可以实际使用的版本。

---

已知说明

• 当前仅支持 HTML 文件管理，不包含 CSS / JS / 图片等独立资源管理
• ZIP 导出仅打包 HTML 文件本体，不自动收集外部依赖资源
• 某些依赖远程资源的 HTML 页面，预览效果可能受浏览器安全策略影响
• 项目中仍可能有少量历史中文乱码文案，后续可以继续统一清理

---

项目文档

完整交付说明请查看：

• 项目交付文档-完整版.md

---

License

当前仓库尚未单独提供开源许可证文件。
如果准备正式公开发布，建议补充 LICENSE。

---

最后一句

HTML Manager 不是为了“把 HTML 文件列出来”，而是为了把一堆原本散落在文件夹里的页面素材，变成一个真正能搜索、能预览、能整理、能导出的本地资源系统。

如果你也曾经被一堆 final-final-v3.html 折磨过，那你应该会懂它的价值。