### [Plog – 个人摄影作品展示网站，一键部署](https://www.appmiao.com/article/2802)

**Published:** 2026-02-05T07:07:41

**Author:** 阿喵

**Excerpt:** Plog – 个人摄影作品展示网站摄影站 – 个人摄影作品展示网站 用镜头记录生活的美好瞬间，分享我的摄影作品。每一张照片都是一个故事，一段回忆，一种对生活的感悟。 项目截图 核心特性 📱 Live Photo 支持 支持 Android 

Plog – 个人摄影作品展示网站摄影站 – 个人摄影作品展示网站 用镜头记录生活的美好瞬间，分享我的摄影作品。每一张照片都是一个故事，一段回忆，一种对生活的感悟。

## 项目截图

![](https://pic.amiao.app/2026/02/26064905/72061.webp)

![](https://pic.amiao.app/2026/02/26064911/91619.webp)

## 核心特性

[](https://github.com/lyhxx/photography-station#-%E6%A0%B8%E5%BF%83%E7%89%B9%E6%80%A7)

### 📱 Live Photo 支持[](https://github.com/lyhxx/photography-station#-live-photo-%E6%94%AF%E6%8C%81)

支持 Android Motion Photo（已测试 vivo X200 Pro）：

-   **自动识别和分离** – 支持多种检测方式
    -   XMP 元数据检测（`vivo:LivePhoto="1"`, `GCamera:MicroVideo="1"`）
    -   二进制特征检测（兜底方案）
    -   自动提取视频并保存到 `uploads/live/`
-   **HEIC 格式转换** – 自动转换为 JPG
-   **交互体验**
    -   PC 端：鼠标悬停 LIVE 标记循环播放
    -   移动端：点击播放一次自动停止
-   **视频控制** – 静音按钮、播放状态图标
-   **管理后台** – 按住预览、类型标识、视频下载
-   **兼容性说明**
    -   ✅ 已测试：vivo X200 Pro
    -   ⚠️ 其他安卓手机（小米、OPPO、三星等）需自行测试
    -   ❌ iPhone Live Photo 暂不支持

### 🌈 HDR 照片支持[](https://github.com/lyhxx/photography-station#-hdr-%E7%85%A7%E7%89%87%E6%94%AF%E6%8C%81)

使用 Gain Map 技术正确渲染 HDR 照片：

-   **自动检测** – 识别 Gain Map 元数据（`Item:Semantic="GainMap"`）
-   **WebGL 渲染** – 高亮度图像渲染（基于 gainmap-js）
-   **元数据保留** – 上传时保留完整 HDR 信息
-   **标识显示** – 金色 HDR 徽章
-   **兼容性说明**
    -   ✅ 已测试：vivo X200 Pro
    -   ⚠️ 其他安卓手机需自行测试
    -   ❌ iPhone HDR 暂不支持

### 🎨 文件夹式 3D 相册[](https://github.com/lyhxx/photography-station#-%E6%96%87%E4%BB%B6%E5%A4%B9%E5%BC%8F-3d-%E7%9B%B8%E5%86%8C)

Apple 风格的相册展示：

-   **3D 层叠效果** – 3 层照片露出，营造文件夹感
-   **悬停动画** – 后层展开 + 旋转，模拟”打开”效果
-   **两种显示模式** – 通过 `galleryConfig.albumLayerMode` 配置
    -   `'color'` – 虚拟彩色（彩虹渐变色卡）
    -   `'photo'` – 真实照片（显示相册内第 2、3 张照片）
-   **直接浏览** – 点击相册直接打开照片弹窗

### 🖼️ 液态玻璃照片弹窗[](https://github.com/lyhxx/photography-station#%EF%B8%8F-%E6%B6%B2%E6%80%81%E7%8E%BB%E7%92%83%E7%85%A7%E7%89%87%E5%BC%B9%E7%AA%97)

Apple 风格的照片查看器：

-   **单张/多张模式** – 自动适配
-   **液态玻璃导航栏** – 底部缩略图导航
    -   增强模糊效果（60px blur + 200% 饱和度）
    -   渐变背景 + 多层阴影
    -   玻璃高光效果
-   **多种滚动方式**
    -   鼠标滚轮：垂直转横向（0.8 倍速）
    -   触摸板：双指左右滑动
    -   鼠标拖动：grab/grabbing 光标
    -   触摸屏：手指左右滑动
-   **流畅切换动画** – 方向性滑动 + 淡入淡出
-   **键盘导航** – 左右箭头切换 / ESC 关闭
-   **移动端优化** – 手势滑动 + 详情面板覆盖

### 🎭 Apple 风格交互系统[](https://github.com/lyhxx/photography-station#-apple-%E9%A3%8E%E6%A0%BC%E4%BA%A4%E4%BA%92%E7%B3%BB%E7%BB%9F)

统一的交互设计语言（`src/styles/interactions.css`）：

-   **按钮交互**
    -   hover：上移 + 阴影增强
    -   active：缩放 0.95 + 快速反馈
    -   图标按钮：放大 1.1 + 背景扩散
-   **卡片交互**
    -   hover：上移 4px + 放大 1.005
    -   active：缩放 0.98
    -   过渡时间：350ms
-   **链接交互**
    -   下划线动画：从中间向两边展开
    -   导航链接：底部细线动画
-   **标签交互**
    -   hover：放大 1.05 + 轻微阴影
    -   涟漪效果：点击扩散动画
-   **移动端优化**
    -   移除 hover 效果
    -   增强 active 反馈
    -   禁用点击高亮

### 🌓 深色模式[](https://github.com/lyhxx/photography-station#-%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F)

完整的深色模式支持：

-   **自动跟随系统** – 使用 `prefers-color-scheme`
-   **CSS 变量系统** – 统一管理颜色
    -   `--bg-primary` / `--bg-secondary`
    -   `--text-primary` / `--text-secondary` / `--text-tertiary`
    -   `--border-color` / `--nav-bg`
-   **所有组件适配** – 导航栏、卡片、弹窗、表单等
-   **阴影自适应** – 深色模式下阴影更深

### 📊 EXIF 信息管理[](https://github.com/lyhxx/photography-station#-exif-%E4%BF%A1%E6%81%AF%E7%AE%A1%E7%90%86)

完整的照片元数据处理：

-   **自动提取** – 使用 exifr 库
    -   相机型号（Make + Model）
    -   焦距（FocalLength）
    -   光圈（FNumber）
    -   快门速度（ExposureTime）
    -   ISO（ISO）
    -   拍摄时间（DateTimeOriginal）
-   **GPS 逆地理编码** – 高德地图 API
    -   自动转换为省市地址
    -   格式：`广东省.惠州市.惠城区`
-   **表单自动填充** – 上传时自动填入 EXIF 信息
-   **详情展示** – 照片弹窗中展示完整信息

### 🛠️ 管理后台[](https://github.com/lyhxx/photography-station#%EF%B8%8F-%E7%AE%A1%E7%90%86%E5%90%8E%E5%8F%B0)

Apple 液态玻璃风格的管理系统：

-   **图片上传** – 按钮式上传，支持预览，Live Photo 预览（按住播放），HDR 照片标识，EXIF 信息卡片式展示
-   **自动处理** – 生成 800px 缩略图，保留 HDR 元数据，提取 Live Photo 视频，HEIC 转 JPG
-   **图片管理** – 列表展示（Live/HDR 标签），编辑标题、分类、描述，删除同步清理文件
-   **分类管理** – 添加、编辑、删除分类，图标、描述配置
-   **批量检测脚本** – `npm run detect` 自动检测所有照片特性

### 🔍 SEO 优化[](https://github.com/lyhxx/photography-station#-seo-%E4%BC%98%E5%8C%96)

-   **动态 Meta 标签** – 每个页面独立的标题、描述、关键词
-   **Open Graph** – 社交分享优化
-   **结构化数据** – JSON-LD 支持
-   **自动生成** – robots.txt 和 sitemap.xml

### 🚀 性能优化[](https://github.com/lyhxx/photography-station#-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)

**代码分割** – 管理后台独立打包

**图片懒加载** – 延迟加载 + 骨架屏

**路由懒加载** – 按需加载页面

**缩略图分离** – 列表用小图，详情用原图

**图片尺寸预留** – 避免布局跳动

## 项目地址

github：[https://github.com/lyhxx/photography-station](https://github.com/lyhxx/photography-station)

demo演示站点：[https://p.javai.cn/](https://p.javai.cn/)

**Tags:** 摄影展, 摄影站, 源码, 照片墙

**Categories:** 开源项目

---