mirror of
https://git.fightbot.fun/hxuanyu/BingPaper.git
synced 2026-02-15 16:59:32 +08:00
前端公共部分开发完成，支持图片展示功能
This commit is contained in:
185
webapp/src/views/Home.vue
Normal file
185
webapp/src/views/Home.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-b from-gray-900 via-gray-800 to-gray-900">
|
||||
<!-- Hero Section - 今日图片 -->
|
||||
<section class="relative h-screen w-full overflow-hidden">
|
||||
<div v-if="todayLoading" class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-12 h-12 border-4 border-white/20 border-t-white rounded-full animate-spin"></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="todayImage" class="relative h-full w-full group">
|
||||
<!-- 背景图片 -->
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
:src="getTodayImageUrl()"
|
||||
:alt="todayImage.title || 'Today\'s Bing Image'"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<!-- 内容叠加层 -->
|
||||
<div class="relative h-full flex flex-col justify-end p-8 md:p-16 z-10">
|
||||
<div class="max-w-4xl space-y-4 transform transition-transform duration-500 group-hover:translate-y-[-10px]">
|
||||
<div class="inline-block px-4 py-2 bg-white/10 backdrop-blur-md rounded-full text-white/90 text-sm font-medium">
|
||||
今日精选 · {{ formatDate(todayImage.date) }}
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-white leading-tight drop-shadow-2xl">
|
||||
{{ todayImage.title || '必应每日一图' }}
|
||||
</h1>
|
||||
|
||||
<p v-if="todayImage.copyright" class="text-lg md:text-xl text-white/80 max-w-2xl">
|
||||
{{ todayImage.copyright }}
|
||||
</p>
|
||||
|
||||
<div class="flex gap-4 pt-4">
|
||||
<button
|
||||
@click="viewImage(todayImage.date!)"
|
||||
class="px-6 py-3 bg-white text-gray-900 rounded-lg font-semibold hover:bg-white/90 transition-all transform hover:scale-105 shadow-xl"
|
||||
>
|
||||
查看大图
|
||||
</button>
|
||||
<button
|
||||
v-if="todayImage.quiz"
|
||||
@click="openQuiz(todayImage.quiz)"
|
||||
class="px-6 py-3 bg-white/10 backdrop-blur-md text-white rounded-lg font-semibold hover:bg-white/20 transition-all border border-white/30"
|
||||
>
|
||||
了解更多
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 滚动提示 -->
|
||||
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery Section - 历史图片 -->
|
||||
<section class="py-16 px-4 md:px-8 lg:px-16">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||
历史精选
|
||||
</h2>
|
||||
|
||||
<!-- 图片网格 -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="(image, index) in images"
|
||||
:key="image.date || index"
|
||||
class="group relative aspect-video rounded-xl overflow-hidden cursor-pointer transform transition-all duration-300 hover:scale-105 hover:shadow-2xl"
|
||||
@click="viewImage(image.date!)"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<img
|
||||
:src="getImageUrl(image.date!)"
|
||||
:alt="image.title || 'Bing Image'"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<!-- 悬浮信息层 -->
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-0 left-0 right-0 p-6 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
|
||||
<div class="text-xs text-white/70 mb-2">
|
||||
{{ formatDate(image.date) }}
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-white mb-2 line-clamp-2">
|
||||
{{ image.title || '未命名' }}
|
||||
</h3>
|
||||
<p v-if="image.copyright" class="text-sm text-white/80 line-clamp-2">
|
||||
{{ image.copyright }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<div class="mt-12 text-center">
|
||||
<div v-if="loading" class="inline-flex items-center gap-2 text-white/60">
|
||||
<div class="w-5 h-5 border-2 border-white/20 border-t-white/60 rounded-full animate-spin"></div>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-else-if="hasMore"
|
||||
@click="loadMore"
|
||||
class="px-8 py-3 bg-white/10 backdrop-blur-md text-white rounded-lg font-semibold hover:bg-white/20 transition-all border border-white/30"
|
||||
>
|
||||
加载更多
|
||||
</button>
|
||||
|
||||
<p v-else class="text-white/40">
|
||||
已加载全部图片
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-8 text-center text-white/40 border-t border-white/10">
|
||||
<p>数据来源于必应每日一图 API</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTodayImage, useImageList } from '@/composables/useImages'
|
||||
import { bingPaperApi } from '@/lib/api-service'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 获取今日图片
|
||||
const { image: todayImage, loading: todayLoading } = useTodayImage()
|
||||
|
||||
// 获取图片列表
|
||||
const { images, loading, hasMore, loadMore } = useImageList(30)
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取今日图片 URL
|
||||
const getTodayImageUrl = () => {
|
||||
return bingPaperApi.getTodayImageUrl('UHD', 'jpg')
|
||||
}
|
||||
|
||||
// 获取图片 URL
|
||||
const getImageUrl = (date: string) => {
|
||||
return bingPaperApi.getImageUrlByDate(date, '1920x1080', 'jpg')
|
||||
}
|
||||
|
||||
// 查看图片详情
|
||||
const viewImage = (date: string) => {
|
||||
router.push(`/image/${date}`)
|
||||
}
|
||||
|
||||
// 打开必应 quiz 链接
|
||||
const openQuiz = (quiz: string) => {
|
||||
// 拼接完整的必应地址
|
||||
const bingUrl = `https://www.bing.com${quiz}`
|
||||
window.open(bingUrl, '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
247
webapp/src/views/ImageView.vue
Normal file
247
webapp/src/views/ImageView.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 bg-black z-50 overflow-hidden">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-16 h-16 border-4 border-white/20 border-t-white rounded-full animate-spin"></div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<div v-else-if="image" class="relative h-full w-full">
|
||||
<!-- 全屏图片 -->
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<img
|
||||
:src="getFullImageUrl()"
|
||||
:alt="image.title || 'Bing Image'"
|
||||
class="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 顶部工具栏 -->
|
||||
<div class="absolute top-0 left-0 right-0 bg-gradient-to-b from-black/80 to-transparent p-6 z-10">
|
||||
<div class="flex items-center justify-between max-w-7xl mx-auto">
|
||||
<button
|
||||
@click="goBack"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md text-white rounded-lg hover:bg-white/20 transition-all"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||
</svg>
|
||||
<span>返回</span>
|
||||
</button>
|
||||
|
||||
<div class="text-white/80 text-sm">
|
||||
{{ formatDate(image.date) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 信息悬浮层（类似 Windows 聚焦） -->
|
||||
<div
|
||||
v-if="showInfo"
|
||||
class="absolute bottom-24 left-8 right-8 md:left-16 md:right-auto md:max-w-md bg-black/60 backdrop-blur-xl rounded-2xl p-6 transform transition-all duration-500 z-10"
|
||||
:class="{ 'translate-y-0 opacity-100': showInfo, 'translate-y-4 opacity-0': !showInfo }"
|
||||
>
|
||||
<h2 class="text-2xl font-bold text-white mb-3">
|
||||
{{ image.title || '未命名' }}
|
||||
</h2>
|
||||
|
||||
<p v-if="image.copyright" class="text-white/80 text-sm mb-4 leading-relaxed">
|
||||
{{ image.copyright }}
|
||||
</p>
|
||||
|
||||
<!-- Quiz 链接 -->
|
||||
<a
|
||||
v-if="image.quiz"
|
||||
:href="getBingQuizUrl(image.quiz)"
|
||||
target="_blank"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg text-sm font-medium transition-all group"
|
||||
>
|
||||
<span>了解更多信息</span>
|
||||
<svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- 切换信息显示按钮 -->
|
||||
<button
|
||||
@click="showInfo = false"
|
||||
class="absolute top-4 right-4 p-2 hover:bg-white/10 rounded-lg transition-all"
|
||||
>
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部控制栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6 z-10">
|
||||
<div class="flex items-center justify-between max-w-7xl mx-auto">
|
||||
<!-- 日期切换按钮 -->
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
@click="previousDay"
|
||||
:disabled="navigating"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md text-white rounded-lg hover:bg-white/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">前一天</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="nextDay"
|
||||
:disabled="navigating || isToday"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md text-white rounded-lg hover:bg-white/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span class="hidden sm:inline">后一天</span>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 信息按钮 -->
|
||||
<button
|
||||
v-if="!showInfo"
|
||||
@click="showInfo = true"
|
||||
class="flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md text-white rounded-lg hover:bg-white/20 transition-all"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">显示信息</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<p class="text-white/60 mb-4">加载失败</p>
|
||||
<button
|
||||
@click="goBack"
|
||||
class="px-6 py-3 bg-white/10 backdrop-blur-md text-white rounded-lg hover:bg-white/20 transition-all"
|
||||
>
|
||||
返回首页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useImageByDate } from '@/composables/useImages'
|
||||
import { bingPaperApi } from '@/lib/api-service'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const currentDate = ref(route.params.date as string)
|
||||
const showInfo = ref(true)
|
||||
const navigating = ref(false)
|
||||
|
||||
// 使用 composable 获取图片数据
|
||||
const { image, loading, error, refetch } = useImageByDate(currentDate.value)
|
||||
|
||||
// 监听日期变化
|
||||
watch(currentDate, () => {
|
||||
refetch()
|
||||
})
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr?: string) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
weekday: 'long'
|
||||
})
|
||||
}
|
||||
|
||||
// 判断是否是今天
|
||||
const isToday = computed(() => {
|
||||
const today = new Date().toISOString().split('T')[0]
|
||||
return currentDate.value === today
|
||||
})
|
||||
|
||||
// 获取完整图片 URL
|
||||
const getFullImageUrl = () => {
|
||||
return bingPaperApi.getImageUrlByDate(currentDate.value, 'UHD', 'jpg')
|
||||
}
|
||||
|
||||
// 获取必应 quiz URL
|
||||
const getBingQuizUrl = (quiz: string) => {
|
||||
return `https://www.bing.com${quiz}`
|
||||
}
|
||||
|
||||
// 返回首页
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
// 前一天
|
||||
const previousDay = () => {
|
||||
if (navigating.value) return
|
||||
|
||||
navigating.value = true
|
||||
const date = new Date(currentDate.value)
|
||||
date.setDate(date.getDate() - 1)
|
||||
const newDate = date.toISOString().split('T')[0]
|
||||
|
||||
currentDate.value = newDate
|
||||
router.replace(`/image/${newDate}`)
|
||||
|
||||
setTimeout(() => {
|
||||
navigating.value = false
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 后一天
|
||||
const nextDay = () => {
|
||||
if (navigating.value || isToday.value) return
|
||||
|
||||
navigating.value = true
|
||||
const date = new Date(currentDate.value)
|
||||
date.setDate(date.getDate() + 1)
|
||||
const newDate = date.toISOString().split('T')[0]
|
||||
|
||||
currentDate.value = newDate
|
||||
router.replace(`/image/${newDate}`)
|
||||
|
||||
setTimeout(() => {
|
||||
navigating.value = false
|
||||
}, 500)
|
||||
}
|
||||
|
||||
// 键盘导航
|
||||
const handleKeydown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
previousDay()
|
||||
} else if (e.key === 'ArrowRight' && !isToday.value) {
|
||||
nextDay()
|
||||
} else if (e.key === 'Escape') {
|
||||
goBack()
|
||||
} else if (e.key === 'i' || e.key === 'I') {
|
||||
showInfo.value = !showInfo.value
|
||||
}
|
||||
}
|
||||
|
||||
// 添加键盘事件监听
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('keydown', handleKeydown)
|
||||
}
|
||||
|
||||
// 清理
|
||||
import { onUnmounted } from 'vue'
|
||||
onUnmounted(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user