BingPaper/webapp/USAGE.md

必应每日一图 - 使用说明

✨ 功能特性

首页（画廊视图）

1. 顶部大图区域

   • 全屏展示今日必应图片
   • 显示图片标题、版权信息和日期
   • 渐变遮罩效果，突出文字内容
   • 悬停时内容向上浮动动画

2. 操作按钮

   • 查看大图：跳转到全屏图片查看页面
   • 了解更多：打开必应相关链接（基于 quiz 字段）

3. 历史图片画廊

   • 网格布局展示历史图片（响应式：手机1列、平板2列、桌面3列）
   • 鼠标悬停显示元数据信息
   • 卡片放大和图片缩放动画效果
   • 点击任意图片打开详情页

4. 无限滚动

   • 支持"加载更多"按钮
   • 自动检测是否还有更多图片
   • 加载状态提示

图片查看页面

1. 全屏展示

   • 以最高清晰度（UHD）展示图片
   • 黑色背景，图片居中显示
   • 顶部和底部渐变工具栏

2. 信息悬浮层（类似 Windows 聚焦壁纸）

   • 半透明背景，毛玻璃效果
   • 显示图片标题、版权信息
   • "了解更多信息"链接到必应相关页面
   • 可以通过按钮或键盘切换显示/隐藏

3. 日期导航

   • 前一天 / 后一天 按钮
   • 支持键盘方向键导航（← / →）
   • 今天的图片禁用"后一天"按钮
   • 导航时有节流保护

4. 键盘快捷键

   • ← : 前一天
   • → : 后一天
   • Esc : 返回首页
   • I : 切换信息显示

🎨 设计亮点

视觉效果

• 深色主题，突出图片内容
• 渐变背景和遮罩层
• 毛玻璃效果（backdrop-blur）
• 平滑的过渡动画
• 响应式设计，适配各种屏幕

交互体验

• 悬停效果（卡片放大、图片缩放）
• 加载状态提示
• 按钮禁用状态
• 键盘快捷键支持
• 流畅的页面切换

🚀 技术实现

组件结构

src/
├── views/
│   ├── Home.vue          # 首页画廊视图
│   └── ImageView.vue     # 图片查看页面
├── composables/
│   └── useImages.ts      # 数据获取逻辑
├── router/
│   └── index.ts          # 路由配置
└── lib/
    ├── api-service.ts    # API 服务
    ├── api-config.ts     # API 配置
    ├── api-types.ts      # 类型定义
    └── http-client.ts    # HTTP 客户端

路由配置

• / - 首页画廊视图
• /image/:date - 图片查看页面（动态路由）

API 集成

使用封装好的 API 服务：

• getTodayImageMeta() - 获取今日图片元数据
• getImages({ limit }) - 获取图片列表
• getImageMetaByDate(date) - 获取指定日期图片
• getTodayImageUrl() - 获取今日图片 URL
• getImageUrlByDate(date, variant) - 获取指定日期图片 URL

数据管理

使用 Vue Composables 模式：

• useTodayImage() - 管理今日图片数据
• useImageList() - 管理图片列表（支持分页）
• useImageByDate() - 管理特定日期图片数据

📱 响应式设计

断点

• 手机：< 640px（1列）
• 平板：640px - 1024px（2列）
• 桌面：> 1024px（3列）

适配特性

• 响应式网格布局
• 动态字体大小
• 移动端优化的按钮文字
• 触摸友好的交互

🎯 使用流程

1. 访问首页

   http://localhost:5173/
   

2. 浏览今日图片

   • 顶部大图展示当天必应图片
   • 查看标题和版权信息

3. 点击"了解更多"

   • 自动拼接完整的必应 URL
   • 在新标签页打开

4. 浏览历史图片

   • 向下滚动查看历史图片网格
   • 鼠标悬停查看详细信息
   • 点击"加载更多"获取更多图片

5. 全屏查看图片

   • 点击任意图片进入全屏模式
   • 使用按钮或键盘导航
   • 按 Esc 返回首页

🔧 开发

启动开发服务器

npm run dev

构建生产版本

npm run build

预览构建结果

npm run preview

📝 注意事项

1. API 配置

   • 确保后端 API 服务正在运行
   • 开发环境会自动代理 /api 请求到 http://localhost:8080

2. 图片分辨率

   • 首页顶部大图：UHD
   • 画廊缩略图：1920x1080
   • 全屏查看：UHD

3. 必应链接

   • quiz 字段需要拼接 https://www.bing.com 前缀
   • 例如：/search?q=... → https://www.bing.com/search?q=...

4. 日期格式

   • 使用 ISO 格式：YYYY-MM-DD
   • 例如：2024-01-27

🎨 自定义样式

可以通过修改 Tailwind CSS 类来调整样式：

• 渐变颜色：bg-gradient-to-*
• 透明度：bg-black/80
• 模糊效果：backdrop-blur-*
• 动画：transition-*、animate-*

🐛 已知问题

• 需要确保 API 返回正确的图片元数据
• 图片加载依赖网络速度
• 大图可能需要一些时间加载

🚀 未来优化

• 添加图片预加载
• 支持手势滑动切换（移动端）
• 添加图片下载功能
• 支持收藏功能
• 添加搜索和筛选
• 支持暗色/亮色主题切换