图片编辑器全屏显示并显示网站LOGO和名称
- 恢复图片编辑器为全屏显示(fixed inset-0) - 标题栏显示网站LOGO和网站名(从系统设置获取) - 根据主题自动选择合适的LOGO(深色主题优先使用siteLogoDark) - 点击LOGO或网站名可跳转到首页 - 移除未使用的router导入
This commit is contained in:
parent
3669bde66c
commit
dbf10c1d02
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user