refine realtime canvas dialog ui
This commit is contained in:
Your Name
parent
934cd866d3
commit
de9bd67300
@ -2856,7 +2856,7 @@ export function RealtimeCanvasDialog({
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 pt-1">
|
||||
<div className="truncate font-medium text-sm text-foreground">
|
||||
<div className="truncate font-medium text-foreground text-sm">
|
||||
{project.name}
|
||||
</div>
|
||||
</div>
|
||||
@ -3111,365 +3111,377 @@ export function RealtimeCanvasDialog({
|
||||
/>
|
||||
<div className="-translate-x-1/2 pointer-events-none absolute bottom-4 left-1/2 z-30 flex w-[min(600px,calc(100vw-2rem))] flex-col items-center gap-2.5">
|
||||
<TooltipProvider delayDuration={120}>
|
||||
<div className="pointer-events-auto flex w-full flex-wrap items-center justify-center gap-1.5">
|
||||
<div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
|
||||
<Tooltip>
|
||||
<div className="pointer-events-auto flex flex-wrap items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 p-1.5 shadow-xl backdrop-blur-md">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
brushMode === "select" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("select");
|
||||
}}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<MousePointer2 className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">鼠标</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
选择图层并拖动位置
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
brushMode === "brush" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("brush");
|
||||
}}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Paintbrush className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">画笔</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
在画布上自由绘制
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
brushMode === "eraser" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("eraser");
|
||||
}}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Eraser className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">橡皮</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
擦除当前草图笔触
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<Popover>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
brushMode === "select" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("select");
|
||||
}}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<MousePointer2 className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">鼠标</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
选择图层并拖动位置
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
brushMode === "brush" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("brush");
|
||||
}}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Paintbrush className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">画笔</div>
|
||||
<div className="text-xs text-muted-foreground">在画布上自由绘制</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
brushMode === "eraser" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("eraser");
|
||||
}}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Eraser className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">橡皮</div>
|
||||
<div className="text-xs text-muted-foreground">擦除当前草图笔触</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<Popover>
|
||||
<TooltipTrigger asChild>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
isShapeMode(brushMode) && compactToolButtonActiveClass
|
||||
)}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Square className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</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-muted-foreground">
|
||||
形状工具
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "rect" &&
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("rect");
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Square className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "circle" &&
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("circle");
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<CircleIcon className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "line" &&
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("line");
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Slash className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">形状</div>
|
||||
<div className="text-xs text-muted-foreground">矩形、圆形与直线</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
|
||||
<Tooltip>
|
||||
<Popover>
|
||||
<TooltipTrigger asChild>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<SlidersHorizontal className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</TooltipTrigger>
|
||||
<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-muted-foreground">
|
||||
颜色
|
||||
</div>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<span>选择颜色</span>
|
||||
<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>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between font-medium text-xs text-muted-foreground">
|
||||
<span>粗细</span>
|
||||
<span className="w-8 text-right text-foreground">
|
||||
{brushSize}
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
className="w-full"
|
||||
max={50}
|
||||
min={2}
|
||||
onValueChange={([val]) => setBrushSize(val)}
|
||||
rangeClassName="bg-primary"
|
||||
step={1}
|
||||
thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
|
||||
trackClassName="h-2.5 bg-muted shadow-inner"
|
||||
value={[brushSize]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">画笔设置</div>
|
||||
<div className="text-xs text-muted-foreground">调整颜色和粗细</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
onClick={() => uploadInputRef.current?.click()}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Upload className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">上传图片</div>
|
||||
<div className="text-xs text-muted-foreground">添加新的图片图层</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
onClick={() => void saveCurrentProject()}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Save className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">保存项目</div>
|
||||
<div className="text-xs text-muted-foreground">保存当前画布状态</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
onClick={() => {
|
||||
refreshSavedProjects();
|
||||
setProjectPanelOpen((openState) => !openState);
|
||||
}}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<FolderOpen className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">项目列表</div>
|
||||
<div className="text-xs text-muted-foreground">打开已保存项目</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
onClick={startBlankProject}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Plus className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">新建空白</div>
|
||||
<div className="text-xs text-muted-foreground">清空并开始新项目</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-background/80 px-1.5 py-1.5 shadow-xl backdrop-blur-md">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
disabled={!canUndo}
|
||||
onClick={undo}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Undo2 className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">撤销</div>
|
||||
<div className="text-xs text-muted-foreground">回退上一步编辑</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
disabled={!canRedo}
|
||||
onClick={redo}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Redo2 className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">重做</div>
|
||||
<div className="text-xs text-muted-foreground">恢复已撤销操作</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{standalone ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
className="h-9 w-9 rounded-[16px] bg-primary text-primary-foreground transition hover:bg-primary/90 hover:text-primary-foreground"
|
||||
onClick={() => onOpenChange(false)}
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
isShapeMode(brushMode) && compactToolButtonActiveClass
|
||||
)}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<X className="h-4.5 w-4.5" />
|
||||
<Square className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">关闭页面</div>
|
||||
<div className="text-xs text-muted-foreground">返回上一层画布</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
</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-muted-foreground text-xs">
|
||||
形状工具
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "rect" &&
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("rect");
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Square className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "circle" &&
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("circle");
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<CircleIcon className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "line" &&
|
||||
"bg-primary text-primary-foreground hover:bg-primary"
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("line");
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Slash className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">形状</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
矩形、圆形与直线
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<Popover>
|
||||
<TooltipTrigger asChild>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<SlidersHorizontal className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</TooltipTrigger>
|
||||
<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-muted-foreground text-xs">
|
||||
颜色
|
||||
</div>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<span>选择颜色</span>
|
||||
<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>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between font-medium text-muted-foreground text-xs">
|
||||
<span>粗细</span>
|
||||
<span className="w-8 text-right text-foreground">
|
||||
{brushSize}
|
||||
</span>
|
||||
</div>
|
||||
<Slider
|
||||
className="w-full"
|
||||
max={50}
|
||||
min={2}
|
||||
onValueChange={([val]) => setBrushSize(val)}
|
||||
rangeClassName="bg-primary"
|
||||
step={1}
|
||||
thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
|
||||
trackClassName="h-2.5 bg-muted shadow-inner"
|
||||
value={[brushSize]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">画笔设置</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
调整颜色和粗细
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
onClick={() => uploadInputRef.current?.click()}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Upload className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">上传图片</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
添加新的图片图层
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
onClick={() => void saveCurrentProject()}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Save className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">保存项目</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
保存当前画布状态
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
onClick={() => {
|
||||
refreshSavedProjects();
|
||||
setProjectPanelOpen((openState) => !openState);
|
||||
}}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<FolderOpen className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">项目列表</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
打开已保存项目
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
onClick={startBlankProject}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Plus className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">新建空白</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
清空并开始新项目
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
disabled={!canUndo}
|
||||
onClick={undo}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Undo2 className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">撤销</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
回退上一步编辑
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
className={compactToolButtonClass}
|
||||
disabled={!canRedo}
|
||||
onClick={redo}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Redo2 className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">重做</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
恢复已撤销操作
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
{standalone ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
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"
|
||||
variant="ghost"
|
||||
>
|
||||
<X className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">关闭页面</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
返回上一层画布
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
|
||||
<div className="pointer-events-auto w-full rounded-[28px] border border-border/40 bg-background/80 p-[18px] shadow-2xl backdrop-blur-md">
|
||||
<div className="pointer-events-auto w-full rounded-[24px] border border-border/40 bg-background/80 p-3 shadow-2xl backdrop-blur-md">
|
||||
<Textarea
|
||||
className="min-h-[102px] resize-none border-0 bg-transparent p-0 text-[15px] leading-7 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
className="min-h-[48px] resize-none border-0 bg-transparent p-0 text-[15px] leading-6 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
onBlur={() => scheduleFlush(true, false)}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
@ -3481,7 +3493,28 @@ export function RealtimeCanvasDialog({
|
||||
placeholder="输入指令，基于当前画布实时生成"
|
||||
value={prompt}
|
||||
/>
|
||||
<div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-end">
|
||||
<div className="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"flex h-6 items-center gap-1.5 rounded-full px-2.5 font-medium text-xs",
|
||||
statusBadge.className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"h-1.5 w-1.5 rounded-full",
|
||||
status === "live" || status === "connecting"
|
||||
? "animate-pulse bg-current"
|
||||
: "bg-current"
|
||||
)}
|
||||
/>
|
||||
{statusBadge.label}
|
||||
</div>
|
||||
<div className="flex h-6 items-center rounded-full bg-muted px-2.5 font-medium text-muted-foreground text-xs">
|
||||
延迟 {adaptiveThrottleMs}ms
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
className="h-9 shrink-0 rounded-full bg-primary px-4 font-medium text-primary-foreground hover:bg-primary/90"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user