fix: restore light theme for realtime canvas enhance mode
This commit is contained in:
Your Name
parent
9c8228b697
commit
3100d10dc0
@ -6,7 +6,6 @@ import {
|
||||
Loader2,
|
||||
Send,
|
||||
Sparkles,
|
||||
Wand2,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
@ -89,9 +88,10 @@ const FALLBACK_CONFIG: EnhanceProClientConfig = {
|
||||
presets: defaultEnhanceProPresets(),
|
||||
};
|
||||
|
||||
const SOLID_PANEL_FIELD_CLASS = "border-white/10 bg-[#1a1b22] text-white";
|
||||
const SOLID_PANEL_CARD_CLASS = "rounded-2xl border border-white/10 bg-[#17181f]";
|
||||
const SOLID_PANEL_CHIP_CLASS = "rounded-full border border-white/10 bg-[#1b1c24]";
|
||||
const SOLID_PANEL_FIELD_CLASS =
|
||||
"border-border/60 bg-background text-foreground shadow-sm";
|
||||
const SOLID_PANEL_CARD_CLASS =
|
||||
"rounded-2xl border border-border/60 bg-card shadow-sm";
|
||||
|
||||
function clampNumber(value: number, min: number, max: number) {
|
||||
return Math.min(max, Math.max(min, value));
|
||||
@ -481,8 +481,8 @@ export function EnhanceProWorkspace({
|
||||
}, [generatedImages, sourceImageUrl]);
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full bg-[#09090b] text-white">
|
||||
<div className="relative flex min-w-0 flex-1 items-center justify-center overflow-hidden bg-[#050506]">
|
||||
<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-muted/20">
|
||||
{activePreviewUrl ? (
|
||||
<>
|
||||
<img
|
||||
@ -490,18 +490,18 @@ export function EnhanceProWorkspace({
|
||||
className="max-h-full max-w-full object-contain"
|
||||
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" />
|
||||
<span>{activePreviewLabel}</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<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" />
|
||||
<div className="font-semibold text-lg text-white">
|
||||
<Sparkles className="h-10 w-10 text-muted-foreground/35" />
|
||||
<div className="font-semibold text-foreground text-lg">
|
||||
还没有可增强的图片
|
||||
</div>
|
||||
<div className="text-sm text-white/55 leading-6">
|
||||
<div className="text-muted-foreground text-sm leading-6">
|
||||
请先在主画布中选中一张图片，再从底部工具栏进入“图像增强 Pro”，
|
||||
或者先在实时画布模式里生成一张结果后再切回来。
|
||||
</div>
|
||||
@ -510,7 +510,7 @@ export function EnhanceProWorkspace({
|
||||
|
||||
{sidePreviewItems.length > 0 ? (
|
||||
<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) => {
|
||||
const isActive = item.isSource
|
||||
? selectedResultIndex < 0
|
||||
@ -520,8 +520,8 @@ export function EnhanceProWorkspace({
|
||||
className={cn(
|
||||
"group flex h-16 w-16 shrink-0 overflow-hidden rounded-2xl border transition",
|
||||
isActive
|
||||
? "border-sky-400 shadow-[0_0_0_1px_rgba(56,189,248,0.35)]"
|
||||
: "border-white/10 hover:border-white/35"
|
||||
? "border-sky-500 shadow-[0_0_0_1px_rgba(14,165,233,0.18)]"
|
||||
: "border-border/60 hover:border-foreground/20"
|
||||
)}
|
||||
key={item.key}
|
||||
onClick={() =>
|
||||
@ -543,49 +543,35 @@ export function EnhanceProWorkspace({
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex h-full w-[420px] max-w-[42vw] shrink-0 flex-col border-white/10 border-l bg-[#111217]">
|
||||
<div className="border-white/10 border-b px-4 py-4 pr-24">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<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 className="flex h-full w-[420px] max-w-[42vw] shrink-0 flex-col border-border/60 border-l bg-[#fcfbf7]">
|
||||
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4 pt-6">
|
||||
{isLoading ? (
|
||||
<div
|
||||
className={cn(
|
||||
SOLID_PANEL_CHIP_CLASS,
|
||||
"px-2.5 py-1 text-[11px] text-white/70"
|
||||
SOLID_PANEL_CARD_CLASS,
|
||||
"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" />
|
||||
正在加载增强配置...
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!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
|
||||
配置。
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{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}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<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>
|
||||
<Select onValueChange={handleSelectPreset} value={selectedPresetId}>
|
||||
@ -601,7 +587,7 @@ export function EnhanceProWorkspace({
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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.model} · ${getSubjectDetectionLabel(selectedPreset.subjectDetection)}`}
|
||||
</div>
|
||||
@ -610,13 +596,13 @@ export function EnhanceProWorkspace({
|
||||
|
||||
<div className="space-y-2">
|
||||
<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"
|
||||
>
|
||||
增强提示词
|
||||
</Label>
|
||||
<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"
|
||||
onChange={(event) =>
|
||||
setFormState((prev) => ({
|
||||
@ -631,13 +617,13 @@ export function EnhanceProWorkspace({
|
||||
</div>
|
||||
|
||||
<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 className="grid grid-cols-3 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label
|
||||
className="text-xs text-white/70"
|
||||
className="text-foreground/80 text-xs"
|
||||
htmlFor="enhance-workspace-width"
|
||||
>
|
||||
宽度
|
||||
@ -663,7 +649,7 @@ export function EnhanceProWorkspace({
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label
|
||||
className="text-xs text-white/70"
|
||||
className="text-foreground/80 text-xs"
|
||||
htmlFor="enhance-workspace-height"
|
||||
>
|
||||
高度
|
||||
@ -689,7 +675,7 @@ export function EnhanceProWorkspace({
|
||||
</div>
|
||||
{config.allowBatchSize ? (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">候选</Label>
|
||||
<Label className="text-foreground/80 text-xs">候选</Label>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
handleNumericField(
|
||||
@ -723,7 +709,7 @@ export function EnhanceProWorkspace({
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
<Label
|
||||
className="text-xs text-white/70"
|
||||
className="text-foreground/80 text-xs"
|
||||
htmlFor="enhance-workspace-seed"
|
||||
>
|
||||
Seed
|
||||
@ -743,7 +729,7 @@ export function EnhanceProWorkspace({
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">模式</Label>
|
||||
<Label className="text-foreground/80 text-xs">模式</Label>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
setFormState((prev) => ({
|
||||
@ -765,7 +751,7 @@ export function EnhanceProWorkspace({
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">格式</Label>
|
||||
<Label className="text-foreground/80 text-xs">格式</Label>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
setFormState((prev) => ({
|
||||
@ -786,7 +772,7 @@ export function EnhanceProWorkspace({
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">区域</Label>
|
||||
<Label className="text-foreground/80 text-xs">区域</Label>
|
||||
<Select
|
||||
onValueChange={(value) =>
|
||||
setFormState((prev) => ({
|
||||
@ -809,7 +795,7 @@ export function EnhanceProWorkspace({
|
||||
{config.allowBatchSize ? (
|
||||
<div className="space-y-1.5">
|
||||
<Label
|
||||
className="text-xs text-white/70"
|
||||
className="text-foreground/80 text-xs"
|
||||
htmlFor="enhance-workspace-seed"
|
||||
>
|
||||
Seed
|
||||
@ -830,7 +816,7 @@ export function EnhanceProWorkspace({
|
||||
) : null}
|
||||
<div className="space-y-1.5">
|
||||
<Label
|
||||
className="text-xs text-white/70"
|
||||
className="text-foreground/80 text-xs"
|
||||
htmlFor="enhance-workspace-scale"
|
||||
>
|
||||
放大
|
||||
@ -859,7 +845,7 @@ export function EnhanceProWorkspace({
|
||||
</div>
|
||||
|
||||
<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 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"
|
||||
)}
|
||||
>
|
||||
<span className="text-sm text-white">人脸增强</span>
|
||||
<span className="text-foreground text-sm">人脸增强</span>
|
||||
<Switch
|
||||
checked={formState.face_enhancement}
|
||||
onCheckedChange={(checked) =>
|
||||
@ -886,7 +872,7 @@ export function EnhanceProWorkspace({
|
||||
"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
|
||||
checked={formState.upscaling_activated}
|
||||
onCheckedChange={(checked) =>
|
||||
@ -903,7 +889,7 @@ export function EnhanceProWorkspace({
|
||||
"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
|
||||
checked={formState.crop_to_fill}
|
||||
onCheckedChange={(checked) =>
|
||||
@ -916,14 +902,14 @@ export function EnhanceProWorkspace({
|
||||
|
||||
{config.enableAdvancedControls ? (
|
||||
<>
|
||||
<Separator className="bg-white/10" />
|
||||
<Separator className="bg-border/60" />
|
||||
<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 className="grid grid-cols-3 gap-3">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">创造力</Label>
|
||||
<Label className="text-foreground/80 text-xs">创造力</Label>
|
||||
<Input
|
||||
className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
|
||||
max="6"
|
||||
@ -943,7 +929,7 @@ export function EnhanceProWorkspace({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">纹理</Label>
|
||||
<Label className="text-foreground/80 text-xs">纹理</Label>
|
||||
<Input
|
||||
className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
|
||||
max="5"
|
||||
@ -963,7 +949,7 @@ export function EnhanceProWorkspace({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">细节</Label>
|
||||
<Label className="text-foreground/80 text-xs">细节</Label>
|
||||
<Input
|
||||
className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
|
||||
max="1"
|
||||
@ -984,7 +970,7 @@ export function EnhanceProWorkspace({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">锐化</Label>
|
||||
<Label className="text-foreground/80 text-xs">锐化</Label>
|
||||
<Input
|
||||
className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
|
||||
max="1"
|
||||
@ -1005,7 +991,7 @@ export function EnhanceProWorkspace({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">降噪</Label>
|
||||
<Label className="text-foreground/80 text-xs">降噪</Label>
|
||||
<Input
|
||||
className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
|
||||
max="1"
|
||||
@ -1026,7 +1012,7 @@ export function EnhanceProWorkspace({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">脸部力度</Label>
|
||||
<Label className="text-foreground/80 text-xs">脸部力度</Label>
|
||||
<Input
|
||||
className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
|
||||
max="1"
|
||||
@ -1047,7 +1033,7 @@ export function EnhanceProWorkspace({
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs text-white/70">脸部创意</Label>
|
||||
<Label className="text-foreground/80 text-xs">脸部创意</Label>
|
||||
<Input
|
||||
className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
|
||||
max="1"
|
||||
@ -1073,15 +1059,15 @@ export function EnhanceProWorkspace({
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="border-white/10 border-t px-4 py-3">
|
||||
<div className="mb-3 flex items-center justify-between text-white/45 text-xs">
|
||||
<div className="border-border/60 border-t bg-background/90 px-4 py-3">
|
||||
<div className="mb-3 flex items-center justify-between text-muted-foreground text-xs">
|
||||
<span>
|
||||
{generatedImages.length > 0
|
||||
? `已生成 ${generatedImages.length} 张候选结果`
|
||||
: "生成后可直接发送回画布"}
|
||||
</span>
|
||||
{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" />
|
||||
已选中 {activePreviewLabel}
|
||||
</span>
|
||||
@ -1089,7 +1075,7 @@ export function EnhanceProWorkspace({
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<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}
|
||||
onClick={handleSubmit}
|
||||
type="button"
|
||||
@ -1102,7 +1088,7 @@ export function EnhanceProWorkspace({
|
||||
开始增强 Pro
|
||||
</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}
|
||||
onClick={handleApply}
|
||||
type="button"
|
||||
|
||||
@ -2920,7 +2920,7 @@ export function RealtimeCanvasDialog({
|
||||
const compactToolButtonClass =
|
||||
"h-9 w-9 rounded-[16px] text-muted-foreground transition hover:bg-accent hover:text-foreground";
|
||||
const compactToolButtonActiveClass =
|
||||
"bg-black text-white hover:bg-black hover:text-white";
|
||||
"bg-foreground text-background hover:bg-foreground hover:text-background";
|
||||
const currentModeLabel =
|
||||
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">
|
||||
<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}
|
||||
title="返回首页"
|
||||
type="button"
|
||||
@ -2981,18 +2981,18 @@ export function RealtimeCanvasDialog({
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
)}
|
||||
<span className="font-semibold text-sm text-white">
|
||||
<span className="font-semibold text-foreground text-sm">
|
||||
{siteName}
|
||||
</span>
|
||||
</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
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition",
|
||||
workspaceMode === "realtime"
|
||||
? "bg-white text-black shadow-sm"
|
||||
: "bg-[#1a1b22] text-white/78 hover:bg-[#23242c] hover:text-white"
|
||||
? "bg-foreground text-background shadow-sm"
|
||||
: "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
)}
|
||||
onClick={() => setWorkspaceMode("realtime")}
|
||||
type="button"
|
||||
@ -3004,8 +3004,8 @@ export function RealtimeCanvasDialog({
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition",
|
||||
workspaceMode === "enhance-pro"
|
||||
? "bg-white text-black shadow-sm"
|
||||
: "bg-[#1a1b22] text-white/78 hover:bg-[#23242c] hover:text-white"
|
||||
? "bg-foreground text-background shadow-sm"
|
||||
: "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
)}
|
||||
onClick={() => setWorkspaceMode("enhance-pro")}
|
||||
type="button"
|
||||
@ -3017,9 +3017,9 @@ export function RealtimeCanvasDialog({
|
||||
</div>
|
||||
|
||||
<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
|
||||
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}
|
||||
size="icon"
|
||||
title="关闭"
|
||||
@ -3147,7 +3147,7 @@ export function RealtimeCanvasDialog({
|
||||
</div>
|
||||
<div className="mt-2 flex items-center justify-end gap-2">
|
||||
<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)}
|
||||
size="sm"
|
||||
type="button"
|
||||
@ -3268,7 +3268,7 @@ export function RealtimeCanvasDialog({
|
||||
] as const
|
||||
).map((handle) => (
|
||||
<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}
|
||||
style={{
|
||||
left: handle.left,
|
||||
@ -3290,7 +3290,7 @@ export function RealtimeCanvasDialog({
|
||||
/>
|
||||
</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 h-8 w-8 items-center justify-center rounded-full bg-muted text-foreground">
|
||||
<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">
|
||||
<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>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
@ -3518,7 +3518,7 @@ export function RealtimeCanvasDialog({
|
||||
max={50}
|
||||
min={2}
|
||||
onValueChange={([val]) => setBrushSize(val)}
|
||||
rangeClassName="bg-black"
|
||||
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"
|
||||
@ -3570,7 +3570,7 @@ export function RealtimeCanvasDialog({
|
||||
max={50}
|
||||
min={2}
|
||||
onValueChange={([val]) => setBrushSize(val)}
|
||||
rangeClassName="bg-black"
|
||||
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"
|
||||
@ -3613,7 +3613,7 @@ export function RealtimeCanvasDialog({
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "rect" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
"bg-foreground text-background hover:bg-foreground"
|
||||
)}
|
||||
onClick={() => activateShapeMode("rect")}
|
||||
type="button"
|
||||
@ -3625,7 +3625,7 @@ export function RealtimeCanvasDialog({
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "circle" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
"bg-foreground text-background hover:bg-foreground"
|
||||
)}
|
||||
onClick={() => activateShapeMode("circle")}
|
||||
type="button"
|
||||
@ -3637,7 +3637,7 @@ export function RealtimeCanvasDialog({
|
||||
className={cn(
|
||||
"h-10 rounded-xl",
|
||||
brushMode === "line" &&
|
||||
"bg-black text-white hover:bg-black"
|
||||
"bg-foreground text-background hover:bg-foreground"
|
||||
)}
|
||||
onClick={() => activateShapeMode("line")}
|
||||
type="button"
|
||||
@ -3760,7 +3760,7 @@ export function RealtimeCanvasDialog({
|
||||
</div>
|
||||
</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
|
||||
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)}
|
||||
@ -3801,7 +3801,7 @@ export function RealtimeCanvasDialog({
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<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"}
|
||||
onClick={triggerGenerate}
|
||||
size="sm"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user