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

refactor: float enhance controls over 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-05 22:34:57 +08:00
parent b0245c5366
commit ed827b629a
1 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
components/canvas/EnhanceProWorkspace.tsx
View File

@ -88,7 +88,7 @@ const FALLBACK_CONFIG: EnhanceProClientConfig = {
};
const PANEL_SHELL_CLASS =
"rounded-[28px] border border-[#e7e1d4] bg-white/78 shadow-[0_20px_50px_rgba(15,23,42,0.08)] backdrop-blur-xl";
"pointer-events-auto rounded-[28px] border border-[#e7e1d4] bg-white/82 shadow-[0_20px_50px_rgba(15,23,42,0.08)] backdrop-blur-xl";
const SOLID_PANEL_FIELD_CLASS =
"border-[#e8e2d8] bg-[#fffdfa] text-foreground shadow-[0_8px_20px_rgba(15,23,42,0.05)]";
const SOLID_PANEL_CARD_CLASS =
@ -300,6 +300,11 @@ export function EnhanceProWorkspace({
selectedGeneratedImage && selectedResultIndex >= 0
? getActiveResultLabel(selectedResultIndex)
: "原图";
const actionHint = selectedGeneratedImage
? `已选中 ${activePreviewLabel}`
: generatedImages.length > 0
? `已生成 ${generatedImages.length} 张候选结果`
: "生成后可直接发送回画布";
useEffect(() => {
const imageSource = String(sourceImageUrl || "").trim();
@ -512,7 +517,7 @@ export function EnhanceProWorkspace({
)}
{sidePreviewItems.length > 0 ? (
<div className="absolute right-6 bottom-6 left-6 flex items-center justify-center">
<div className="absolute right-6 bottom-28 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-border/60 bg-background/95 px-3 py-3 shadow-xl backdrop-blur-sm">
{sidePreviewItems.map((item, index) => {
const isActive = item.isSource
@ -546,8 +551,8 @@ export function EnhanceProWorkspace({
) : null}
</div>
<div className="flex h-full w-[420px] max-w-[42vw] shrink-0 flex-col border-[#e7e1d4] border-l bg-[linear-gradient(180deg,#f8f5ee_0%,#f6f2e9_100%)]">
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4 pt-6">
<div className="pointer-events-none absolute top-20 right-6 bottom-6 z-20 w-[420px] max-w-[42vw]">
<div className="h-full space-y-4 overflow-y-auto pr-1 pb-6">
{isLoading ? (
<div
className={cn(
@ -1063,46 +1068,41 @@ export function EnhanceProWorkspace({
</div>
) : null}
</div>
</div>
<div className="border-[#e7e1d4] border-t bg-white/72 px-4 py-3 backdrop-blur-xl">
<div className="mb-3 flex items-center justify-between text-muted-foreground text-xs">
<span>
{generatedImages.length > 0
? `已生成 ${generatedImages.length} 张候选结果`
: "生成后可直接发送回画布"}
</span>
<div className="pointer-events-none absolute bottom-6 left-1/2 z-30 flex w-[min(560px,calc(100vw-2rem))] -translate-x-1/2 flex-col items-center gap-2">
<div className="pointer-events-auto rounded-full border border-border/60 bg-background/92 px-4 py-1.5 text-muted-foreground text-xs shadow-lg backdrop-blur-xl">
<span className="inline-flex items-center gap-1.5">
{selectedGeneratedImage ? (
<span className="inline-flex items-center gap-1 text-emerald-600">
<CheckCircle2 className="h-3.5 w-3.5" />
已选中 {activePreviewLabel}
</span>
<CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
) : null}
</div>
<div className="flex items-center gap-2">
<Button
className="h-10 flex-1 rounded-2xl bg-[#2563eb] text-white shadow-sm hover:bg-[#1d4ed8] disabled:bg-slate-200 disabled:text-slate-500"
disabled={isSubmitting || !sourceImageUrl}
onClick={handleSubmit}
type="button"
>
{isSubmitting ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Sparkles className="mr-2 h-4 w-4" />
)}
开始增强 Pro
</Button>
<Button
className="h-10 rounded-2xl border-[#bfdbfe] bg-[#eff6ff] px-4 text-[#1d4ed8] shadow-sm hover:bg-[#dbeafe] hover:text-[#1e40af] disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400"
disabled={!selectedGeneratedImage}
onClick={handleApply}
type="button"
variant="outline"
>
<Send className="mr-2 h-4 w-4" />
发送到画布
</Button>
</div>
{actionHint}
</span>
</div>
<div className="pointer-events-auto flex w-full items-center justify-center gap-3 rounded-full border border-border/60 bg-background/92 p-2 shadow-2xl backdrop-blur-xl">
<Button
className="h-11 min-w-[180px] flex-1 rounded-full bg-[#2563eb] text-white shadow-sm hover:bg-[#1d4ed8] disabled:bg-slate-200 disabled:text-slate-500"
disabled={isSubmitting || !sourceImageUrl}
onClick={handleSubmit}
type="button"
>
{isSubmitting ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Sparkles className="mr-2 h-4 w-4" />
)}
开始增强
</Button>
<Button
className="h-11 min-w-[180px] flex-1 rounded-full border-[#bfdbfe] bg-[#eff6ff] px-4 text-[#1d4ed8] shadow-sm hover:bg-[#dbeafe] hover:text-[#1e40af] disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400"
disabled={!selectedGeneratedImage}
onClick={handleApply}
type="button"
variant="outline"
>
<Send className="mr-2 h-4 w-4" />
发送到画布
</Button>
</div>
</div>
</div>