update realtime canvas ui
This commit is contained in:
Your Name
parent
6cee7a905d
commit
934cd866d3
@ -786,13 +786,25 @@ export function RealtimeCanvasDialog({
|
||||
|
||||
const statusBadge = useMemo(() => {
|
||||
if (status === "live")
|
||||
return { label: "实时中", className: "bg-emerald-50 text-emerald-700" };
|
||||
return {
|
||||
label: "实时中",
|
||||
className: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
|
||||
};
|
||||
if (status === "connecting") {
|
||||
return { label: "连接中", className: "bg-blue-50 text-blue-700" };
|
||||
return {
|
||||
label: "连接中",
|
||||
className: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
|
||||
};
|
||||
}
|
||||
if (status === "error")
|
||||
return { label: "异常", className: "bg-rose-50 text-rose-700" };
|
||||
return { label: "待启动", className: "bg-zinc-100 text-zinc-600" };
|
||||
return {
|
||||
label: "异常",
|
||||
className: "bg-rose-500/15 text-rose-600 dark:text-rose-400",
|
||||
};
|
||||
return {
|
||||
label: "待启动",
|
||||
className: "bg-muted text-muted-foreground",
|
||||
};
|
||||
}, [status]);
|
||||
|
||||
const selectedImageLayer = useMemo(
|
||||
@ -2654,9 +2666,9 @@ export function RealtimeCanvasDialog({
|
||||
}, [clearPreviewCanvas, resetCanvas]);
|
||||
|
||||
const compactToolButtonClass =
|
||||
"h-9 w-9 rounded-[16px] text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-900";
|
||||
"h-9 w-9 rounded-[16px] text-muted-foreground transition hover:bg-accent hover:text-foreground";
|
||||
const compactToolButtonActiveClass =
|
||||
"bg-black text-white hover:bg-black hover:text-white";
|
||||
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground";
|
||||
const currentModeLabel =
|
||||
brushMode === "select"
|
||||
? "鼠标"
|
||||
@ -2695,269 +2707,51 @@ export function RealtimeCanvasDialog({
|
||||
<DialogDescription>左侧绘制草图，右侧实时预览。</DialogDescription>
|
||||
</DialogHeader>
|
||||
)}
|
||||
<div className="pointer-events-none absolute top-4 right-4 left-4 z-50 hidden">
|
||||
<div className="pointer-events-auto rounded-[24px] border border-border/40 bg-background/95 shadow-xl backdrop-blur-md">
|
||||
<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-border/40 bg-background/80 px-3 shadow-sm backdrop-blur-md">
|
||||
<div className="flex items-center gap-2 pr-1">
|
||||
{siteLogo ? (
|
||||
<img
|
||||
alt={siteName}
|
||||
className="h-5 w-5 rounded object-contain"
|
||||
src={
|
||||
/^https?:\/\//i.test(siteLogo)
|
||||
? buildImageProxyUrl(siteLogo)
|
||||
: siteLogo
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<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 font-semibold text-sm text-zinc-900">
|
||||
{siteName}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-full px-2 py-1 font-medium text-xs",
|
||||
statusBadge.className
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 rounded-full",
|
||||
status === "live"
|
||||
? "animate-pulse bg-emerald-500"
|
||||
: status === "error"
|
||||
? "bg-rose-500"
|
||||
: "bg-zinc-400"
|
||||
)}
|
||||
/>
|
||||
{statusBadge.label}
|
||||
</span>
|
||||
<span className="hidden text-xs text-zinc-500 sm:inline">
|
||||
延迟 {adaptiveThrottleMs}ms
|
||||
</span>
|
||||
<div className="pointer-events-none absolute top-6 left-6 z-50 flex items-center gap-3">
|
||||
<div className="pointer-events-auto flex items-center gap-3 rounded-full border border-border/40 bg-background/80 px-4 py-2 shadow-sm backdrop-blur-md">
|
||||
{siteLogo ? (
|
||||
<img
|
||||
alt={siteName}
|
||||
className="h-6 w-6 rounded object-contain"
|
||||
src={
|
||||
/^https?:\/\//i.test(siteLogo)
|
||||
? buildImageProxyUrl(siteLogo)
|
||||
: siteLogo
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-6 w-6 items-center justify-center rounded bg-primary text-primary-foreground">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
)}
|
||||
<span className="font-semibold text-foreground text-sm">
|
||||
{siteName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
|
||||
<Button
|
||||
className="h-8 w-8 rounded-full"
|
||||
onClick={() => void saveCurrentProject()}
|
||||
size="icon"
|
||||
title="保存项目"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
className="h-8 w-8 rounded-full"
|
||||
onClick={() => {
|
||||
refreshSavedProjects();
|
||||
setProjectPanelOpen((openState) => !openState);
|
||||
}}
|
||||
size="icon"
|
||||
title="项目列表"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<FolderOpen className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
className="h-8 w-8 rounded-full"
|
||||
onClick={startBlankProject}
|
||||
size="icon"
|
||||
title="新建空白"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
|
||||
<Button
|
||||
className={cn(
|
||||
"h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
|
||||
brushMode === "select" && "bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("select");
|
||||
}}
|
||||
size="icon"
|
||||
title="鼠标"
|
||||
variant="ghost"
|
||||
>
|
||||
<MousePointer2 className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
|
||||
brushMode === "brush" && "bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("brush");
|
||||
}}
|
||||
size="icon"
|
||||
title="画笔"
|
||||
variant="ghost"
|
||||
>
|
||||
<Paintbrush className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
|
||||
brushMode === "eraser" && "bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("eraser");
|
||||
}}
|
||||
size="icon"
|
||||
title="橡皮"
|
||||
variant="ghost"
|
||||
>
|
||||
<Eraser className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
|
||||
brushMode === "rect" && "bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("rect");
|
||||
}}
|
||||
size="icon"
|
||||
title="矩形"
|
||||
variant="ghost"
|
||||
>
|
||||
<Square className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
|
||||
brushMode === "circle" && "bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("circle");
|
||||
}}
|
||||
size="icon"
|
||||
title="圆形"
|
||||
variant="ghost"
|
||||
>
|
||||
<CircleIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100",
|
||||
brushMode === "line" && "bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("line");
|
||||
}}
|
||||
size="icon"
|
||||
title="直线"
|
||||
variant="ghost"
|
||||
>
|
||||
<Slash className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex h-10 shrink-0 items-center gap-2 rounded-full border border-border/40 bg-background/80 px-3 shadow-sm backdrop-blur-md">
|
||||
<button
|
||||
className="flex h-8 items-center gap-2 rounded-full border border-border/10 bg-background px-3 font-medium text-foreground text-xs transition hover:bg-muted"
|
||||
onClick={() => colorInputRef.current?.click()}
|
||||
title="选择画笔颜色"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="h-5 w-5 rounded-full border border-border/20 shadow-inner"
|
||||
style={{ backgroundColor: brushColor }}
|
||||
/>
|
||||
颜色
|
||||
</button>
|
||||
<input
|
||||
className="sr-only"
|
||||
onChange={(event) => setBrushColor(event.target.value)}
|
||||
ref={colorInputRef}
|
||||
title="自定义颜色"
|
||||
type="color"
|
||||
value={brushColor}
|
||||
/>
|
||||
<div className="flex w-[210px] items-center gap-3 rounded-full border border-border/10 bg-background px-3 py-1.5">
|
||||
<span className="whitespace-nowrap font-medium text-xs text-zinc-600">
|
||||
粗细 {brushSize}
|
||||
</span>
|
||||
<Slider
|
||||
className="min-w-[140px] flex-1"
|
||||
max={50}
|
||||
min={2}
|
||||
onValueChange={([val]) => setBrushSize(val)}
|
||||
rangeClassName="bg-sky-500"
|
||||
step={1}
|
||||
thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
|
||||
trackClassName="h-2.5 bg-zinc-200 shadow-inner"
|
||||
value={[brushSize]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-10 shrink-0 items-center gap-0.5 rounded-full border border-border/40 bg-background/80 px-1 shadow-sm backdrop-blur-md">
|
||||
<Button
|
||||
className="h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100"
|
||||
disabled={!canUndo}
|
||||
onClick={undo}
|
||||
size="icon"
|
||||
title="撤销"
|
||||
variant="ghost"
|
||||
>
|
||||
<Undo2 className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
className="h-8 w-8 rounded-full text-zinc-600 hover:bg-zinc-100"
|
||||
disabled={!canRedo}
|
||||
onClick={redo}
|
||||
size="icon"
|
||||
title="重做"
|
||||
variant="ghost"
|
||||
>
|
||||
<Redo2 className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{standalone ? (
|
||||
<div className="flex h-10 shrink-0 items-center rounded-full border border-black bg-black px-1 shadow-sm">
|
||||
<Button
|
||||
className="h-8 w-8 rounded-full text-white hover:bg-white/10 hover:text-white"
|
||||
onClick={() => onOpenChange(false)}
|
||||
size="icon"
|
||||
title="关闭页面"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="pointer-events-none absolute top-6 right-6 z-50">
|
||||
<div className="pointer-events-auto rounded-full border border-border/40 bg-background/80 p-1 shadow-sm backdrop-blur-md">
|
||||
<Button
|
||||
className="h-9 w-9 rounded-full text-muted-foreground transition hover:bg-muted hover:text-foreground"
|
||||
onClick={() => onOpenChange(false)}
|
||||
size="icon"
|
||||
title="关闭"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<X className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{saveProjectDialogOpen ? (
|
||||
<div className="-translate-x-1/2 absolute top-24 left-1/2 z-40 w-[22rem] max-w-[calc(100vw-2rem)] rounded-[24px] border border-border/40 bg-background/95 p-4 shadow-2xl backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-semibold text-sm text-zinc-900">
|
||||
<div className="font-semibold text-foreground text-sm">
|
||||
保存项目
|
||||
</div>
|
||||
<div className="text-xs text-zinc-400">
|
||||
<div className="text-muted-foreground text-xs">
|
||||
请输入项目名称后保存当前画布
|
||||
</div>
|
||||
</div>
|
||||
@ -2994,7 +2788,7 @@ export function RealtimeCanvasDialog({
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
className="h-10 flex-1 rounded-2xl bg-black text-white hover:bg-black/90"
|
||||
className="h-10 flex-1 rounded-2xl bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
onClick={() => void confirmSaveCurrentProject()}
|
||||
type="button"
|
||||
>
|
||||
@ -3007,10 +2801,10 @@ export function RealtimeCanvasDialog({
|
||||
<div className="absolute top-20 left-4 z-40 w-[22rem] max-w-[calc(100vw-2rem)] rounded-[24px] border border-border/40 bg-background/95 p-4 shadow-2xl backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-semibold text-sm text-zinc-900">
|
||||
<div className="font-semibold text-foreground text-sm">
|
||||
项目列表
|
||||
</div>
|
||||
<div className="text-xs text-zinc-400">
|
||||
<div className="text-muted-foreground text-xs">
|
||||
本地保存，便于下次继续编辑
|
||||
</div>
|
||||
</div>
|
||||
@ -3032,7 +2826,7 @@ export function RealtimeCanvasDialog({
|
||||
) : (
|
||||
savedProjects.map((project) => (
|
||||
<div
|
||||
className="rounded-2xl border border-black/10 bg-white p-2.5 shadow-sm"
|
||||
className="rounded-2xl border border-border bg-card p-2.5 shadow-sm"
|
||||
key={project.id}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
@ -3056,13 +2850,13 @@ export function RealtimeCanvasDialog({
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-[11px] text-zinc-400">
|
||||
<div className="flex h-full items-center justify-center text-[11px] text-muted-foreground">
|
||||
无预览
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 pt-1">
|
||||
<div className="truncate font-medium text-sm text-zinc-900">
|
||||
<div className="truncate font-medium text-sm text-foreground">
|
||||
{project.name}
|
||||
</div>
|
||||
</div>
|
||||
@ -3207,7 +3001,7 @@ export function RealtimeCanvasDialog({
|
||||
</div>
|
||||
<div className="mt-2 flex flex-1 flex-col items-center space-y-2 overflow-y-auto py-1">
|
||||
{imageLayers.length === 0 ? (
|
||||
<div className="rounded-2xl border border-black/10 border-dashed px-1 py-4 text-center text-[10px] text-zinc-400 leading-4">
|
||||
<div className="rounded-2xl border border-black/10 border-dashed px-1 py-4 text-center text-[10px] text-muted-foreground leading-4">
|
||||
暂无图层
|
||||
</div>
|
||||
) : (
|
||||
@ -3278,7 +3072,7 @@ export function RealtimeCanvasDialog({
|
||||
src={previewUrl}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center gap-3 text-zinc-400">
|
||||
<div className="flex flex-col items-center justify-center gap-3 text-muted-foreground">
|
||||
{status === "connecting" ? (
|
||||
<>
|
||||
<Loader2 className="h-8 w-8 animate-spin opacity-50" />
|
||||
@ -3287,7 +3081,6 @@ export function RealtimeCanvasDialog({
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="h-8 w-8 opacity-20" />
|
||||
<span className="text-sm">Start drawing to generate</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@ -3340,7 +3133,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">鼠标</div>
|
||||
<div className="text-xs text-zinc-500">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
选择图层并拖动位置
|
||||
</div>
|
||||
</TooltipContent>
|
||||
@ -3365,7 +3158,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">画笔</div>
|
||||
<div className="text-xs text-zinc-500">在画布上自由绘制</div>
|
||||
<div className="text-xs text-muted-foreground">在画布上自由绘制</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
@ -3388,7 +3181,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">橡皮</div>
|
||||
<div className="text-xs text-zinc-500">擦除当前草图笔触</div>
|
||||
<div className="text-xs text-muted-foreground">擦除当前草图笔触</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
@ -3409,7 +3202,7 @@ export function RealtimeCanvasDialog({
|
||||
</PopoverTrigger>
|
||||
</TooltipTrigger>
|
||||
<PopoverContent className="w-[220px] rounded-[18px] border-border/40 bg-background/95 p-3 shadow-xl backdrop-blur-md">
|
||||
<div className="mb-2 font-medium text-xs text-zinc-500">
|
||||
<div className="mb-2 font-medium text-xs text-muted-foreground">
|
||||
形状工具
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
@ -3417,7 +3210,7 @@ export function RealtimeCanvasDialog({
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "rect" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
@ -3432,7 +3225,7 @@ export function RealtimeCanvasDialog({
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "circle" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
@ -3447,7 +3240,7 @@ export function RealtimeCanvasDialog({
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "line" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
@ -3463,7 +3256,7 @@ export function RealtimeCanvasDialog({
|
||||
</Popover>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">形状</div>
|
||||
<div className="text-xs text-zinc-500">矩形、圆形与直线</div>
|
||||
<div className="text-xs text-muted-foreground">矩形、圆形与直线</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
@ -3486,11 +3279,11 @@ export function RealtimeCanvasDialog({
|
||||
<PopoverContent className="w-[250px] rounded-[18px] border-border/40 bg-background/95 p-4 shadow-xl backdrop-blur-md">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="font-medium text-xs text-zinc-500">
|
||||
<div className="font-medium text-xs text-muted-foreground">
|
||||
颜色
|
||||
</div>
|
||||
<button
|
||||
className="flex h-10 w-full items-center justify-between rounded-xl border border-black/10 bg-white px-3 font-medium text-sm text-zinc-700"
|
||||
className="flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-3 font-medium text-foreground text-sm"
|
||||
onClick={() => colorInputRef.current?.click()}
|
||||
type="button"
|
||||
>
|
||||
@ -3512,9 +3305,9 @@ export function RealtimeCanvasDialog({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between font-medium text-xs text-zinc-500">
|
||||
<div className="flex items-center justify-between font-medium text-xs text-muted-foreground">
|
||||
<span>粗细</span>
|
||||
<span className="w-8 text-right text-zinc-900">
|
||||
<span className="w-8 text-right text-foreground">
|
||||
{brushSize}
|
||||
</span>
|
||||
</div>
|
||||
@ -3523,10 +3316,10 @@ export function RealtimeCanvasDialog({
|
||||
max={50}
|
||||
min={2}
|
||||
onValueChange={([val]) => setBrushSize(val)}
|
||||
rangeClassName="bg-black"
|
||||
rangeClassName="bg-primary"
|
||||
step={1}
|
||||
thumbClassName="h-5 w-5 border border-zinc-300 bg-white shadow-sm"
|
||||
trackClassName="h-2.5 bg-zinc-200 shadow-inner"
|
||||
thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
|
||||
trackClassName="h-2.5 bg-muted shadow-inner"
|
||||
value={[brushSize]}
|
||||
/>
|
||||
</div>
|
||||
@ -3535,7 +3328,7 @@ export function RealtimeCanvasDialog({
|
||||
</Popover>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">画笔设置</div>
|
||||
<div className="text-xs text-zinc-500">调整颜色和粗细</div>
|
||||
<div className="text-xs text-muted-foreground">调整颜色和粗细</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
@ -3555,7 +3348,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">上传图片</div>
|
||||
<div className="text-xs text-zinc-500">添加新的图片图层</div>
|
||||
<div className="text-xs text-muted-foreground">添加新的图片图层</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
@ -3572,7 +3365,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">保存项目</div>
|
||||
<div className="text-xs text-zinc-500">保存当前画布状态</div>
|
||||
<div className="text-xs text-muted-foreground">保存当前画布状态</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
@ -3592,7 +3385,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">项目列表</div>
|
||||
<div className="text-xs text-zinc-500">打开已保存项目</div>
|
||||
<div className="text-xs text-muted-foreground">打开已保存项目</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
@ -3609,7 +3402,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">新建空白</div>
|
||||
<div className="text-xs text-zinc-500">清空并开始新项目</div>
|
||||
<div className="text-xs text-muted-foreground">清空并开始新项目</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
@ -3630,7 +3423,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">撤销</div>
|
||||
<div className="text-xs text-zinc-500">回退上一步编辑</div>
|
||||
<div className="text-xs text-muted-foreground">回退上一步编辑</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
@ -3648,14 +3441,14 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">重做</div>
|
||||
<div className="text-xs text-zinc-500">恢复已撤销操作</div>
|
||||
<div className="text-xs text-muted-foreground">恢复已撤销操作</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{standalone ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className="h-9 w-9 rounded-[16px] bg-black text-white transition hover:bg-black/90 hover:text-white"
|
||||
className="h-9 w-9 rounded-[16px] bg-primary text-primary-foreground transition hover:bg-primary/90 hover:text-primary-foreground"
|
||||
onClick={() => onOpenChange(false)}
|
||||
size="icon"
|
||||
type="button"
|
||||
@ -3666,7 +3459,7 @@ export function RealtimeCanvasDialog({
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">关闭页面</div>
|
||||
<div className="text-xs text-zinc-500">返回上一层画布</div>
|
||||
<div className="text-xs text-muted-foreground">返回上一层画布</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
@ -3688,39 +3481,10 @@ export function RealtimeCanvasDialog({
|
||||
placeholder="输入指令，基于当前画布实时生成"
|
||||
value={prompt}
|
||||
/>
|
||||
<div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-full px-2.5 py-1.5 font-medium text-[11px]",
|
||||
statusBadge.className
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 rounded-full",
|
||||
status === "live"
|
||||
? "animate-pulse bg-emerald-500"
|
||||
: status === "error"
|
||||
? "bg-rose-500"
|
||||
: "bg-zinc-400"
|
||||
)}
|
||||
/>
|
||||
{statusBadge.label}
|
||||
</span>
|
||||
<span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
|
||||
延迟 {adaptiveThrottleMs}ms
|
||||
</span>
|
||||
<span className="rounded-full bg-black px-2.5 py-1.5 font-medium text-[11px] text-white">
|
||||
当前工具 {currentModeLabel}
|
||||
</span>
|
||||
<span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
|
||||
{currentModeDescription}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-end">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
className="h-9 shrink-0 rounded-full bg-black px-4 font-medium text-white hover:bg-black/90"
|
||||
className="h-9 shrink-0 rounded-full bg-primary px-4 font-medium text-primary-foreground hover:bg-primary/90"
|
||||
disabled={status === "connecting"}
|
||||
onClick={triggerGenerate}
|
||||
size="sm"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user