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

fix: restore light theme for realtime canvas enhance mode
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-05 22:09:21 +08:00
parent 9c8228b697
commit 3100d10dc0
2 changed files with 73 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
components/canvas/EnhanceProWorkspace.tsx
View File

@ -6,7 +6,6 @@ import {
Loader2, Loader2,
Send, Send,
Sparkles, Sparkles,
Wand2,
} from "lucide-react"; } from "lucide-react";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
@ -89,9 +88,10 @@ const FALLBACK_CONFIG: EnhanceProClientConfig = {
presets: defaultEnhanceProPresets(), presets: defaultEnhanceProPresets(),
}; };
const SOLID_PANEL_FIELD_CLASS = "border-white/10 bg-[#1a1b22] text-white"; const SOLID_PANEL_FIELD_CLASS =
const SOLID_PANEL_CARD_CLASS = "rounded-2xl border border-white/10 bg-[#17181f]"; "border-border/60 bg-background text-foreground shadow-sm";
const SOLID_PANEL_CHIP_CLASS = "rounded-full border border-white/10 bg-[#1b1c24]"; const SOLID_PANEL_CARD_CLASS =
"rounded-2xl border border-border/60 bg-card shadow-sm";
function clampNumber(value: number, min: number, max: number) { function clampNumber(value: number, min: number, max: number) {
return Math.min(max, Math.max(min, value)); return Math.min(max, Math.max(min, value));
@ -481,8 +481,8 @@ export function EnhanceProWorkspace({
}, [generatedImages, sourceImageUrl]); }, [generatedImages, sourceImageUrl]);
return ( return (
<div className="relative flex h-full w-full bg-[#09090b] text-white"> <div className="relative flex h-full w-full bg-background text-foreground">
<div className="relative flex min-w-0 flex-1 items-center justify-center overflow-hidden bg-[#050506]"> <div className="relative flex min-w-0 flex-1 items-center justify-center overflow-hidden bg-muted/20">
{activePreviewUrl ? ( {activePreviewUrl ? (
<> <>
<img <img
@ -490,18 +490,18 @@ export function EnhanceProWorkspace({
className="max-h-full max-w-full object-contain" className="max-h-full max-w-full object-contain"
src={getDisplayImageUrl(activePreviewUrl, 1800)} src={getDisplayImageUrl(activePreviewUrl, 1800)}
/> />
<div className="pointer-events-none absolute top-6 left-6 flex items-center gap-2 rounded-full border border-white/10 bg-[#101114] px-3 py-1.5 text-white/80 text-xs"> <div className="pointer-events-none absolute top-6 left-6 flex items-center gap-2 rounded-full border border-border/60 bg-background/95 px-3 py-1.5 text-muted-foreground text-xs shadow-sm backdrop-blur-sm">
<ImageIcon className="h-3.5 w-3.5" /> <ImageIcon className="h-3.5 w-3.5" />
<span>{activePreviewLabel}</span> <span>{activePreviewLabel}</span>
</div> </div>
</> </>
) : ( ) : (
<div className="flex max-w-md flex-col items-center gap-3 px-6 text-center"> <div className="flex max-w-md flex-col items-center gap-3 px-6 text-center">
<Sparkles className="h-10 w-10 text-white/25" /> <Sparkles className="h-10 w-10 text-muted-foreground/35" />
<div className="font-semibold text-lg text-white"> <div className="font-semibold text-foreground text-lg">
还没有可增强的图片 还没有可增强的图片
</div> </div>
<div className="text-sm text-white/55 leading-6"> <div className="text-muted-foreground text-sm leading-6">
请先在主画布中选中一张图片，再从底部工具栏进入“图像增强 Pro”， 请先在主画布中选中一张图片，再从底部工具栏进入“图像增强 Pro”，
或者先在实时画布模式里生成一张结果后再切回来。 或者先在实时画布模式里生成一张结果后再切回来。
</div> </div>
@ -510,7 +510,7 @@ export function EnhanceProWorkspace({
{sidePreviewItems.length > 0 ? ( {sidePreviewItems.length > 0 ? (
<div className="absolute right-6 bottom-6 left-6 flex items-center justify-center"> <div className="absolute right-6 bottom-6 left-6 flex items-center justify-center">
<div className="flex max-w-[min(720px,calc(100vw-5rem))] items-center gap-2 rounded-[24px] border border-white/10 bg-[#101114] px-3 py-3 shadow-2xl"> <div className="flex max-w-[min(720px,calc(100vw-5rem))] items-center gap-2 rounded-[24px] border border-border/60 bg-background/95 px-3 py-3 shadow-xl backdrop-blur-sm">
{sidePreviewItems.map((item, index) => { {sidePreviewItems.map((item, index) => {
const isActive = item.isSource const isActive = item.isSource
? selectedResultIndex < 0 ? selectedResultIndex < 0
@ -520,8 +520,8 @@ export function EnhanceProWorkspace({
className={cn( className={cn(
"group flex h-16 w-16 shrink-0 overflow-hidden rounded-2xl border transition", "group flex h-16 w-16 shrink-0 overflow-hidden rounded-2xl border transition",
isActive isActive
? "border-sky-400 shadow-[0_0_0_1px_rgba(56,189,248,0.35)]" ? "border-sky-500 shadow-[0_0_0_1px_rgba(14,165,233,0.18)]"
: "border-white/10 hover:border-white/35" : "border-border/60 hover:border-foreground/20"
)} )}
key={item.key} key={item.key}
onClick={() => onClick={() =>
@ -543,49 +543,35 @@ export function EnhanceProWorkspace({
) : null} ) : null}
</div> </div>
<div className="flex h-full w-[420px] max-w-[42vw] shrink-0 flex-col border-white/10 border-l bg-[#111217]"> <div className="flex h-full w-[420px] max-w-[42vw] shrink-0 flex-col border-border/60 border-l bg-[#fcfbf7]">
<div className="border-white/10 border-b px-4 py-4 pr-24"> <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4 pt-6">
<div className="flex items-start justify-between gap-3"> {isLoading ? (
<div>
<div className="flex items-center gap-2 font-semibold text-base text-white">
<Wand2 className="h-4.5 w-4.5 text-sky-300" />
图像增强模式
</div>
</div>
<div <div
className={cn( className={cn(
SOLID_PANEL_CHIP_CLASS, SOLID_PANEL_CARD_CLASS,
"px-2.5 py-1 text-[11px] text-white/70" "flex items-center gap-2 px-4 py-3 text-muted-foreground text-sm"
)} )}
> >
{selectedPreset?.model || config.defaultModel}
</div>
</div>
</div>
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4">
{isLoading ? (
<div className={cn(SOLID_PANEL_CARD_CLASS, "flex items-center gap-2 px-4 py-3 text-sm text-white/60")}>
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="h-4 w-4 animate-spin" />
正在加载增强配置... 正在加载增强配置...
</div> </div>
) : null} ) : null}
{!config.enabled && !isLoading ? ( {!config.enabled && !isLoading ? (
<div className="rounded-2xl border border-amber-400/20 bg-amber-500/10 px-4 py-3 text-amber-100 text-sm leading-6"> <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-amber-800 text-sm leading-6">
当前未启用图像增强 Pro。请先在系统设置的“本地AI设置”里完成 Krea 当前未启用图像增强 Pro。请先在系统设置的“本地AI设置”里完成 Krea
配置。 配置。
</div> </div>
) : null} ) : null}
{lastErrorMessage ? ( {lastErrorMessage ? (
<div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-rose-100 text-sm leading-6"> <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-rose-700 text-sm leading-6">
{lastErrorMessage} {lastErrorMessage}
</div> </div>
) : null} ) : null}
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[11px] uppercase tracking-[0.08em] text-white/65"> <Label className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
增强预设 增强预设
</Label> </Label>
<Select onValueChange={handleSelectPreset} value={selectedPresetId}> <Select onValueChange={handleSelectPreset} value={selectedPresetId}>
@ -601,7 +587,7 @@ export function EnhanceProWorkspace({
</SelectContent> </SelectContent>
</Select> </Select>
{selectedPreset ? ( {selectedPreset ? (
<div className="line-clamp-2 text-[11px] leading-5 text-white/45"> <div className="line-clamp-2 text-[11px] leading-5 text-muted-foreground">
{selectedPreset.description || {selectedPreset.description ||
`${selectedPreset.model} · ${getSubjectDetectionLabel(selectedPreset.subjectDetection)}`} `${selectedPreset.model} · ${getSubjectDetectionLabel(selectedPreset.subjectDetection)}`}
</div> </div>
@ -610,13 +596,13 @@ export function EnhanceProWorkspace({
<div className="space-y-2"> <div className="space-y-2">
<Label <Label
className="text-[11px] uppercase tracking-[0.08em] text-white/65" className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground"
htmlFor="enhance-workspace-prompt" htmlFor="enhance-workspace-prompt"
> >
增强提示词 增强提示词
</Label> </Label>
<Textarea <Textarea
className={`${SOLID_PANEL_FIELD_CLASS} min-h-[82px] resize-none placeholder:text-white/30`} className={`${SOLID_PANEL_FIELD_CLASS} min-h-[82px] resize-none placeholder:text-muted-foreground/70`}
id="enhance-workspace-prompt" id="enhance-workspace-prompt"
onChange={(event) => onChange={(event) =>
setFormState((prev) => ({ setFormState((prev) => ({
@ -631,13 +617,13 @@ export function EnhanceProWorkspace({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<div className="text-[11px] uppercase tracking-[0.08em] text-white/65"> <div className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
基础参数 基础参数
</div> </div>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label <Label
className="text-xs text-white/70" className="text-foreground/80 text-xs"
htmlFor="enhance-workspace-width" htmlFor="enhance-workspace-width"
> >
宽度 宽度
@ -663,7 +649,7 @@ export function EnhanceProWorkspace({
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label <Label
className="text-xs text-white/70" className="text-foreground/80 text-xs"
htmlFor="enhance-workspace-height" htmlFor="enhance-workspace-height"
> >
高度 高度
@ -689,7 +675,7 @@ export function EnhanceProWorkspace({
</div> </div>
{config.allowBatchSize ? ( {config.allowBatchSize ? (
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">候选</Label> <Label className="text-foreground/80 text-xs">候选</Label>
<Select <Select
onValueChange={(value) => onValueChange={(value) =>
handleNumericField( handleNumericField(
@ -723,7 +709,7 @@ export function EnhanceProWorkspace({
) : ( ) : (
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label <Label
className="text-xs text-white/70" className="text-foreground/80 text-xs"
htmlFor="enhance-workspace-seed" htmlFor="enhance-workspace-seed"
> >
Seed Seed
@ -743,7 +729,7 @@ export function EnhanceProWorkspace({
</div> </div>
)} )}
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">模式</Label> <Label className="text-foreground/80 text-xs">模式</Label>
<Select <Select
onValueChange={(value) => onValueChange={(value) =>
setFormState((prev) => ({ setFormState((prev) => ({
@ -765,7 +751,7 @@ export function EnhanceProWorkspace({
</Select> </Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">格式</Label> <Label className="text-foreground/80 text-xs">格式</Label>
<Select <Select
onValueChange={(value) => onValueChange={(value) =>
setFormState((prev) => ({ setFormState((prev) => ({
@ -786,7 +772,7 @@ export function EnhanceProWorkspace({
</Select> </Select>
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">区域</Label> <Label className="text-foreground/80 text-xs">区域</Label>
<Select <Select
onValueChange={(value) => onValueChange={(value) =>
setFormState((prev) => ({ setFormState((prev) => ({
@ -809,7 +795,7 @@ export function EnhanceProWorkspace({
{config.allowBatchSize ? ( {config.allowBatchSize ? (
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label <Label
className="text-xs text-white/70" className="text-foreground/80 text-xs"
htmlFor="enhance-workspace-seed" htmlFor="enhance-workspace-seed"
> >
Seed Seed
@ -830,7 +816,7 @@ export function EnhanceProWorkspace({
) : null} ) : null}
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label <Label
className="text-xs text-white/70" className="text-foreground/80 text-xs"
htmlFor="enhance-workspace-scale" htmlFor="enhance-workspace-scale"
> >
放大 放大
@ -859,7 +845,7 @@ export function EnhanceProWorkspace({
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<div className="text-[11px] uppercase tracking-[0.08em] text-white/65"> <div className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
增强开关 增强开关
</div> </div>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
@ -869,7 +855,7 @@ export function EnhanceProWorkspace({
"flex items-center justify-between gap-3 px-3 py-3" "flex items-center justify-between gap-3 px-3 py-3"
)} )}
> >
<span className="text-sm text-white">人脸增强</span> <span className="text-foreground text-sm">人脸增强</span>
<Switch <Switch
checked={formState.face_enhancement} checked={formState.face_enhancement}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
@ -886,7 +872,7 @@ export function EnhanceProWorkspace({
"flex items-center justify-between gap-3 px-3 py-3" "flex items-center justify-between gap-3 px-3 py-3"
)} )}
> >
<span className="text-sm text-white">启用放大</span> <span className="text-foreground text-sm">启用放大</span>
<Switch <Switch
checked={formState.upscaling_activated} checked={formState.upscaling_activated}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
@ -903,7 +889,7 @@ export function EnhanceProWorkspace({
"flex items-center justify-between gap-3 px-3 py-3" "flex items-center justify-between gap-3 px-3 py-3"
)} )}
> >
<span className="text-sm text-white">裁剪铺满</span> <span className="text-foreground text-sm">裁剪铺满</span>
<Switch <Switch
checked={formState.crop_to_fill} checked={formState.crop_to_fill}
onCheckedChange={(checked) => onCheckedChange={(checked) =>
@ -916,14 +902,14 @@ export function EnhanceProWorkspace({
{config.enableAdvancedControls ? ( {config.enableAdvancedControls ? (
<> <>
<Separator className="bg-white/10" /> <Separator className="bg-border/60" />
<div className="space-y-2"> <div className="space-y-2">
<div className="text-[11px] uppercase tracking-[0.08em] text-white/65"> <div className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
高级调节 高级调节
</div> </div>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">创造力</Label> <Label className="text-foreground/80 text-xs">创造力</Label>
<Input <Input
className={`${SOLID_PANEL_FIELD_CLASS} h-10`} className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
max="6" max="6"
@ -943,7 +929,7 @@ export function EnhanceProWorkspace({
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">纹理</Label> <Label className="text-foreground/80 text-xs">纹理</Label>
<Input <Input
className={`${SOLID_PANEL_FIELD_CLASS} h-10`} className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
max="5" max="5"
@ -963,7 +949,7 @@ export function EnhanceProWorkspace({
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">细节</Label> <Label className="text-foreground/80 text-xs">细节</Label>
<Input <Input
className={`${SOLID_PANEL_FIELD_CLASS} h-10`} className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
max="1" max="1"
@ -984,7 +970,7 @@ export function EnhanceProWorkspace({
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">锐化</Label> <Label className="text-foreground/80 text-xs">锐化</Label>
<Input <Input
className={`${SOLID_PANEL_FIELD_CLASS} h-10`} className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
max="1" max="1"
@ -1005,7 +991,7 @@ export function EnhanceProWorkspace({
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">降噪</Label> <Label className="text-foreground/80 text-xs">降噪</Label>
<Input <Input
className={`${SOLID_PANEL_FIELD_CLASS} h-10`} className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
max="1" max="1"
@ -1026,7 +1012,7 @@ export function EnhanceProWorkspace({
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">脸部力度</Label> <Label className="text-foreground/80 text-xs">脸部力度</Label>
<Input <Input
className={`${SOLID_PANEL_FIELD_CLASS} h-10`} className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
max="1" max="1"
@ -1047,7 +1033,7 @@ export function EnhanceProWorkspace({
/> />
</div> </div>
<div className="space-y-1.5"> <div className="space-y-1.5">
<Label className="text-xs text-white/70">脸部创意</Label> <Label className="text-foreground/80 text-xs">脸部创意</Label>
<Input <Input
className={`${SOLID_PANEL_FIELD_CLASS} h-10`} className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
max="1" max="1"
@ -1073,15 +1059,15 @@ export function EnhanceProWorkspace({
) : null} ) : null}
</div> </div>
<div className="border-white/10 border-t px-4 py-3"> <div className="border-border/60 border-t bg-background/90 px-4 py-3">
<div className="mb-3 flex items-center justify-between text-white/45 text-xs"> <div className="mb-3 flex items-center justify-between text-muted-foreground text-xs">
<span> <span>
{generatedImages.length > 0 {generatedImages.length > 0
? `已生成 ${generatedImages.length} 张候选结果` ? `已生成 ${generatedImages.length} 张候选结果`
: "生成后可直接发送回画布"} : "生成后可直接发送回画布"}
</span> </span>
{selectedGeneratedImage ? ( {selectedGeneratedImage ? (
<span className="inline-flex items-center gap-1 text-emerald-300"> <span className="inline-flex items-center gap-1 text-emerald-600">
<CheckCircle2 className="h-3.5 w-3.5" /> <CheckCircle2 className="h-3.5 w-3.5" />
已选中 {activePreviewLabel} 已选中 {activePreviewLabel}
</span> </span>
@ -1089,7 +1075,7 @@ export function EnhanceProWorkspace({
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <Button
className="h-10 flex-1 rounded-2xl bg-[#0f62fe] text-white hover:bg-[#0a58e0]" className="h-10 flex-1 rounded-2xl bg-primary text-primary-foreground hover:bg-primary/90"
disabled={isSubmitting || !sourceImageUrl} disabled={isSubmitting || !sourceImageUrl}
onClick={handleSubmit} onClick={handleSubmit}
type="button" type="button"
@ -1102,7 +1088,7 @@ export function EnhanceProWorkspace({
开始增强 Pro 开始增强 Pro
</Button> </Button>
<Button <Button
className="h-10 rounded-2xl border-white/10 bg-[#1a1b22] px-4 text-white hover:bg-[#23242c] hover:text-white" className="h-10 rounded-2xl border-border/60 bg-background px-4 text-foreground hover:bg-muted"
disabled={!selectedGeneratedImage} disabled={!selectedGeneratedImage}
onClick={handleApply} onClick={handleApply}
type="button" type="button"

42
components/canvas/RealtimeCanvasDialog.tsx
View File

@ -2920,7 +2920,7 @@ export function RealtimeCanvasDialog({
const compactToolButtonClass = const compactToolButtonClass =
"h-9 w-9 rounded-[16px] text-muted-foreground transition hover:bg-accent hover:text-foreground"; "h-9 w-9 rounded-[16px] text-muted-foreground transition hover:bg-accent hover:text-foreground";
const compactToolButtonActiveClass = const compactToolButtonActiveClass =
"bg-black text-white hover:bg-black hover:text-white"; "bg-foreground text-background hover:bg-foreground hover:text-background";
const currentModeLabel = const currentModeLabel =
brushMode === "select" brushMode === "select"
? "鼠标" ? "鼠标"
@ -2961,7 +2961,7 @@ export function RealtimeCanvasDialog({
)} )}
<div className="pointer-events-none absolute top-6 left-6 z-50 flex flex-col gap-3"> <div className="pointer-events-none absolute top-6 left-6 z-50 flex flex-col gap-3">
<button <button
className="pointer-events-auto flex items-center gap-3 rounded-full border border-white/10 bg-[#111216] px-4 py-2 text-white shadow-sm transition hover:bg-[#1a1b22]" className="pointer-events-auto flex items-center gap-3 rounded-full border border-border/60 bg-background/95 px-4 py-2 text-foreground shadow-xl backdrop-blur-sm transition hover:bg-background"
onClick={handleGoHome} onClick={handleGoHome}
title="返回首页" title="返回首页"
type="button" type="button"
@ -2981,18 +2981,18 @@ export function RealtimeCanvasDialog({
<Sparkles className="h-3.5 w-3.5" /> <Sparkles className="h-3.5 w-3.5" />
</div> </div>
)} )}
<span className="font-semibold text-sm text-white"> <span className="font-semibold text-foreground text-sm">
{siteName} {siteName}
</span> </span>
</button> </button>
<div className="pointer-events-auto inline-flex w-fit items-center gap-1 rounded-full border border-white/10 bg-[#111216] p-1.5 shadow-sm"> <div className="pointer-events-auto inline-flex w-fit items-center gap-1 rounded-full border border-border/60 bg-background/95 p-1.5 shadow-xl backdrop-blur-sm">
<button <button
className={cn( className={cn(
"inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition", "inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition",
workspaceMode === "realtime" workspaceMode === "realtime"
? "bg-white text-black shadow-sm" ? "bg-foreground text-background shadow-sm"
: "bg-[#1a1b22] text-white/78 hover:bg-[#23242c] hover:text-white" : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
)} )}
onClick={() => setWorkspaceMode("realtime")} onClick={() => setWorkspaceMode("realtime")}
type="button" type="button"
@ -3004,8 +3004,8 @@ export function RealtimeCanvasDialog({
className={cn( className={cn(
"inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition", "inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition",
workspaceMode === "enhance-pro" workspaceMode === "enhance-pro"
? "bg-white text-black shadow-sm" ? "bg-foreground text-background shadow-sm"
: "bg-[#1a1b22] text-white/78 hover:bg-[#23242c] hover:text-white" : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
)} )}
onClick={() => setWorkspaceMode("enhance-pro")} onClick={() => setWorkspaceMode("enhance-pro")}
type="button" type="button"
@ -3017,9 +3017,9 @@ export function RealtimeCanvasDialog({
</div> </div>
<div className="pointer-events-none absolute top-6 right-6 z-50"> <div className="pointer-events-none absolute top-6 right-6 z-50">
<div className="pointer-events-auto rounded-full border border-white/10 bg-[#111216] p-1 shadow-sm"> <div className="pointer-events-auto rounded-full border border-border/60 bg-background/95 p-1 shadow-xl backdrop-blur-sm">
<Button <Button
className="h-7 w-7 rounded-full bg-[#1a1b22] text-white transition hover:bg-[#23242c] hover:text-white" className="h-7 w-7 rounded-full bg-background text-foreground transition hover:bg-muted hover:text-foreground"
onClick={handleCloseRealtime} onClick={handleCloseRealtime}
size="icon" size="icon"
title="关闭" title="关闭"
@ -3147,7 +3147,7 @@ export function RealtimeCanvasDialog({
</div> </div>
<div className="mt-2 flex items-center justify-end gap-2"> <div className="mt-2 flex items-center justify-end gap-2">
<Button <Button
className="h-8 rounded-xl bg-black px-4 text-white hover:bg-black/90" className="h-8 rounded-xl bg-primary px-4 text-primary-foreground hover:bg-primary/90"
onClick={() => void openSavedProject(project.id)} onClick={() => void openSavedProject(project.id)}
size="sm" size="sm"
type="button" type="button"
@ -3268,7 +3268,7 @@ export function RealtimeCanvasDialog({
] as const ] as const
).map((handle) => ( ).map((handle) => (
<div <div
className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute z-20 h-3.5 w-3.5 rounded-full border border-white bg-black shadow-[0_2px_8px_rgba(0,0,0,0.2)]" className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute z-20 h-3.5 w-3.5 rounded-full border border-border/70 bg-background shadow-[0_2px_8px_rgba(15,23,42,0.18)]"
key={handle.key} key={handle.key}
style={{ style={{
left: handle.left, left: handle.left,
@ -3290,7 +3290,7 @@ export function RealtimeCanvasDialog({
/> />
</div> </div>
</div> </div>
<div className="absolute top-28 bottom-4 left-4 z-10 flex w-16 max-w-[18vw] flex-col rounded-[24px] border border-border/40 bg-[#111216] p-2 shadow-xl"> <div className="absolute top-28 bottom-4 left-4 z-10 flex w-16 max-w-[18vw] flex-col rounded-[24px] border border-border/50 bg-background/96 p-2 shadow-xl backdrop-blur-sm">
<div className="flex items-center justify-center border-border/10 border-b pb-3"> <div className="flex items-center justify-center border-border/10 border-b pb-3">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-foreground"> <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-foreground">
<Layers3 className="h-4 w-4" /> <Layers3 className="h-4 w-4" />
@ -3433,7 +3433,7 @@ 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"> <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}> <TooltipProvider delayDuration={120}>
<div className="pointer-events-auto flex flex-wrap items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-[#111216] p-1.5 shadow-xl"> <div className="pointer-events-auto flex flex-wrap items-center justify-center gap-1 rounded-[24px] border border-border/50 bg-background/96 p-1.5 shadow-xl backdrop-blur-sm">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@ -3518,7 +3518,7 @@ export function RealtimeCanvasDialog({
max={50} max={50}
min={2} min={2}
onValueChange={([val]) => setBrushSize(val)} onValueChange={([val]) => setBrushSize(val)}
rangeClassName="bg-black" rangeClassName="bg-primary"
step={1} step={1}
thumbClassName="h-5 w-5 border border-border bg-background shadow-sm" thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
trackClassName="h-2.5 bg-muted shadow-inner" trackClassName="h-2.5 bg-muted shadow-inner"
@ -3570,7 +3570,7 @@ export function RealtimeCanvasDialog({
max={50} max={50}
min={2} min={2}
onValueChange={([val]) => setBrushSize(val)} onValueChange={([val]) => setBrushSize(val)}
rangeClassName="bg-black" rangeClassName="bg-primary"
step={1} step={1}
thumbClassName="h-5 w-5 border border-border bg-background shadow-sm" thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
trackClassName="h-2.5 bg-muted shadow-inner" trackClassName="h-2.5 bg-muted shadow-inner"
@ -3613,7 +3613,7 @@ export function RealtimeCanvasDialog({
className={cn( className={cn(
"h-10 rounded-xl", "h-10 rounded-xl",
brushMode === "rect" && brushMode === "rect" &&
"bg-black text-white hover:bg-black" "bg-foreground text-background hover:bg-foreground"
)} )}
onClick={() => activateShapeMode("rect")} onClick={() => activateShapeMode("rect")}
type="button" type="button"
@ -3625,7 +3625,7 @@ export function RealtimeCanvasDialog({
className={cn( className={cn(
"h-10 rounded-xl", "h-10 rounded-xl",
brushMode === "circle" && brushMode === "circle" &&
"bg-black text-white hover:bg-black" "bg-foreground text-background hover:bg-foreground"
)} )}
onClick={() => activateShapeMode("circle")} onClick={() => activateShapeMode("circle")}
type="button" type="button"
@ -3637,7 +3637,7 @@ export function RealtimeCanvasDialog({
className={cn( className={cn(
"h-10 rounded-xl", "h-10 rounded-xl",
brushMode === "line" && brushMode === "line" &&
"bg-black text-white hover:bg-black" "bg-foreground text-background hover:bg-foreground"
)} )}
onClick={() => activateShapeMode("line")} onClick={() => activateShapeMode("line")}
type="button" type="button"
@ -3760,7 +3760,7 @@ export function RealtimeCanvasDialog({
</div> </div>
</TooltipProvider> </TooltipProvider>
<div className="pointer-events-auto w-full rounded-[24px] border border-border/40 bg-[#111216] p-4 shadow-2xl"> <div className="pointer-events-auto w-full rounded-[24px] border border-border/50 bg-background/98 p-4 shadow-2xl backdrop-blur-sm">
<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] leading-7 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
onBlur={() => scheduleFlush(true, false)} onBlur={() => scheduleFlush(true, false)}
@ -3801,7 +3801,7 @@ export function RealtimeCanvasDialog({
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button <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"} disabled={status === "connecting"}
onClick={triggerGenerate} onClick={triggerGenerate}
size="sm" size="sm"