📁 本地文件夹画廊 - Local Folder Gallery

一个现代化的本地文件夹图片浏览器，支持递归搜索、批量导出和美观的展示界面。

✨ 核心功能

🔍 文件夹扫描

• 递归搜索指定文件夹下的所有图片文件
• 支持格式：JPG, JPEG, PNG, GIF, WebP
• 拖拽文件夹直接加载
• 实时进度显示

📊 图片信息展示

• 文件名、文件大小、图片尺寸
• 文件类型和完整路径
• 自动生成高质量缩略图
• 响应式网格布局

🔍 图片查看器

• 全屏模态框查看大图
• 键盘导航（方向键、ESC、空格）
• 鼠标滚轮缩放
• 拖拽移动（缩放时）
• 详细图片信息显示

✅ 批量选择与导出

• 复选框批量选择
• 全选/取消全选
• ZIP格式打包导出
• 进度条显示导出状态
• 安全文件名处理

🔧 筛选与排序

• 文件名搜索（实时）
• 按类型筛选
• 多种排序方式（名称、大小、日期）
• 搜索结果统计

🚀 使用方法

1. 打开应用

直接用浏览器打开 index.html 文件

2. 选择文件夹

• 点击"📂 选择文件夹"按钮
• 或者直接拖拽文件夹到页面

3. 浏览图片

• 点击缩略图放大查看
• 使用方向键导航
• 滚轮缩放图片

4. 批量导出

• 勾选需要的图片
• 点击"📦 导出选中 (ZIP)"
• 自动下载ZIP文件

🛠️ 技术特性

前端技术栈

• HTML5 - 现代语义化结构
• CSS3 - 渐变背景、动画效果、响应式设计
• JavaScript - ES6+模块化开发
• File API - 本地文件处理
• Canvas API - 缩略图生成
• JSZip - ZIP文件创建

浏览器兼容性

• Chrome 88+ ✅
• Firefox 85+ ✅
• Safari 14+ ✅
• Edge 88+ ✅

性能特性

• 懒加载缩略图
• 防抖搜索
• 内存管理优化
• 大文件夹支持

📁 项目结构

local_folder_gallery/
├── index.html              # 主页面
├── css/
│   ├── style.css           # 主样式文件
│   └── modal.css           # 弹窗样式
├── js/
│   ├── main.js             # 主逻辑控制器
│   ├── file-scanner.js     # 文件扫描模块
│   ├── image-viewer.js     # 图片查看器模块
│   └── export-manager.js   # 导出管理模块
├── issues/
│   └── 本地文件夹画廊.md    # 开发记录
└── README.md               # 项目说明

🎯 核心模块

FileScanner 文件扫描器

• 递归扫描文件夹
• 图片格式检测
• 缩略图生成
• 文件信息提取

ImageViewer 图片查看器

• 模态框展示
• 键盘/鼠标交互
• 缩放拖拽功能
• 图片信息展示

ExportManager 导出管理器

• 批量选择逻辑
• ZIP文件创建
• 进度提示
• 错误处理

LocalFolderGallery 主控制器

• 模块协调
• UI状态管理
• 事件处理
• 数据流控制

🔧 高级功能

键盘快捷键

• 方向键 - 切换图片
• ESC - 关闭查看器
• 空格 - 下一张图片

图片操作

• 滚轮 - 缩放图片
• 双击 - 重置缩放
• 拖拽 - 移动图片（缩放时）

批量操作

• 点击卡片 - 选择/取消选择
• Ctrl+A - 全选（计划中）
• Delete - 删除选中（计划中）

🐛 已知限制

1. 浏览器安全限制

   • 无法自动访问文件系统
   • 需要用户手动选择文件夹

2. 文件大小限制

   • 超大图片可能影响性能
   • 建议单文件不超过50MB

3. 文件夹深度

   • 极深的文件夹结构可能影响扫描速度

🔮 后续计划

• 添加图片编辑功能
• 支持视频文件预览
• 添加图片元数据显示（EXIF）
• 实现幻灯片播放
• 支持云存储集成
• 添加图片标签功能

📝 开发记录

详见 issues/本地文件夹画廊.md 文件

🎉 立即开始

1. 下载项目文件
2. 用浏览器打开 index.html
3. 选择包含图片的文件夹
4. 开始浏览和管理你的图片！

---

本项目完全基于前端技术实现，无需安装任何软件，双击即用！ 🚀