lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: properly center video tutorial modal and fix featured image dialog overflow

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Your Name 2026-01-31 21:51:35 +08:00
parent f8b5de0aaf
commit 876386ecec
2 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/(chat)/featured/page.tsx
View File

@ -311,17 +311,17 @@ export default function FeaturedPage() {
{/* 图片预览对话框 */}
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-4xl p-0 overflow-hidden">
<DialogContent className="max-w-4xl max-h-[90vh] p-0 overflow-hidden flex flex-col">
{selectedImage && (
<div className="flex flex-col">
<div className="flex flex-col max-h-[90vh] overflow-hidden">
{/* 图片 */}
<div className="relative bg-black flex items-center justify-center min-h-[400px] max-h-[70vh]">
<div className="relative bg-black flex items-center justify-center min-h-[300px] max-h-[50vh] flex-shrink-0">
<Image
src={selectedImage.originalUrl}
alt={selectedImage.prompt || "精选作品"}
width={800}
height={600}
className="object-contain max-h-[70vh]"
className="object-contain max-h-[50vh] w-auto"
quality={90}
/>
{/* 精选标记 */}
@ -334,7 +334,7 @@ export default function FeaturedPage() {
</div>
{/* 信息区域 */}
<div className="p-6 bg-white dark:bg-gray-900">
<div className="p-6 bg-white dark:bg-gray-900 overflow-y-auto flex-shrink-0">
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">

29
components/top-navbar.tsx
View File

@ -450,31 +450,44 @@ export function TopNavbar({
{/* 功能教程弹窗 - 全屏居中 */}
{showTutorialModal && currentTutorialVideo && (
<div
className="fixed top-0 left-0 right-0 bottom-0 z-[9999] flex items-center justify-center bg-black/95"
style={{ margin: 0, padding: 0 }}
className="fixed inset-0 z-[99999] bg-black/95"
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: 0,
padding: '20px',
}}
onClick={() => {
setShowTutorialModal(false);
setCurrentTutorialVideo(null);
}}
>
<div
className="relative w-[90vw] max-w-[1200px] mx-auto"
className="relative w-full max-w-[1200px]"
style={{ maxHeight: 'calc(100vh - 40px)' }}
onClick={(e) => e.stopPropagation()}
>
{/* 关闭按钮 - 右上角 */}
{/* 关闭按钮 - 右上角固定 */}
<button
onClick={() => {
setShowTutorialModal(false);
setCurrentTutorialVideo(null);
}}
className="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors z-10"
title="关闭"
className="absolute -top-10 right-0 text-white hover:text-red-400 transition-colors z-10"
style={{ position: 'absolute', top: '-40px', right: '0' }}
title="关闭 (ESC)"
>
<X className="h-10 w-10" />
<X className="h-8 w-8" />
</button>
{/* 标题 */}
<h3 className="text-white text-xl font-medium mb-4 text-center">{currentTutorialVideo.title}</h3>
<h3 className="text-white text-lg font-medium mb-3 text-center truncate px-4">{currentTutorialVideo.title}</h3>
{/* 视频播放器 */}
{currentTutorialVideo.videoUrl.includes('youtube.com') || currentTutorialVideo.videoUrl.includes('youtu.be') ? (