{"id":34913375,"url":"https://github.com/it-nuanxinpro/wallpaper-gallery","last_synced_at":"2026-04-01T18:05:14.426Z","repository":{"id":329575213,"uuid":"1119335953","full_name":"IT-NuanxinPro/wallpaper-gallery","owner":"IT-NuanxinPro","description":"基于 Vue 3 + Vite 7 的高清壁纸展示网站。支持 4K 预览下载、GSAP 动画、响应式设计、暗黑主题。","archived":false,"fork":false,"pushed_at":"2026-04-01T15:01:40.000Z","size":5578,"stargazers_count":181,"open_issues_count":0,"forks_count":37,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-04-01T16:25:27.098Z","etag":null,"topics":["element-plus","github-actions","gsap","postcss","sass","vant4","vue3","wallpaper"],"latest_commit_sha":null,"homepage":"https://wallpaper.061129.xyz/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IT-NuanxinPro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-19T05:45:42.000Z","updated_at":"2026-04-01T15:01:10.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/IT-NuanxinPro/wallpaper-gallery","commit_stats":null,"previous_names":["it-nuanxinpro/wallpaper-gallery"],"tags_count":48,"template":false,"template_full_name":null,"purl":"pkg:github/IT-NuanxinPro/wallpaper-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2Fwallpaper-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2Fwallpaper-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2Fwallpaper-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2Fwallpaper-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IT-NuanxinPro","download_url":"https://codeload.github.com/IT-NuanxinPro/wallpaper-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IT-NuanxinPro%2Fwallpaper-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31290745,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element-plus","github-actions","gsap","postcss","sass","vant4","vue3","wallpaper"],"created_at":"2025-12-26T12:00:31.160Z","updated_at":"2026-04-01T18:05:14.411Z","avatar_url":"https://github.com/IT-NuanxinPro.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://wallpaper.061129.xyz/favicon.svg\" width=\"120\" height=\"120\" alt=\"Wallpaper Gallery Logo\" /\u003e\n  \u003ch1\u003eWallpaper Gallery\u003c/h1\u003e\n  \u003cp\u003e一个专注精选 4K 高清壁纸质感与浏览体验的壁纸项目，覆盖电脑、手机、头像与每日 Bing 壁纸场景\u003c/p\u003e\n\n  \u003cp\u003e\n    \u003ca href=\"https://wallpaper.061129.xyz\"\u003e\u003cimg src=\"https://img.shields.io/badge/Deployed_with-Cloudflare_Pages-f38020?style=flat-square\u0026logo=cloudflare\u0026logoColor=white\" alt=\"Cloudflare Pages\"\u003e\u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Vue-3.5-4fc08d?style=flat-square\u0026logo=vue.js\u0026logoColor=white\" alt=\"Vue 3\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Vite-7.0-646cff?style=flat-square\u0026logo=vite\u0026logoColor=white\" alt=\"Vite 7\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\" alt=\"License\"\u003e\n  \u003c/p\u003e\n  \n  \u003cp\u003e\n    \u003ca href=\"https://wallpaper.061129.xyz\" target=\"_blank\"\u003e🌐 访问体验站\u003c/a\u003e | \n    \u003ca href=\"https://wallpaper-gallery-architecture.061129.xyz/\" target=\"_blank\"\u003e🏗️ 架构在线文档\u003c/a\u003e |\n    \u003ca href=\"https://linux.do\" target=\"_blank\"\u003e🤝 鸣谢社区 LINUX DO\u003c/a\u003e |\n    \u003ca href=\"#-特性\"\u003e✨ 功能亮点\u003c/a\u003e | \n    \u003ca href=\"#-技术栈\"\u003e🛠️ 技术栈实现\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003e 不追求内容堆砌，也不与鱼龙混杂的壁纸站混在一起。  \n\u003e 更看重精选、清晰度、系列划分与完整浏览体验。\n\n## ✨ 特性\n\n适合直接使用，也适合作为个人内容站、壁纸站或前端展示项目继续扩展。\n\n### 🎨 核心功能\n\n- **高清壁纸展示** - 支持 16K/8K/5K/4K 及更高分辨率壁纸\n- **四大系列** - 电脑壁纸、手机壁纸、头像、每日 Bing 壁纸\n- **部署友好** - 默认可直接 fork、同步线上数据并部署，无需先搭建图床\n- **账号体系与个人中心** - 支持登录、注册、认证回调、账号资料查看与安全设置\n  - 支持 `GitHub`、`Google`、`Linux.do` OAuth 登录\n  - 支持邮箱密码登录、启用密码、更新密码\n  - 支持第三方账号绑定 / 解绑与头像同步\n  - 第三方授权跳转与邮箱注册完成后都会切换到专属的 Auth Flow Panel，提供「正在跳转」「验证邮件已发送」「授权失败」等清晰提示，避免误触。\n- **个人壁纸库（Library）** - 提供 `收藏夹` 与 `我的喜欢` 两个独立入口\n  - 支持跨系列聚合查看与筛选\n  - 移动端仅展示手机壁纸与头像分区\n  - 卡片操作会根据当前 tab 自动收口，减少误操作\n- **头像自制工具** - PC 端专属在线头像制作功能\n  - 本地上传或在线链接导入图片\n  - 智能裁剪与实时预览（基于 Cropper.js）\n  - 圆形/方形头像切换，方形支持自定义圆角\n  - 自定义输出尺寸（100px-1000px）\n  - iPhone 真机预览效果\n  - 高质量 PNG 格式输出\n- **每日 Bing 壁纸** - 从 2019年6月至今约 2400+ 张必应精选壁纸\n  - 按年度分片加载，性能优异\n  - 直连 Bing CDN，无需额外存储\n- **智能裁剪与真机预览** - 电脑壁纸支持智能裁剪；手机壁纸与头像支持真机显示模式\n  - 自动适配屏幕分辨率，提供多种比例预设与自定义尺寸\n  - 支持实时预览、沉浸式全屏预览与高质量导出\n  - 手机壁纸与头像系列统一支持 iPhone 外观预览\n- **智能搜索** - 实时搜索建议、关键词高亮、回车确认搜索\n- **热门模块** - 首页按系列展示热门分类与热门关键词\n  - 热门分类点击后直接切换筛选\n  - 热门关键词点击后直接进入搜索\n  - 桌面端支持悬停预览热门标签关联壁纸\n  - 移动端支持紧凑栅格布局与展开 / 收起\n- **Bing 搜索优化** - 针对 Bing 系列做专门交互处理\n  - 月份热门词点击后直接切换月份\n  - 中文单图热门词点击后直接定位对应壁纸\n  - 手动搜索时自动取消当前月份限制\n  - 清空搜索后恢复到当前月份浏览状态\n- **多种排序** - 按时间、热门、大小、名称排序\n- **动态分类** - 自动从壁纸数据中提取分类，按数量排序\n- **格式筛选** - 按 JPG/PNG 格式筛选\n- **分辨率筛选** - 仅电脑壁纸系列支持，按 16K/8K/5K+/4K+/4K/2K/超清/高清/标清精确筛选\n- **一键下载** - 直接下载原图\n- **喜欢 / 收藏交互** - 登录后支持即时标记与跨页面状态同步\n  - 首页卡片提供始终可见的状态角标\n  - 首页筛选栏内显示 `已喜欢` / `已收藏` 汇总\n  - 操作成功和取消操作均有明确提示反馈\n\n### 🖼️ 视图与浏览\n\n- **多视图模式**\n  - 桌面端：网格/列表/瀑布流，支持 GSAP Flip 动画丝滑切换\n  - 移动端：网格/列表，支持手势左右滑动切换视图\n- **丝滑切换动画** - 基于 GSAP Flip 插件的视图模式切换动画，卡片平滑形变过渡\n- **移动端 Flex 瀑布流** - 采用 Flex + JS 分列算法\n- **导航滑块动画** - 系列切换时背景滑块平滑过渡，避免元素抖动\n- **动态宽高比** - 根据系列自动适配卡片比例（电脑16:10、手机9:16、头像1:1、Bing 16:9）\n- **全屏浏览** - 沉浸式全屏浏览模式，ESC 退出\n- **移动端无限滚动** - 滚动到底部自动加载更多\n- **今日精选** - 每日随机推荐精选壁纸（仅电脑壁纸系列）\n- **分页条数切换** - 支持 10/20/30/50 条每页，实时切换\n\n### 💫 用户体验\n\n- **高级感 UI 设计** - 紫蓝渐变主题色（#667eea → #764ba2）、丝滑动画\n- **版本检测与更新提示** - 自动检测新版本，优雅的底部提示栏\n- **智能设备检测** - 综合 User Agent、触摸支持、屏幕尺寸判断设备类型\n- **主题切换** - 深色/浅色/跟随系统/定时自动切换\n- **响应式设计** - 完美适配桌面端和移动端，支持 2K/4K 大屏优化\n- **欢迎横幅** - 首页精美渐变横幅，可关闭并记住状态\n- **移动端优化**\n  - 底部筛选弹窗\n  - 顶部搜索弹窗\n  - 侧边导航抽屉\n  - 手势滑动切换视图\n  - 移除 backdrop-filter 提升滚动性能\n  - 滚动锁定防止弹窗穿透\n  - 收藏夹仅保留手机壁纸 / 头像标签，更符合移动端使用场景\n- **用户偏好记忆** - 记住用户的系列选择、排序方式、视图模式\n- **本地缩略图** - 预生成 WebP 缩略图，首页加载更快\n- **深色模式细节补齐** - 手机壁纸弹窗、头像弹窗、标签与操作状态统一适配深色主题\n- **认证反馈面板** - OAuth 跳转前后使用 Lottie Loading / Success 面板、注册后显示邮箱验证提示，PC 与移动端都能第一时间获知登录是否成功。\n\n### 📊 数据统计\n\n- **浏览量统计** - 记录每张壁纸的浏览次数\n- **下载量统计** - 记录每张壁纸的下载次数\n- **用户交互统计** - 记录喜欢数、收藏数，并在首页与 Library 中回显\n- **热门排序** - 基于浏览量的热门壁纸排序\n- **热门轮播** - 首页展示最受欢迎的壁纸\n- **热门标签导出** - 基于浏览量、下载量与系列数据生成热门分类 / 热门关键词\n- **Supabase 后端** - 使用 Supabase 存储统计、认证与用户交互数据，支持原子递增\n\n### 🌱 使用体验\n\n- **默认可运行** - Fork 后同步一次线上数据即可本地启动\n- **文档齐全** - 提供 Fork 部署指南、统计系统说明与架构页\n- **渐进增强** - 不配置 Supabase 时仍可浏览壁纸；配置后可启用登录、收藏、喜欢与个人壁纸库\n- **适合二开** - 组件、stores、services 与 utils 已按职责拆分\n\n## 🎯 项目定位\n\n- 面向个人壁纸站、内容展示站和开源作品集场景。\n- 优先保证视觉体验、浏览性能和 fork 后可维护性。\n- 当前仓库同时包含前端展示、数据同步、热门标签导出与统计接入能力。\n\n### 🧭 路由与导航\n\n- **智能重定向** - 首次访问根据设备类型自动跳转到推荐系列\n- **偏好优先** - 用户明确选择的系列优先于设备推荐\n- **循环检测** - 防止路由守卫产生无限循环\n- **历史优化** - 使用 replace 避免污染浏览历史\n- **账户路由** - 新增 `/login`、`/signup`、`/auth/callback`、`/account`、`/library`\n\n## 🛠️ 技术栈\n\n| 类别 | 技术 |\n| --- | --- |\n| 框架 | Vue 3.5 (Composition API + script setup) |\n| 构建工具 | Vite 7 |\n| UI 组件 | Element Plus (PC端 + Bing 日期选择) + Vant (移动端) |\n| 动画 | GSAP + Flip 插件 |\n| 图片裁剪 | Cropper.js |\n| 样式 | Sass + postcss-pxtorem (移动端适配) |\n| 路由 | Vue Router 4 |\n| 状态管理 | Pinia |\n| 数据统计 | Supabase (PostgreSQL) |\n| 部署 | Cloudflare Pages (全球分发)|\n| CI/CD | GitHub Actions (高性能构建)|\n| CDN 加速 | Cloudflare + jsDelivr |\n| 统计分析 | Cloudflare Web Analytics + Umami |\n\n### 构建优化\n\n- **CDN 外部化** - Vue / Vue Router / vue-demi 通过 CDN 加载（UMD 全局变量模式）\n- **代码分割** - Element Plus / Vant / GSAP 独立分包\n- **Brotli 压缩** - 静态资源预压缩，体积减少 70%+\n- **敏感代码混淆** - 关键业务逻辑混淆保护\n\n### CDN 缓存优化\n\n- **精准缓存控制** - 每张图片使用独立的 `cdnTag` 版本标签\n- **增量更新** - 新增图片不影响已有图片的 CDN 缓存\n- **时间戳备份** - 图片首次添加时间自动记录，确保 `cdnTag` 稳定不变\n- **自动化流程** - GitHub Actions 自动恢复时间戳、生成 cdnTag、构建部署\n\n## 🚀 快速开始\n\n### 首次运行\n\n```bash\n# 1. 克隆项目\ngit clone https://github.com/your-username/wallpaper-gallery.git\ncd wallpaper-gallery\n\n# 2. 安装依赖\npnpm install\n\n# 3. 同步数据（从线上 CDN）\npnpm sync\n\n# 4. 启动开发服务器\npnpm dev\n```\n\n### 常用命令\n\n```bash\n# 开发\npnpm dev              # 启动开发服务器\npnpm build            # 构建生产版本\npnpm build:seo        # 构建并生成预渲染 SEO 页面\npnpm preview          # 预览构建结果\n\n# 数据同步\npnpm sync             # 从线上 CDN 同步最新数据\npnpm export:hot-tags  # 导出热门标签数据\n\n# 代码质量\npnpm lint             # 检查代码规范\npnpm lint:fix         # 自动修复代码问题\npnpm test             # 运行测试\n```\n\n### 数据来源\n\n所有壁纸数据统一从线上 CDN 拉取：\n- **CDN 地址**：`https://wallpaper.061129.xyz/data`\n- **数据系列**：desktop（电脑壁纸）、mobile（手机壁纸）、avatar（头像）、bing（每日 Bing）\n- **更新方式**：GitHub Actions 自动部署\n- **本地缓存**：数据会缓存在 `public/data` 目录，支持离线开发\n\n## 📦 Fork 部署指南\n\n### 快速部署（推荐）\n\nFork 本项目后，无需任何配置即可使用：\n\n1. **Fork 仓库**\n   ```bash\n   # 在 GitHub 上点击 Fork 按钮\n   ```\n\n2. **克隆到本地**\n   ```bash\n   git clone https://github.com/your-username/wallpaper-gallery.git\n   cd wallpaper-gallery\n   ```\n\n3. **安装依赖并同步数据**\n   ```bash\n   pnpm install\n   pnpm sync\n   ```\n\n4. **启动开发**\n   ```bash\n   pnpm dev\n   ```\n\n5. **部署到 GitHub Pages**\n   - 项目已配置 GitHub Actions 自动部署\n   - 推送到 `main` 分支会自动触发部署\n   - 或在 Actions 页面手动触发部署\n\n### 数据说明\n\n- ✅ **无需配置图床**：数据自动从线上 CDN 拉取\n- ✅ **自动更新**：每天 UTC 18:00（北京时间次日 02:00）自动同步最新数据\n- ✅ **完整数据**：包含所有壁纸、分类、元数据\n- ✅ **热门标签数据**：包含热门分类与热门关键词统计，可直接用于首页热门模块\n- ✅ **开箱即用**：Fork 后直接可用，无需额外配置\n\n### 可选配置\n\n#### 启用登录、喜欢 / 收藏与统计功能（可选）\n\n如果需要启用账号登录、个人中心、收藏夹、我的喜欢，以及浏览量 / 下载量统计，需要配置 Supabase：\n\n1. **创建 Supabase 项目**\n   - 访问 [Supabase](https://supabase.com/) 创建免费项目\n   - 获取 Project URL、anon public key 和 service role key\n\n2. **配置 GitHub Secrets**\n   - 进入仓库 **Settings** → **Secrets and variables** → **Actions**\n   - 添加以下 Secrets：\n     - `VITE_SUPABASE_URL`：你的 Supabase Project URL\n     - `VITE_SUPABASE_ANON_KEY`：你的 Supabase anon public key\n     - `SUPABASE_SERVICE_ROLE_KEY`：用于同步壁纸资源与后台任务，请勿暴露到前端\n\n3. **创建数据库表**\n   - 参考 [Fork 部署指南](docs/Fork部署指南.md) 中的 SQL 脚本\n\n4. **本地开发环境变量**\n   - 可参考 `.env.example`\n   - 本地启用账号能力时需要配置：\n     - `VITE_SUPABASE_URL`\n     - `VITE_SUPABASE_ANON_KEY`\n   - 本地执行 `pnpm sync:assets` 时额外需要：\n     - `SUPABASE_SERVICE_ROLE_KEY`\n\n**注意**：这些能力都是渐进增强，不配置也不影响网站基础浏览与下载。\n\n#### 其他可选配置\n\n详细配置请参阅 **[Fork 部署指南](docs/Fork部署指南.md)**，包含：\n\n- ✅ 网站分析配置（Umami / Cloudflare）\n- ✅ 自定义域名配置\n- ✅ Cloudflare 缓存配置\n- ✅ 常见问题解答\n\n## 📁 项目结构\n\n```text\nwallpaper-gallery/\n├── .github/workflows/        # GitHub Actions 配置\n│   ├── deploy.yml            # 自动构建部署\n│   └── export-stats.yml      # 统计数据导出\n├── public/\n│   └── data/                 # 壁纸数据 JSON（从 CDN 同步）\n│       ├── desktop/          # 电脑壁纸分类数据\n│       ├── mobile/           # 手机壁纸分类数据\n│       ├── avatar/           # 头像分类数据\n│       ├── bing/             # 每日 Bing 壁纸数据\n│       └── stats/            # 热门统计数据\n├── scripts/\n│   ├── config/               # 脚本配置\n│   ├── sync-data.js          # 数据同步脚本（从 CDN 拉取）\n│   ├── export-stats.js       # 统计数据导出脚本\n│   ├── export-hot-tags.js    # 热门标签导出脚本\n│   ├── supabase-init.sql     # 新项目一键初始化 SQL\n│   ├── supabase-migration.sql      # 统计结构迁移脚本\n│   └── supabase-retire-legacy.sql  # 旧结构下线脚本\n├── docs/\n│   ├── Fork部署指南.md       # Fork 用户部署指南\n│   ├── Supabase统计系统.md   # Supabase 统计架构说明\n│   └── ...\n├── WORKFLOW.md               # 开发工作流程说明\n├── src/\n│   ├── assets/styles/        # 全局样式（Sass）\n│   ├── components/\n│   │   ├── avatar/           # 头像相关组件\n│   │   │   ├── DiyAvatarBanner.vue       # DIY 头像横幅\n│   │   │   └── AvatarMakerModal/         # 头像制作弹窗\n│   │   │       ├── index.vue             # 主弹窗\n│   │   │       ├── composables/          # 弹窗业务逻辑（useAvatarMakerWorkflow）\n│   │   │       ├── panel/               # 控制面板\n│   │   │       ├── preview/             # iPhone 预览\n│   │   │       ├── shared/              # 裁剪区域等共享组件\n│   │   │       └── source/              # 图片来源面板\n│   │   ├── common/\n│   │   │   ├── feedback/     # 反馈组件（Loading、通知、横幅）\n│   │   │   ├── form/         # 通用表单控件\n│   │   │   ├── navigation/   # 导航组件（返回顶部、分页）\n│   │   │   └── ui/           # 基础 UI 组件（WallpaperSeriesIcon 等）\n│   │   ├── login/            # 登录体验与认证场景\n│   │   │   ├── AuthExperience.vue       # 登录 / 注册统一体验页\n│   │   │   └── LoginCharacterScene.vue  # 登录动效场景\n│   │   ├── home/             # 首页组件\n│   │   │   ├── HomeModalHost.vue         # 弹窗宿主\n│   │   │   ├── MobileSeriesNotice.vue    # 移动端系列提示\n│   │   │   └── HotTagsPanel.vue          # 热门标签面板\n│   │   ├── layout/\n│   │   │   ├── AppHeader.vue             # 顶栏主组件\n│   │   │   └── header/\n│   │   │       ├── mobile/              # 移动端抽屉、搜索弹窗\n│   │   │       └── theme/               # 主题切换器\n│   │   ├── search/           # 搜索模块\n│   │   │   ├── index.vue                # 搜索栏主组件\n│   │   │   ├── composables/             # useSearchSuggestions\n│   │   │   └── shared/                  # 搜索建议面板\n│   │   └── wallpaper/        # 壁纸相关组件\n│   │       ├── card/                    # 壁纸卡片（CardInfo、CardMedia）\n│   │       ├── crop/                    # 智能裁剪（7 个子组件）\n│   │       ├── filter/                  # 筛选系统\n│   │       │   ├── index.vue            # 筛选主组件\n│   │       │   ├── desktop/             # 桌面端筛选控件\n│   │       │   ├── mobile/              # 移动端筛选栏与弹窗\n│   │       │   ├── fields/              # 日期选择器、分类下拉框\n│   │       │   └── shared/              # FilterSummary、ViewModeToggle\n│   │       ├── PortraitWallpaperModal/  # 竖屏壁纸弹窗\n│   │       │   ├── desktop/             # 桌面端弹窗\n│   │       │   ├── mobile/              # 移动端弹窗\n│   │       │   └── shared/              # 共享组件（PhoneFrame、ModalInfo 等）\n│   │       ├── WallpaperGrid/           # 壁纸网格\n│   │       │   ├── index.vue            # 网格主组件\n│   │       │   ├── composables/         # 动画、分页、触摸模式\n│   │       │   └── shared/              # 空状态、加载状态\n│   │       └── WallpaperModal/          # 横屏壁纸弹窗\n│   │           ├── desktop/             # 桌面端弹窗\n│   │           └── shared/              # BingWallpaperInfo\n│   ├── composables/          # 组合式函数\n│   │   ├── header/           # useHeaderNavSlider\n│   │   ├── home/             # useHomeDataLoader、useHomeSeriesSync、useWallpaperNavigator\n│   │   ├── useInteraction.js # 壁纸喜欢 / 收藏交互封装\n│   │   ├── useDevice.js      # 设备检测\n│   │   ├── useTheme.js       # 主题管理\n│   │   ├── useViewMode.js    # 视图模式\n│   │   ├── useScrollLock.js  # 滚动锁定\n│   │   └── ...\n│   ├── services/             # 服务层\n│   │   ├── interactionService.js        # 喜欢 / 收藏 / Library 数据服务\n│   │   ├── userActivityService.js       # 用户行为相关服务\n│   │   └── wallpaper/                  # 壁纸数据获取与解码\n│   ├── stores/               # Pinia 状态管理\n│   │   ├── auth.js           # 用户认证与资料状态\n│   │   ├── interaction.js    # 喜欢 / 收藏 / 统计状态\n│   │   └── ...\n│   ├── router/               # Vue Router 路由配置\n│   ├── views/                # 页面视图\n│   │   ├── Home.vue          # 首页\n│   │   ├── About.vue         # 关于页\n│   │   ├── Login.vue         # 登录页\n│   │   ├── Signup.vue        # 注册页\n│   │   ├── AuthCallback.vue  # 认证回调页\n│   │   ├── Account.vue       # 账号中心\n│   │   ├── Library.vue       # 收藏夹 / 我的喜欢\n│   │   └── NotFound.vue      # 404 页\n│   ├── workers/              # Web Worker\n│   └── utils/                # 工具函数（按领域分类）\n│       ├── auth/             # 认证与身份工具\n│       ├── avatar/           # 头像制作工具\n│       ├── cache/            # LRU 缓存\n│       ├── common/           # 通用工具（analytics、codec、format、sorting）\n│       ├── config/           # 常量配置\n│       ├── filter/           # 筛选默认值\n│       ├── integrations/     # 第三方集成（Supabase）\n│       ├── platform/         # 平台适配（flexible）\n│       └── wallpaper/        # 壁纸相关（errors、transformers）\n└── index.html\n```\n\n### 壁纸数据字段说明\n\n每张壁纸的 JSON 数据包含以下字段：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `id` | string | 唯一标识符 |\n| `filename` | string | 文件名 |\n| `category` | string | 分类名称 |\n| `subcategory` | string? | 二级分类（可选） |\n| `path` | string | 原图相对路径 |\n| `thumbnailPath` | string | 缩略图相对路径 |\n| `previewPath` | string? | 预览图相对路径（可选） |\n| `size` | number | 文件大小（字节） |\n| `format` | string | 图片格式（JPG/PNG） |\n| `createdAt` | string | 首次添加时间（ISO 8601） |\n| `cdnTag` | string? | CDN 版本标签（用于精准缓存控制） |\n| `resolution` | object? | 分辨率信息（可选） |\n| `tags` | string[] | 搜索标签 |\n\n### 热门标签数据说明\n\n热门模块数据位于 `public/data/stats/hot-tags-*.json`，按系列拆分：\n\n| 字段 | 类型 | 说明 |\n| --- | --- | --- |\n| `tag` | string | 标签文本 |\n| `score` | number | 综合热度分数 |\n| `views` | number | 浏览量 |\n| `downloads` | number | 下载量 |\n| `wallpaperCount` | number | 关联壁纸数量 |\n| `series` | string[] | 标签所属系列 |\n| `topWallpapers` | string[] | 热门预览壁纸文件名列表 |\n\n说明：\n- 电脑 / 手机 / 头像系列中，热门分类会优先映射到分类筛选，其他标签进入搜索。\n- Bing 系列中，月份标签会映射到月份筛选，单图中文标签会直接定位到对应壁纸。\n- Bing 手动搜索时会自动取消当前月份限制；清空搜索后再恢复到当前月份。\n- 热门标签数据可通过 `pnpm export:hot-tags` 重新导出。\n\n## 📱 四大系列\n\n| 系列 | 路由 | 设备可见性 | 宽高比 | 数据来源 |\n| --- | --- | --- | --- | --- |\n| 电脑壁纸 | `/desktop` | PC 端 | 16:10 | 自有图床 |\n| 手机壁纸 | `/mobile` | 移动端 | 9:16 | 自有图床 |\n| 头像 | `/avatar` | 全设备 | 1:1 | 自有图床 |\n| 每日 Bing 壁纸 | `/bing` | PC / 平板优先 | 16:9 | Bing CDN |\n\n- PC 端显示：电脑壁纸 + Bing + 手机壁纸 + 头像\n- 平板端显示：电脑壁纸 + Bing + 手机壁纸 + 头像\n- 移动端默认显示：手机壁纸 + 头像\n- Bing 和电脑壁纸在移动端可通过直达路由访问，但界面会给出大屏浏览提示\n\n## 🎯 性能优化\n\n- **CDN 外部化** - Vue / Vue Router / vue-demi 通过 unpkg CDN 加载\n- **CSS 内联** - 关键 CSS 内联到 HTML，加快首屏渲染\n- **CLS 优化** - 图片占位符、滚动条预留空间，避免布局偏移\n- **图片优化** - WebP 格式、缩略图预生成、懒加载、首屏图片高优先级加载\n- **代码分割** - 路由级别代码分割，按需加载；Element Plus / Vant / GSAP 独立分包\n- **预连接** - DNS 预解析、预连接到 CDN 域名（jsDelivr、Bing CDN、图片代理服务）\n- **Brotli 压缩** - 静态资源预压缩，体积减少 70%+\n- **2K/4K 大屏适配** - 容器最大宽度递增（1600/2000/2400px）\n- **Cloudflare 缓存** - 部署后自动清除缓存，确保用户及时获取更新\n- **Web Worker** - 大数据解码在 Worker 线程执行，避免阻塞主线程\n- **分类按需加载** - 首屏只加载前3个分类，剩余分类后台加载\n- **移动端性能优化** - 移除 backdrop-filter 模糊效果，提升滚动流畅度\n- **路由守卫精简** - 从 ~80 行简化到 ~30 行，减少不必要的计算\n- **内存泄漏修复** - 头像制作弹窗完善资源清理机制，防止 Image 对象和 Cropper 实例泄漏\n- **高性能混合构建** - 移除 Cloudflare 侧冗余的 Git 克隆逻辑，利用 GitHub Actions 强力算力同步图床数据，缩短构建耗时 80%。\n- **无感 CDN 刷新** - 部署成功后 Cloudflare 自动完成全球节点缓存刷新。\n\n## 📊 SEO 优化\n\n- **结构化数据** - Schema.org 标记，增强搜索引擎理解\n- **Sitemap** - 自动生成站点地图\n- **搜索引擎提交** - 支持百度主动推送、Google Search Console\n- **SPA 路由优化** - 通过 Cloudflare _redirects 解决单页应用刷新 404 问题，确保所有路径返回 200 OK，极大地提升搜索引擎抓取成功率。\n- **全球边缘加速** - 基于 Cloudflare 全球网络，首屏加载速度提升 50% 以上。\n \n## ☕ 赞赏支持\n\n如果这个项目对你有帮助，欢迎请作者喝杯咖啡 ☕\n\n本项目完全开源免费，所有壁纸资源均可自由使用。维护开源项目需要投入大量时间和精力，你的支持是我持续更新的动力！\n\n感谢每一位支持者 ❤️\n\n## 📄 License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fit-nuanxinpro%2Fwallpaper-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fit-nuanxinpro%2Fwallpaper-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fit-nuanxinpro%2Fwallpaper-gallery/lists"}