lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: support dark mode in realtime canvas
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-04-28 15:19:41 +08:00
parent 1f1ffd2211
commit 7bf3363211
1 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
components/canvas/RealtimeCanvasDialog.tsx
View File

@ -883,22 +883,26 @@ export function RealtimeCanvasDialog({
if (status === "live") if (status === "live")
return { return {
label: "实时中", label: "实时中",
className: "border border-[#e5e5e5] bg-white text-[#111111]", className:
"border border-[#e5e5e5] bg-white text-[#111111] dark:border-white/12 dark:bg-white/10 dark:text-white",
}; };
if (status === "connecting") { if (status === "connecting") {
return { return {
label: "连接中", label: "连接中",
className: "border border-[#e5e5e5] bg-white text-[#111111]", className:
"border border-[#e5e5e5] bg-white text-[#111111] dark:border-white/12 dark:bg-white/10 dark:text-white",
}; };
} }
if (status === "error") if (status === "error")
return { return {
label: "异常", label: "异常",
className: "border border-[#e5e5e5] bg-[#fafafa] text-[#111111]", className:
"border border-[#e5e5e5] bg-[#fafafa] text-[#111111] dark:border-red-400/25 dark:bg-red-500/10 dark:text-red-100",
}; };
return { return {
label: "待启动", label: "待启动",
className: "border border-[#e5e5e5] bg-white text-[#666666]", className:
"border border-[#e5e5e5] bg-white text-[#666666] dark:border-white/12 dark:bg-white/8 dark:text-white/58",
}; };
}, [status]); }, [status]);
@ -3210,17 +3214,17 @@ export function RealtimeCanvasDialog({
}, [clearPreviewCanvas, closeBrushSettingPopovers, resetCanvas]); }, [clearPreviewCanvas, closeBrushSettingPopovers, resetCanvas]);
const floatingSurfaceClass = const floatingSurfaceClass =
"border border-[#e5e5e5] bg-white/96 shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_20px_42px_rgba(0,0,0,0.08)] backdrop-blur-xl"; "border border-[#e5e5e5] bg-white/96 text-[#111111] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_20px_42px_rgba(0,0,0,0.08)] backdrop-blur-xl dark:border-white/12 dark:bg-[#111317]/92 dark:text-white dark:shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_24px_56px_rgba(0,0,0,0.45)]";
const controlSurfaceClass = const controlSurfaceClass =
"border border-[#e5e5e5] bg-white text-[#111111] shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_1px_2px_rgba(0,0,0,0.04)]"; "border border-[#e5e5e5] bg-white text-[#111111] shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_1px_2px_rgba(0,0,0,0.04)] dark:border-white/12 dark:bg-white/[0.07] dark:text-white dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_1px_2px_rgba(0,0,0,0.35)]";
const softActionButtonClass = const softActionButtonClass =
"border border-[#111111] bg-[#111111] text-white shadow-[0_12px_24px_rgba(0,0,0,0.12)] transition hover:bg-black hover:text-white"; "border border-[#111111] bg-[#111111] text-white shadow-[0_12px_24px_rgba(0,0,0,0.12)] transition hover:bg-black hover:text-white dark:border-white dark:bg-white dark:text-[#111111] dark:shadow-[0_14px_30px_rgba(0,0,0,0.42)] dark:hover:bg-white/90 dark:hover:text-[#111111]";
const primaryActionButtonClass = const primaryActionButtonClass =
"border border-[#111111] bg-[#111111] text-white shadow-[0_16px_30px_rgba(0,0,0,0.18)] transition hover:bg-black hover:border-black"; "border border-[#111111] bg-[#111111] text-white shadow-[0_16px_30px_rgba(0,0,0,0.18)] transition hover:bg-black hover:border-black dark:border-white dark:bg-white dark:text-[#111111] dark:hover:border-white/90 dark:hover:bg-white/90";
const compactToolButtonClass = const compactToolButtonClass =
"h-9 w-9 rounded-[16px] border border-transparent text-[#666666] transition hover:border-[#e5e5e5] hover:bg-[#fafafa] hover:text-[#111111]"; "h-9 w-9 rounded-[16px] border border-transparent text-[#666666] transition hover:border-[#e5e5e5] hover:bg-[#fafafa] hover:text-[#111111] dark:text-white/58 dark:hover:border-white/12 dark:hover:bg-white/10 dark:hover:text-white";
const compactToolButtonActiveClass = const compactToolButtonActiveClass =
"border-[#111111] bg-[#111111] text-white shadow-[0_10px_20px_rgba(0,0,0,0.12)] hover:bg-black hover:text-white"; "border-[#111111] bg-[#111111] text-white shadow-[0_10px_20px_rgba(0,0,0,0.12)] hover:bg-black hover:text-white dark:border-white dark:bg-white dark:text-[#111111] dark:hover:bg-white/90 dark:hover:text-[#111111]";
const currentModeLabel = const currentModeLabel =
brushMode === "select" brushMode === "select"
? "鼠标" ? "鼠标"
@ -3267,14 +3271,14 @@ export function RealtimeCanvasDialog({
)} )}
> >
<button <button
className="inline-flex h-12 shrink-0 items-center gap-3 rounded-[22px] border border-white/90 bg-white/80 px-4 text-left text-[#111111] shadow-[inset_0_1px_0_rgba(255,255,255,0.95)] transition hover:bg-white" className="inline-flex h-12 shrink-0 items-center gap-3 rounded-[22px] border border-white/90 bg-white/80 px-4 text-left text-[#111111] shadow-[inset_0_1px_0_rgba(255,255,255,0.95)] transition hover:bg-white dark:border-white/12 dark:bg-white/8 dark:text-white dark:shadow-none dark:hover:bg-white/12"
onClick={handleCloseRealtime} onClick={handleCloseRealtime}
title={realtimeReturnCanvasItem.label} title={realtimeReturnCanvasItem.label}
type="button" type="button"
> >
<span className="flex h-8 w-8 items-center justify-center rounded-full border border-[#ececec] bg-white shadow-[0_8px_18px_rgba(0,0,0,0.06)]"> <span className="flex h-8 w-8 items-center justify-center rounded-full border border-[#ececec] bg-white shadow-[0_8px_18px_rgba(0,0,0,0.06)] dark:border-white/12 dark:bg-white/10 dark:shadow-none">
<CanvasToolbarIcon <CanvasToolbarIcon
className="h-4 w-4 text-[#111111]" className="h-4 w-4 text-[#111111] dark:text-white"
fallback={ArrowLeft} fallback={ArrowLeft}
item={realtimeReturnCanvasItem} item={realtimeReturnCanvasItem}
/> />
@ -3284,13 +3288,13 @@ export function RealtimeCanvasDialog({
</span> </span>
</button> </button>
<div className="inline-flex h-12 min-w-0 items-center gap-1 rounded-[22px] border border-[#ebebeb] bg-[#fafafa] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]"> <div className="inline-flex h-12 min-w-0 items-center gap-1 rounded-[22px] border border-[#ebebeb] bg-[#fafafa] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)] dark:border-white/12 dark:bg-white/8 dark:shadow-none">
<button <button
className={cn( className={cn(
"group inline-flex h-full min-w-0 items-center gap-2 rounded-[18px] px-4 text-[14px] font-medium tracking-[-0.02em] transition", "group inline-flex h-full min-w-0 items-center gap-2 rounded-[18px] px-4 text-[14px] font-medium tracking-[-0.02em] transition",
workspaceMode === "realtime" workspaceMode === "realtime"
? softActionButtonClass ? softActionButtonClass
: "border border-transparent bg-transparent text-[#666666] hover:bg-white hover:text-[#111111]" : "border border-transparent bg-transparent text-[#666666] hover:bg-white hover:text-[#111111] dark:text-white/58 dark:hover:bg-white/10 dark:hover:text-white"
)} )}
onClick={() => handleWorkspaceModeChange("realtime")} onClick={() => handleWorkspaceModeChange("realtime")}
type="button" type="button"
@ -3310,7 +3314,7 @@ export function RealtimeCanvasDialog({
"group inline-flex h-full min-w-0 items-center gap-2 rounded-[18px] px-4 text-[14px] font-medium tracking-[-0.02em] transition", "group inline-flex h-full min-w-0 items-center gap-2 rounded-[18px] px-4 text-[14px] font-medium tracking-[-0.02em] transition",
workspaceMode === "enhance-pro" workspaceMode === "enhance-pro"
? softActionButtonClass ? softActionButtonClass
: "border border-transparent bg-transparent text-[#666666] hover:bg-white hover:text-[#111111]" : "border border-transparent bg-transparent text-[#666666] hover:bg-white hover:text-[#111111] dark:text-white/58 dark:hover:bg-white/10 dark:hover:text-white"
)} )}
onClick={() => handleWorkspaceModeChange("enhance-pro")} onClick={() => handleWorkspaceModeChange("enhance-pro")}
type="button" type="button"
@ -3337,10 +3341,10 @@ export function RealtimeCanvasDialog({
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<div className="font-semibold text-[#111111] text-sm"> <div className="font-semibold text-[#111111] text-sm dark:text-white">
保存项目 保存项目
</div> </div>
<div className="text-[#666666] text-xs"> <div className="text-[#666666] text-xs dark:text-white/55">
请输入项目名称后保存当前画布 请输入项目名称后保存当前画布
</div> </div>
</div> </div>
@ -3395,10 +3399,10 @@ export function RealtimeCanvasDialog({
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<div className="font-semibold text-[#111111] text-sm"> <div className="font-semibold text-[#111111] text-sm dark:text-white">
项目列表 项目列表
</div> </div>
<div className="text-[#666666] text-xs"> <div className="text-[#666666] text-xs dark:text-white/55">
本地保存，便于下次继续编辑 本地保存，便于下次继续编辑
</div> </div>
</div> </div>
@ -3510,11 +3514,11 @@ export function RealtimeCanvasDialog({
) : ( ) : (
<> <>
{/* Main Canvas Area - Split View */} {/* Main Canvas Area - Split View */}
<div className="relative flex h-full w-full bg-[#fafafa]"> <div className="relative flex h-full w-full bg-[#fafafa] dark:bg-[#08090b]">
{/* Left: Input Canvas */} {/* Left: Input Canvas */}
<div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden border-[#e5e5e5] border-r"> <div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden border-[#e5e5e5] border-r dark:border-white/10">
<div <div
className="relative flex h-full w-full items-center justify-center bg-white" className="relative flex h-full w-full items-center justify-center bg-white dark:bg-[#0c0d10]"
onDragEnter={handleDragEnter} onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave} onDragLeave={handleDragLeave}
onDragOver={handleDragOver} onDragOver={handleDragOver}
@ -3523,7 +3527,7 @@ export function RealtimeCanvasDialog({
> >
<div className="pattern-grid-lg pointer-events-none absolute inset-0 opacity-[0.03]" /> <div className="pattern-grid-lg pointer-events-none absolute inset-0 opacity-[0.03]" />
{isDragImportActive ? ( {isDragImportActive ? (
<div className="absolute inset-6 z-20 flex items-center justify-center rounded-[28px] border-2 border-[#111111] border-dashed bg-white/92 font-medium text-[#111111] text-sm shadow-inner"> <div className="absolute inset-6 z-20 flex items-center justify-center rounded-[28px] border-2 border-[#111111] border-dashed bg-white/92 font-medium text-[#111111] text-sm shadow-inner dark:border-white/70 dark:bg-[#111317]/92 dark:text-white">
松开鼠标，上传图片到图层 松开鼠标，上传图片到图层
</div> </div>
) : null} ) : null}
@ -3625,9 +3629,9 @@ export function RealtimeCanvasDialog({
floatingSurfaceClass floatingSurfaceClass
)} )}
> >
<div className="flex items-center justify-center border-[#e5e5e5] border-b pb-3"> <div className="flex items-center justify-center border-[#e5e5e5] border-b pb-3 dark:border-white/12">
<div <div
className="flex h-8 w-8 items-center justify-center rounded-full border border-[#ececec] bg-white text-[#111111]" className="flex h-8 w-8 items-center justify-center rounded-full border border-[#ececec] bg-white text-[#111111] dark:border-white/12 dark:bg-white/10 dark:text-white"
title={realtimeLayerPanelItem.label} title={realtimeLayerPanelItem.label}
> >
<CanvasToolbarIcon <CanvasToolbarIcon
@ -3639,16 +3643,16 @@ export function RealtimeCanvasDialog({
</div> </div>
<div className="mt-2 flex flex-1 flex-col items-center space-y-2 overflow-y-auto py-1"> <div className="mt-2 flex flex-1 flex-col items-center space-y-2 overflow-y-auto py-1">
{imageLayers.length === 0 ? ( {imageLayers.length === 0 ? (
<div className="rounded-2xl border border-[#e5e5e5] border-dashed px-1 py-4 text-center text-[10px] text-[#666666] leading-4"> <div className="rounded-2xl border border-[#e5e5e5] border-dashed px-1 py-4 text-center text-[10px] text-[#666666] leading-4 dark:border-white/12 dark:text-white/55">
暂无图层 暂无图层
</div> </div>
) : ( ) : (
[...imageLayers].reverse().map((layer) => ( [...imageLayers].reverse().map((layer) => (
<button <button
className={cn( className={cn(
"flex h-12 w-12 shrink-0 items-center justify-center rounded-[18px] p-1.5 transition hover:bg-[#f5f5f5]", "flex h-12 w-12 shrink-0 items-center justify-center rounded-[18px] p-1.5 transition hover:bg-[#f5f5f5] dark:hover:bg-white/10",
selectedLayerId === layer.id selectedLayerId === layer.id
? "bg-[#f5f5f5] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]" ? "bg-[#f5f5f5] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:bg-white/10 dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.14)]"
: "" : ""
)} )}
draggable draggable
@ -3692,7 +3696,7 @@ export function RealtimeCanvasDialog({
{isLayerSplitEnabled ? ( {isLayerSplitEnabled ? (
<Button <Button
className={cn( className={cn(
"h-10 rounded-xl px-0 hover:bg-[#f5f5f5]", "h-10 rounded-xl px-0 hover:bg-[#f5f5f5] dark:hover:bg-white/10",
controlSurfaceClass controlSurfaceClass
)} )}
disabled={isLayerSplitImporting} disabled={isLayerSplitImporting}
@ -3714,7 +3718,7 @@ export function RealtimeCanvasDialog({
) : null} ) : null}
<Button <Button
className={cn( className={cn(
"h-10 rounded-xl px-0 hover:bg-[#f5f5f5]", "h-10 rounded-xl px-0 hover:bg-[#f5f5f5] dark:hover:bg-white/10",
controlSurfaceClass controlSurfaceClass
)} )}
disabled={isLayerSplitImporting} disabled={isLayerSplitImporting}
@ -3734,7 +3738,7 @@ export function RealtimeCanvasDialog({
</div> </div>
{/* Right: Output Preview */} {/* Right: Output Preview */}
<div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden bg-[#fcfcfc]"> <div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden bg-[#fcfcfc] dark:bg-[#0b0c0f]">
<div className="relative flex h-full w-full items-center justify-center"> <div className="relative flex h-full w-full items-center justify-center">
{previewUrl ? ( {previewUrl ? (
<img <img
@ -3743,7 +3747,7 @@ export function RealtimeCanvasDialog({
src={previewUrl} src={previewUrl}
/> />
) : ( ) : (
<div className="flex flex-col items-center justify-center gap-3 text-[#666666]"> <div className="flex flex-col items-center justify-center gap-3 text-[#666666] dark:text-white/55">
{status === "connecting" ? ( {status === "connecting" ? (
<> <>
<Loader2 className="h-8 w-8 animate-spin opacity-50" /> <Loader2 className="h-8 w-8 animate-spin opacity-50" />
@ -4210,7 +4214,7 @@ export function RealtimeCanvasDialog({
)} )}
> >
<Textarea <Textarea
className="min-h-[56px] resize-none border-0 bg-transparent px-1 py-0.5 text-[15px] leading-7 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0" className="min-h-[56px] resize-none border-0 bg-transparent px-1 py-0.5 text-[15px] text-[#111111] leading-7 caret-[#111111] shadow-none placeholder:text-[#9b9b9b] focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white dark:caret-white dark:placeholder:text-white/45"
onBlur={() => scheduleFlush(true, false)} onBlur={() => scheduleFlush(true, false)}
onChange={(e) => setPrompt(e.target.value)} onChange={(e) => setPrompt(e.target.value)}
onKeyDown={(event) => { onKeyDown={(event) => {
@ -4243,7 +4247,7 @@ export function RealtimeCanvasDialog({
/> />
{statusBadge.label} {statusBadge.label}
</div> </div>
<div className="flex h-6 items-center rounded-full border border-[#e5e5e5] bg-white px-2.5 font-medium text-[#666666] text-xs"> <div className="flex h-6 items-center rounded-full border border-[#e5e5e5] bg-white px-2.5 font-medium text-[#666666] text-xs dark:border-white/12 dark:bg-white/8 dark:text-white/58">
延迟 {adaptiveThrottleMs}ms 延迟 {adaptiveThrottleMs}ms
</div> </div>
</div> </div>
@ -4302,8 +4306,8 @@ export function RealtimeCanvasDialog({
if (standalone) { if (standalone) {
return ( return (
<div className="h-dvh w-full overflow-hidden bg-white"> <div className="h-dvh w-full overflow-hidden bg-white text-[#111111] dark:bg-[#050608] dark:text-white">
<div className="relative h-full w-full overflow-hidden bg-white"> <div className="relative h-full w-full overflow-hidden bg-white dark:bg-[#050608]">
{content} {content}
</div> </div>
</div> </div>
@ -4312,7 +4316,7 @@ export function RealtimeCanvasDialog({
return ( return (
<Dialog onOpenChange={onOpenChange} open={open}> <Dialog onOpenChange={onOpenChange} open={open}>
<DialogContent className="h-[97vh] w-[98vw] max-w-[1800px] overflow-hidden rounded-[20px] border-0 bg-white p-0 shadow-2xl sm:rounded-[20px] md:rounded-[24px]"> <DialogContent className="h-[97vh] w-[98vw] max-w-[1800px] overflow-hidden rounded-[20px] border-0 bg-white p-0 text-[#111111] shadow-2xl dark:bg-[#050608] dark:text-white sm:rounded-[20px] md:rounded-[24px]">
{content} {content}
</DialogContent> </DialogContent>
</Dialog> </Dialog>