refine realtime canvas project list layout
This commit is contained in:
Your Name
parent
d670327f7b
commit
416cb49ecc
@ -13,7 +13,6 @@ import {
|
||||
Save,
|
||||
Send,
|
||||
Slash,
|
||||
SlidersHorizontal,
|
||||
Sparkles,
|
||||
Square,
|
||||
Undo2,
|
||||
@ -776,6 +775,8 @@ export function RealtimeCanvasDialog({
|
||||
const [projectPanelOpen, setProjectPanelOpen] = useState(false);
|
||||
const [saveProjectDialogOpen, setSaveProjectDialogOpen] = useState(false);
|
||||
const [pendingProjectName, setPendingProjectName] = useState("");
|
||||
const [brushPopoverOpen, setBrushPopoverOpen] = useState(false);
|
||||
const [eraserPopoverOpen, setEraserPopoverOpen] = useState(false);
|
||||
const [isDragImportActive, setIsDragImportActive] = useState(false);
|
||||
const [adaptiveThrottleMs, setAdaptiveThrottleMs] = useState<number>(
|
||||
defaultRealtimeConfig.transport.throttleInterval
|
||||
@ -2664,10 +2665,45 @@ export function RealtimeCanvasDialog({
|
||||
onOpenChange(false);
|
||||
}, [onOpenChange, standalone]);
|
||||
|
||||
const closeBrushSettingPopovers = useCallback(() => {
|
||||
setBrushPopoverOpen(false);
|
||||
setEraserPopoverOpen(false);
|
||||
}, []);
|
||||
|
||||
const activateSelectMode = useCallback(() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("select");
|
||||
closeBrushSettingPopovers();
|
||||
}, [closeBrushSettingPopovers]);
|
||||
|
||||
const activateBrushMode = useCallback(() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("brush");
|
||||
setEraserPopoverOpen(false);
|
||||
setBrushPopoverOpen(true);
|
||||
}, []);
|
||||
|
||||
const activateEraserMode = useCallback(() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("eraser");
|
||||
setBrushPopoverOpen(false);
|
||||
setEraserPopoverOpen(true);
|
||||
}, []);
|
||||
|
||||
const activateShapeMode = useCallback(
|
||||
(mode: Extract<RealtimeBrushMode, "rect" | "circle" | "line">) => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode(mode);
|
||||
closeBrushSettingPopovers();
|
||||
},
|
||||
[closeBrushSettingPopovers]
|
||||
);
|
||||
|
||||
const startBlankProject = useCallback(() => {
|
||||
setPrompt("");
|
||||
setPreviewUrl("");
|
||||
setProjectPanelOpen(false);
|
||||
closeBrushSettingPopovers();
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
drawingHasContentRef.current = false;
|
||||
hasLoadedInitialImageRef.current = true;
|
||||
@ -2677,12 +2713,12 @@ export function RealtimeCanvasDialog({
|
||||
dirtyRegionRef.current = null;
|
||||
setStatus("idle");
|
||||
setStatusMessage("新建空白项目");
|
||||
}, [clearPreviewCanvas, resetCanvas]);
|
||||
}, [clearPreviewCanvas, closeBrushSettingPopovers, resetCanvas]);
|
||||
|
||||
const compactToolButtonClass =
|
||||
"h-9 w-9 rounded-[16px] text-muted-foreground transition hover:bg-accent hover:text-foreground";
|
||||
const compactToolButtonActiveClass =
|
||||
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground";
|
||||
"bg-black text-white hover:bg-black hover:text-white";
|
||||
const currentModeLabel =
|
||||
brushMode === "select"
|
||||
? "鼠标"
|
||||
@ -2840,11 +2876,11 @@ export function RealtimeCanvasDialog({
|
||||
) : (
|
||||
savedProjects.map((project) => (
|
||||
<div
|
||||
className="rounded-2xl border border-border bg-card p-2.5 shadow-sm"
|
||||
className="rounded-2xl border border-border bg-card p-3 shadow-sm"
|
||||
key={project.id}
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<div className="h-16 w-16 overflow-hidden rounded-xl border border-border/10 bg-muted">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl border border-border/10 bg-muted">
|
||||
{project.coverImageUrl || project.previewUrl ? (
|
||||
<img
|
||||
alt={project.name}
|
||||
@ -2869,31 +2905,31 @@ export function RealtimeCanvasDialog({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 pt-1">
|
||||
<div className="truncate font-medium text-foreground text-sm">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate font-medium text-foreground text-sm leading-5">
|
||||
{project.name}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-end gap-2">
|
||||
<Button
|
||||
className="h-8 rounded-xl px-4"
|
||||
onClick={() => void openSavedProject(project.id)}
|
||||
size="sm"
|
||||
type="button"
|
||||
>
|
||||
打开
|
||||
</Button>
|
||||
<Button
|
||||
className="h-8 rounded-xl px-4"
|
||||
onClick={() => deleteSavedProject(project.id)}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex gap-2">
|
||||
<Button
|
||||
className="h-8 flex-1 rounded-xl"
|
||||
onClick={() => void openSavedProject(project.id)}
|
||||
size="sm"
|
||||
type="button"
|
||||
>
|
||||
打开
|
||||
</Button>
|
||||
<Button
|
||||
className="h-8 rounded-xl"
|
||||
onClick={() => deleteSavedProject(project.id)}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
@ -3133,10 +3169,7 @@ export function RealtimeCanvasDialog({
|
||||
compactToolButtonClass,
|
||||
brushMode === "select" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={() => {
|
||||
setSelectedLayerId(DRAW_LAYER_ID);
|
||||
setBrushMode("select");
|
||||
}}
|
||||
onClick={activateSelectMode}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
@ -3152,144 +3185,20 @@ export function RealtimeCanvasDialog({
|
||||
</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>
|
||||
<Popover onOpenChange={setBrushPopoverOpen} open={brushPopoverOpen}>
|
||||
<TooltipTrigger asChild>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
isShapeMode(brushMode) && compactToolButtonActiveClass
|
||||
brushMode === "brush" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={activateBrushMode}
|
||||
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-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" />
|
||||
<Paintbrush className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</TooltipTrigger>
|
||||
@ -3331,7 +3240,7 @@ export function RealtimeCanvasDialog({
|
||||
max={50}
|
||||
min={2}
|
||||
onValueChange={([val]) => setBrushSize(val)}
|
||||
rangeClassName="bg-primary"
|
||||
rangeClassName="bg-black"
|
||||
step={1}
|
||||
thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
|
||||
trackClassName="h-2.5 bg-muted shadow-inner"
|
||||
@ -3342,9 +3251,124 @@ export function RealtimeCanvasDialog({
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<TooltipContent>
|
||||
<div className="font-medium text-sm">画笔设置</div>
|
||||
<div className="font-medium text-sm">画笔</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
调整颜色和粗细
|
||||
点击后直接调整颜色和粗细
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<Popover onOpenChange={setEraserPopoverOpen} open={eraserPopoverOpen}>
|
||||
<TooltipTrigger asChild>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
className={cn(
|
||||
compactToolButtonClass,
|
||||
brushMode === "eraser" && compactToolButtonActiveClass
|
||||
)}
|
||||
onClick={activateEraserMode}
|
||||
size="icon"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Eraser className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</TooltipTrigger>
|
||||
<PopoverContent className="w-[220px] rounded-[18px] border-border/40 bg-background/95 p-4 shadow-xl backdrop-blur-md">
|
||||
<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-black"
|
||||
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>
|
||||
</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={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-muted-foreground text-xs">
|
||||
形状工具
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "rect" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => activateShapeMode("rect")}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Square className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "circle" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => activateShapeMode("circle")}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<CircleIcon className="h-4.5 w-4.5" />
|
||||
</Button>
|
||||
<Button
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "line" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
)}
|
||||
onClick={() => activateShapeMode("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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user