refine realtime canvas header branding
This commit is contained in:
Your Name
parent
fcfcbe1860
commit
e3f6bf5457
@ -703,6 +703,8 @@ export function RealtimeCanvasDialog({
|
||||
defaultRealtimeConfig.transport.throttleInterval
|
||||
);
|
||||
const [refreshToken, setRefreshToken] = useState(0);
|
||||
const [siteName, setSiteName] = useState("AI Chatbot");
|
||||
const [siteLogo, setSiteLogo] = useState<string | null>(null);
|
||||
|
||||
const statusBadge = useMemo(() => {
|
||||
if (status === "live") return { label: "实时中", className: "bg-emerald-50 text-emerald-700" };
|
||||
@ -723,6 +725,31 @@ export function RealtimeCanvasDialog({
|
||||
return selectedImageLayer.width / baseWidth;
|
||||
}, [selectedImageLayer]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
fetch(`/api/site-settings?t=${Date.now()}`, { cache: "no-store" })
|
||||
.then((res) => (res.ok ? res.json() : null))
|
||||
.then((data) => {
|
||||
if (!data || cancelled) return;
|
||||
if (typeof data.siteName === "string" && data.siteName.trim()) {
|
||||
setSiteName(data.siteName.trim());
|
||||
}
|
||||
if (typeof data.siteLogo === "string" && data.siteLogo.trim()) {
|
||||
setSiteLogo(data.siteLogo.trim());
|
||||
} else if (typeof data.siteLogoDark === "string" && data.siteLogoDark.trim()) {
|
||||
setSiteLogo(data.siteLogoDark.trim());
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn("[RealtimeCanvas] Failed to load site settings:", error);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const pushMetric = useCallback((event: any) => {
|
||||
metricsQueueRef.current.push(event);
|
||||
if (metricsQueueRef.current.length > 120) {
|
||||
@ -2257,7 +2284,22 @@ export function RealtimeCanvasDialog({
|
||||
<div className="pointer-events-auto rounded-[24px] border border-black/10 bg-white/98 shadow-[0_12px_36px_rgba(15,23,42,0.1)]">
|
||||
<div className="flex items-center gap-2 overflow-x-auto px-2 py-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
<div className="flex h-10 shrink-0 items-center gap-2 rounded-full border border-black/10 bg-zinc-50 px-3">
|
||||
<span className="text-sm font-semibold text-zinc-900">Realtime Canvas</span>
|
||||
<div className="flex items-center gap-2 pr-1">
|
||||
{siteLogo ? (
|
||||
<img
|
||||
src={/^https?:\/\//i.test(siteLogo) ? buildImageProxyUrl(siteLogo) : siteLogo}
|
||||
alt={siteName}
|
||||
className="h-5 w-5 rounded object-contain"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded bg-zinc-900 text-white">
|
||||
<Sparkles className="h-3 w-3" />
|
||||
</div>
|
||||
)}
|
||||
<span className="max-w-[11rem] truncate text-sm font-semibold text-zinc-900">
|
||||
{siteName}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium",
|
||||
@ -2284,36 +2326,36 @@ export function RealtimeCanvasDialog({
|
||||
<div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-black/10 bg-white px-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 rounded-full px-2.5 text-xs"
|
||||
className="h-8 w-8 rounded-full"
|
||||
onClick={() => void saveCurrentProject()}
|
||||
title="保存项目"
|
||||
>
|
||||
<Save className="mr-1.5 h-3.5 w-3.5" />
|
||||
保存项目
|
||||
<Save className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 rounded-full px-2.5 text-xs"
|
||||
className="h-8 w-8 rounded-full"
|
||||
onClick={() => {
|
||||
refreshSavedProjects();
|
||||
setProjectPanelOpen((openState) => !openState);
|
||||
}}
|
||||
title="项目列表"
|
||||
>
|
||||
<FolderOpen className="mr-1.5 h-3.5 w-3.5" />
|
||||
项目列表
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 rounded-full px-2.5 text-xs"
|
||||
className="h-8 w-8 rounded-full"
|
||||
onClick={startBlankProject}
|
||||
title="新建空白"
|
||||
>
|
||||
<Plus className="mr-1.5 h-3.5 w-3.5" />
|
||||
新建空白
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
{standalone ? (
|
||||
<Button
|
||||
@ -2648,40 +2690,34 @@ export function RealtimeCanvasDialog({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute left-3 top-28 bottom-4 z-10 flex w-[11.75rem] max-w-[38vw] flex-col rounded-[20px] border border-black/10 bg-white/96 p-3 shadow-xl">
|
||||
<div className="flex items-center justify-between border-b border-black/10 pb-3">
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-zinc-900">
|
||||
<div className="absolute left-3 top-28 bottom-4 z-10 flex w-[4.9rem] max-w-[20vw] flex-col rounded-[20px] border border-black/10 bg-white/96 p-2 shadow-xl">
|
||||
<div className="flex items-center justify-between border-b border-black/10 pb-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-50 text-zinc-900">
|
||||
<Layers3 className="h-4 w-4" />
|
||||
图层
|
||||
</div>
|
||||
<span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] text-zinc-500">
|
||||
<span className="rounded-full bg-zinc-100 px-1.5 py-0.5 text-[10px] text-zinc-500">
|
||||
{imageLayers.length} 张
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-3 flex-1 space-y-2 overflow-y-auto pr-1">
|
||||
<div className="mt-2 flex-1 space-y-2 overflow-y-auto pr-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"w-full rounded-2xl border px-3 py-2 text-left transition",
|
||||
"flex w-full flex-col items-center gap-1 rounded-2xl border px-1.5 py-2 text-center transition",
|
||||
selectedLayerId === DRAW_LAYER_ID
|
||||
? "border-black/20 bg-zinc-900 text-white shadow-sm"
|
||||
: "border-dashed border-black/10 bg-zinc-50 text-zinc-900 hover:bg-zinc-100"
|
||||
)}
|
||||
onClick={() => setSelectedLayerId(DRAW_LAYER_ID)}
|
||||
>
|
||||
<div className="text-[11px] font-medium text-zinc-600">画笔图层</div>
|
||||
<div
|
||||
className={cn(
|
||||
"mt-1 text-[11px]",
|
||||
selectedLayerId === DRAW_LAYER_ID ? "text-zinc-300" : "text-zinc-400"
|
||||
)}
|
||||
>
|
||||
固定在最上层，适合标注和结构草绘
|
||||
<Paintbrush className={cn("h-4 w-4", selectedLayerId === DRAW_LAYER_ID ? "text-white" : "text-zinc-700")} />
|
||||
<div className={cn("text-[10px] font-medium", selectedLayerId === DRAW_LAYER_ID ? "text-white" : "text-zinc-600")}>
|
||||
画笔
|
||||
</div>
|
||||
</button>
|
||||
{imageLayers.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-black/10 px-3 py-4 text-center text-xs text-zinc-400">
|
||||
暂无图片图层
|
||||
<div className="rounded-2xl border border-dashed border-black/10 px-1 py-4 text-center text-[10px] leading-4 text-zinc-400">
|
||||
暂无图层
|
||||
</div>
|
||||
) : (
|
||||
[...imageLayers].reverse().map((layer, displayIndex) => {
|
||||
@ -2692,60 +2728,64 @@ export function RealtimeCanvasDialog({
|
||||
<div
|
||||
key={layer.id}
|
||||
className={cn(
|
||||
"rounded-2xl border bg-white px-2.5 py-2 shadow-sm transition",
|
||||
"rounded-2xl border bg-white px-1.5 py-1.5 shadow-sm transition",
|
||||
selectedLayerId === layer.id
|
||||
? "border-black/20 ring-2 ring-black/5"
|
||||
: "border-black/10"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full"
|
||||
onClick={() => setSelectedLayerId(layer.id)}
|
||||
title={layer.name}
|
||||
>
|
||||
<img
|
||||
src={/^https?:\/\//i.test(layer.src) ? buildImageProxyUrl(layer.src) : layer.src}
|
||||
alt={layer.name}
|
||||
className="h-12 w-12 rounded-xl border border-black/10 object-cover"
|
||||
className="h-11 w-11 rounded-xl border border-black/10 object-cover"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full text-left"
|
||||
onClick={() => setSelectedLayerId(layer.id)}
|
||||
>
|
||||
<div className="truncate text-xs font-medium text-zinc-900">{layer.name}</div>
|
||||
</button>
|
||||
<div className="mt-1 text-[11px] text-zinc-400">
|
||||
{isTopMost ? "当前最上层" : isBottomMost ? "当前底层" : "中间图层"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
</button>
|
||||
<div className="mt-1 flex items-center justify-center gap-0.5">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-5 w-5 rounded-md p-0 text-zinc-500 hover:bg-zinc-100"
|
||||
onClick={() => setSelectedLayerId(layer.id)}
|
||||
title={isTopMost ? "当前最上层" : isBottomMost ? "当前底层" : "中间图层"}
|
||||
>
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-zinc-400" />
|
||||
</Button>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 rounded-lg text-zinc-500 hover:bg-zinc-100"
|
||||
className="h-5 w-5 rounded-md p-0 text-zinc-500 hover:bg-zinc-100"
|
||||
onClick={() => moveImageLayer(layer.id, "up")}
|
||||
disabled={isTopMost}
|
||||
title="上移图层"
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
<ChevronUp className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 rounded-lg text-zinc-500 hover:bg-zinc-100"
|
||||
className="h-5 w-5 rounded-md p-0 text-zinc-500 hover:bg-zinc-100"
|
||||
onClick={() => moveImageLayer(layer.id, "down")}
|
||||
disabled={isBottomMost}
|
||||
title="下移图层"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
<ChevronDown className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 rounded-lg text-zinc-500 hover:bg-rose-50 hover:text-rose-600"
|
||||
className="h-5 w-5 rounded-md p-0 text-zinc-500 hover:bg-rose-50 hover:text-rose-600"
|
||||
onClick={() => removeImageLayer(layer.id)}
|
||||
title="删除图层"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -2754,17 +2794,16 @@ export function RealtimeCanvasDialog({
|
||||
)}
|
||||
</div>
|
||||
{selectedImageLayer ? (
|
||||
<div className="mt-3 rounded-2xl border border-black/10 bg-zinc-50 p-3">
|
||||
<div className="flex items-center justify-between text-xs font-medium text-zinc-700">
|
||||
<span>图层缩放</span>
|
||||
<span>{Math.round(selectedImageLayerScale * 100)}%</span>
|
||||
<div className="mt-2 rounded-2xl border border-black/10 bg-zinc-50 p-1.5">
|
||||
<div className="text-center text-[10px] font-medium text-zinc-700">
|
||||
{Math.round(selectedImageLayerScale * 100)}%
|
||||
</div>
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<div className="mt-1 flex items-center justify-center gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 rounded-full"
|
||||
className="h-6 w-6 rounded-full"
|
||||
onClick={() => {
|
||||
const nextLayers = scaleImageLayer(
|
||||
selectedImageLayer.id,
|
||||
@ -2777,34 +2816,13 @@ export function RealtimeCanvasDialog({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="text-base leading-none">-</span>
|
||||
<span className="text-sm leading-none">-</span>
|
||||
</Button>
|
||||
<Slider
|
||||
value={[Math.round(selectedImageLayerScale * 100)]}
|
||||
min={20}
|
||||
max={300}
|
||||
step={5}
|
||||
onValueChange={([value]) => {
|
||||
scaleImageLayer(selectedImageLayer.id, value / 100);
|
||||
}}
|
||||
onValueCommit={([value]) => {
|
||||
const nextLayers = scaleImageLayer(selectedImageLayer.id, value / 100);
|
||||
if (nextLayers) {
|
||||
saveHistory(nextLayers);
|
||||
markCanvasDirty(null);
|
||||
scheduleFlush(true);
|
||||
}
|
||||
}}
|
||||
className="flex-1"
|
||||
trackClassName="h-2.5 bg-zinc-200 shadow-inner"
|
||||
rangeClassName="bg-sky-500"
|
||||
thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 rounded-full"
|
||||
className="h-6 w-6 rounded-full"
|
||||
onClick={() => {
|
||||
const nextLayers = scaleImageLayer(
|
||||
selectedImageLayer.id,
|
||||
@ -2817,7 +2835,7 @@ export function RealtimeCanvasDialog({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="text-base leading-none">+</span>
|
||||
<span className="text-sm leading-none">+</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -2825,11 +2843,11 @@ export function RealtimeCanvasDialog({
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="mt-3 h-10 rounded-xl bg-white"
|
||||
className="mt-2 h-10 rounded-xl bg-white px-0"
|
||||
onClick={() => uploadInputRef.current?.click()}
|
||||
title="添加图片图层"
|
||||
>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
添加图片图层
|
||||
<Upload className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user