fix: support dark mode in realtime canvas
This commit is contained in:
Your Name
parent
1f1ffd2211
commit
7bf3363211
@ -883,22 +883,26 @@ export function RealtimeCanvasDialog({
|
||||
if (status === "live")
|
||||
return {
|
||||
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") {
|
||||
return {
|
||||
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")
|
||||
return {
|
||||
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 {
|
||||
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]);
|
||||
|
||||
@ -3210,17 +3214,17 @@ export function RealtimeCanvasDialog({
|
||||
}, [clearPreviewCanvas, closeBrushSettingPopovers, resetCanvas]);
|
||||
|
||||
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 =
|
||||
"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 =
|
||||
"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 =
|
||||
"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 =
|
||||
"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 =
|
||||
"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 =
|
||||
brushMode === "select"
|
||||
? "鼠标"
|
||||
@ -3267,14 +3271,14 @@ export function RealtimeCanvasDialog({
|
||||
)}
|
||||
>
|
||||
<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}
|
||||
title={realtimeReturnCanvasItem.label}
|
||||
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
|
||||
className="h-4 w-4 text-[#111111]"
|
||||
className="h-4 w-4 text-[#111111] dark:text-white"
|
||||
fallback={ArrowLeft}
|
||||
item={realtimeReturnCanvasItem}
|
||||
/>
|
||||
@ -3284,13 +3288,13 @@ export function RealtimeCanvasDialog({
|
||||
</span>
|
||||
</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
|
||||
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",
|
||||
workspaceMode === "realtime"
|
||||
? 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")}
|
||||
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",
|
||||
workspaceMode === "enhance-pro"
|
||||
? 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")}
|
||||
type="button"
|
||||
@ -3337,10 +3341,10 @@ export function RealtimeCanvasDialog({
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-semibold text-[#111111] text-sm">
|
||||
<div className="font-semibold text-[#111111] text-sm dark:text-white">
|
||||
保存项目
|
||||
</div>
|
||||
<div className="text-[#666666] text-xs">
|
||||
<div className="text-[#666666] text-xs dark:text-white/55">
|
||||
请输入项目名称后保存当前画布
|
||||
</div>
|
||||
</div>
|
||||
@ -3395,10 +3399,10 @@ export function RealtimeCanvasDialog({
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-semibold text-[#111111] text-sm">
|
||||
<div className="font-semibold text-[#111111] text-sm dark:text-white">
|
||||
项目列表
|
||||
</div>
|
||||
<div className="text-[#666666] text-xs">
|
||||
<div className="text-[#666666] text-xs dark:text-white/55">
|
||||
本地保存，便于下次继续编辑
|
||||
</div>
|
||||
</div>
|
||||
@ -3510,11 +3514,11 @@ export function RealtimeCanvasDialog({
|
||||
) : (
|
||||
<>
|
||||
{/* 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 */}
|
||||
<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
|
||||
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}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDragOver={handleDragOver}
|
||||
@ -3523,7 +3527,7 @@ export function RealtimeCanvasDialog({
|
||||
>
|
||||
<div className="pattern-grid-lg pointer-events-none absolute inset-0 opacity-[0.03]" />
|
||||
{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>
|
||||
) : null}
|
||||
@ -3625,9 +3629,9 @@ export function RealtimeCanvasDialog({
|
||||
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
|
||||
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}
|
||||
>
|
||||
<CanvasToolbarIcon
|
||||
@ -3639,16 +3643,16 @@ 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-[#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>
|
||||
) : (
|
||||
[...imageLayers].reverse().map((layer) => (
|
||||
<button
|
||||
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
|
||||
? "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
|
||||
@ -3692,7 +3696,7 @@ export function RealtimeCanvasDialog({
|
||||
{isLayerSplitEnabled ? (
|
||||
<Button
|
||||
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
|
||||
)}
|
||||
disabled={isLayerSplitImporting}
|
||||
@ -3714,7 +3718,7 @@ export function RealtimeCanvasDialog({
|
||||
) : null}
|
||||
<Button
|
||||
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
|
||||
)}
|
||||
disabled={isLayerSplitImporting}
|
||||
@ -3734,7 +3738,7 @@ export function RealtimeCanvasDialog({
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{previewUrl ? (
|
||||
<img
|
||||
@ -3743,7 +3747,7 @@ export function RealtimeCanvasDialog({
|
||||
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" ? (
|
||||
<>
|
||||
<Loader2 className="h-8 w-8 animate-spin opacity-50" />
|
||||
@ -4210,7 +4214,7 @@ export function RealtimeCanvasDialog({
|
||||
)}
|
||||
>
|
||||
<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)}
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
@ -4243,7 +4247,7 @@ export function RealtimeCanvasDialog({
|
||||
/>
|
||||
{statusBadge.label}
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
@ -4302,8 +4306,8 @@ export function RealtimeCanvasDialog({
|
||||
|
||||
if (standalone) {
|
||||
return (
|
||||
<div className="h-dvh w-full overflow-hidden bg-white">
|
||||
<div className="relative h-full 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 dark:bg-[#050608]">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
@ -4312,7 +4316,7 @@ export function RealtimeCanvasDialog({
|
||||
|
||||
return (
|
||||
<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}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user