图片编辑器全屏显示并显示网站LOGO和名称

- 恢复图片编辑器为全屏显示(fixed inset-0)
- 标题栏显示网站LOGO和网站名(从系统设置获取)
- 根据主题自动选择合适的LOGO(深色主题优先使用siteLogoDark)
- 点击LOGO或网站名可跳转到首页
- 移除未使用的router导入
This commit is contained in:
Your Name 2025-12-30 00:58:27 +08:00
parent 3669bde66c
commit dbf10c1d02

View File

@ -2,6 +2,8 @@
import React, { useRef, useState, useEffect, useCallback } from "react";
import { createPortal } from "react-dom";
import Link from "next/link";
import { useTheme } from "next-themes";
import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand, Move, Maximize2, ZoomIn, ZoomOut, Loader2 } from "lucide-react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
@ -83,6 +85,12 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
const [isResizing, setIsResizing] = useState(false); // 尺寸调整处理中状态
const resizeCanvasRef = useRef<HTMLCanvasElement>(null);
const resizeContainerRef = useRef<HTMLDivElement>(null);
// 网站设置相关状态
const [siteName, setSiteName] = useState<string>("AI Chatbot");
const [siteLogo, setSiteLogo] = useState<string | null>(null);
const [siteLogoDark, setSiteLogoDark] = useState<string | null>(null);
const { resolvedTheme } = useTheme();
// 比例选项定义
const aspectRatios = [
@ -145,6 +153,18 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
// 确保在客户端渲染
useEffect(() => {
setMounted(true);
// 获取网站设置
fetch(`/api/site-settings?t=${Date.now()}`)
.then((res) => res.json())
.then((data) => {
if (data.siteName) setSiteName(data.siteName);
if (data.siteLogo) setSiteLogo(data.siteLogo);
if (data.siteLogoDark) setSiteLogoDark(data.siteLogoDark);
})
.catch((err) => {
console.error("[ImageAnnotator] Failed to fetch site settings:", err);
});
}, []);
// 加载图片
@ -965,20 +985,42 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
onConfirm(dataUrl);
};
// 决定显示哪个 LOGO(根据主题)
const displayLogo = resolvedTheme === "dark" && siteLogoDark
? siteLogoDark
: siteLogo;
// 弹窗内容
const modalContent = (
<div
className="fixed top-12 inset-x-0 bottom-0 z-[9999] flex items-center justify-center bg-background"
className="fixed inset-0 z-[9999] flex items-center justify-center bg-background"
onClick={onCancel}
>
{/* 弹窗容器 - 全屏显示(保留顶部导航栏) */}
{/* 弹窗容器 - 全屏显示 */}
<div
className="flex flex-col overflow-hidden w-full h-full"
onClick={(e) => e.stopPropagation()}
>
{/* 顶部标题栏 */}
<div className="flex items-center justify-between border-b px-4 py-3">
<span className="text-base font-medium">图片编辑</span>
<Link
href="/"
className="flex items-center gap-2 hover:opacity-80 transition-opacity"
onClick={(e) => e.stopPropagation()}
>
{displayLogo ? (
<>
<img
src={displayLogo}
alt={siteName}
className="h-6 w-auto"
/>
<span className="text-base font-medium">{siteName}</span>
</>
) : (
<span className="text-base font-medium">{siteName}</span>
)}
</Link>
<div className="flex items-center gap-2">
<Button
variant="ghost"