这是一个基于原生 HTML、CSS、JavaScript 和 Webpack 的静态图片画廊。图片放在 img/ 目录中，构建后将 dist/ 目录部署到静态文件服务器即可。
项目支持递归目录中的 AVIF、BMP、GIF、JPEG、PNG、SVG 和 WebP 图片。隐藏文件和隐藏目录会被忽略。
构建资源包括：
- 原图：点击图片或切换到大图时加载
- 缩略图：构建前使用
sharp生成 WebP 缩略图，画廊列表使用懒加载 metadata.json：描述图片目录树和原图、缩略图的对应关系
缩略图生成在每次构建或启动开发服务时都会覆盖执行。metadata 默认也会重新生成；如果需要保留已有的 metadata，可使用 --keep-meta。
npm install直接运行会依据img/下的图片生成metadata和缩略图，开箱即用。
npm run build如果构建时需要保留已有 metadata（例如想在metadata里手工维护文件顺序、修改名字等，需要先生成metadata（见下））：
npm run build-with-meta正式发布时可以指定资源版本前缀：
npm run build -- --build-version v1也可以通过环境变量指定版本：
BUILD_VERSION=v1 npm run build未指定版本时，Webpack 不添加版本前缀，只使用内容哈希；指定 --build-version 时，版本号会作为资源文件名前缀。构建产物位于 dist/，其中包含入口 HTML、CSS、JavaScript、原图和缩略图。
指定版本的目的是方便更新和维护（快速移除旧版本的资源）
手动生成缩略图和 metadata：
npm run generate:assets默认行为会覆盖 metadata.json。保留现有 metadata：
npm run generate:assets -- --keep-meta也可以单独执行：
npm run generate:thumbnails
npm run generate:metadatanpm run dev默认地址为 http://127.0.0.1:8080。开发服务启动前会重新生成缩略图和 metadata。
保留已有 metadata：
npm run dev-with-meta可以通过环境变量调整监听地址和端口：
HOST=0.0.0.0 PORT=3000 npm run dev图片列表只请求可视区域附近的缩略图。打开查看器时先显示缩略图占位，并在原图加载期间显示加载动画；当前原图加载后，会预取相邻图片，以便使用上一张、下一张导航时更快显示。
大图查看器支持：
- 鼠标滚轮和按钮缩放
- 键盘方向键切换图片
- 双击切换缩放
- 手机双指缩放和拖动
最终只需发布 dist/ 内容。入口页建议设置为 no-cache 或要求边缘节点重新验证；带内容哈希的图片、CSS 和 JavaScript 可以设置较长缓存时间。