From 9c8228b697e2e8cc6bd11512580ebb1bd439cc88 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 5 Apr 2026 21:59:05 +0800
Subject: [PATCH] fix: compact enhance pro workspace layout

---
 components/canvas/EnhanceProWorkspace.tsx  | 572 +++++++++++----------
 components/canvas/RealtimeCanvasDialog.tsx |  24 +-
 2 files changed, 305 insertions(+), 291 deletions(-)

diff --git a/components/canvas/EnhanceProWorkspace.tsx b/components/canvas/EnhanceProWorkspace.tsx
index 879a233b4..8aa7c8625 100644
--- a/components/canvas/EnhanceProWorkspace.tsx
+++ b/components/canvas/EnhanceProWorkspace.tsx
@@ -89,6 +89,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]";
+
 function clampNumber(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value));
 }
@@ -486,7 +490,7 @@ 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-black/45 px-3 py-1.5 text-white/80 text-xs backdrop-blur-md">
+            <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">
               <ImageIcon className="h-3.5 w-3.5" />
               <span>{activePreviewLabel}</span>
             </div>
@@ -506,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-black/45 px-3 py-3 shadow-2xl backdrop-blur-xl">
+            <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">
               {sidePreviewItems.map((item, index) => {
                 const isActive = item.isSource
                   ? selectedResultIndex < 0
@@ -539,50 +543,29 @@ export function EnhanceProWorkspace({
         ) : null}
       </div>
 
-      <div className="flex h-full w-[360px] shrink-0 flex-col border-white/10 border-l bg-[#111217]/95">
-        <div className="border-white/10 border-b px-5 py-5">
+      <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 className="mt-1 text-white/55 text-xs leading-5">
-                使用 {config.providerName}{" "}
-                对单张图片进行更可控的增强、修复和细节重建。
-              </div>
             </div>
-            <div className="rounded-full border border-white/10 bg-white/5 px-2.5 py-1 text-[11px] text-white/65">
+            <div
+              className={cn(
+                SOLID_PANEL_CHIP_CLASS,
+                "px-2.5 py-1 text-[11px] text-white/70"
+              )}
+            >
               {selectedPreset?.model || config.defaultModel}
             </div>
           </div>
-
-          <div className="mt-4 overflow-hidden rounded-2xl border border-white/10 bg-black/30">
-            {sourceImageUrl ? (
-              <img
-                alt="增强源图"
-                className="h-[128px] w-full object-cover"
-                src={getDisplayImageUrl(sourceImageUrl, 420)}
-              />
-            ) : (
-              <div className="flex h-[128px] items-center justify-center text-sm text-white/40">
-                暂无源图
-              </div>
-            )}
-          </div>
-          <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-white/50">
-            <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1">
-              原图 {naturalSize.width} x {naturalSize.height}
-            </span>
-            <span className="rounded-full border border-white/10 bg-white/5 px-2 py-1">
-              最大输出长边 {config.maxOutputEdge}px
-            </span>
-          </div>
         </div>
 
-        <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-5">
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4">
           {isLoading ? (
-            <div className="flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white/60">
+            <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>
@@ -602,9 +585,11 @@ export function EnhanceProWorkspace({
           ) : null}
 
           <div className="space-y-2">
-            <Label className="text-white/80">增强预设</Label>
+            <Label className="text-[11px] uppercase tracking-[0.08em] text-white/65">
+              增强预设
+            </Label>
             <Select onValueChange={handleSelectPreset} value={selectedPresetId}>
-              <SelectTrigger className="border-white/10 bg-white/5 text-white">
+              <SelectTrigger className={`${SOLID_PANEL_FIELD_CLASS} h-10`}>
                 <SelectValue placeholder="选择一个增强预设" />
               </SelectTrigger>
               <SelectContent>
@@ -616,7 +601,7 @@ export function EnhanceProWorkspace({
               </SelectContent>
             </Select>
             {selectedPreset ? (
-              <div className="text-white/45 text-xs leading-5">
+              <div className="line-clamp-2 text-[11px] leading-5 text-white/45">
                 {selectedPreset.description ||
                   `${selectedPreset.model} · ${getSubjectDetectionLabel(selectedPreset.subjectDetection)}`}
               </div>
@@ -624,11 +609,14 @@ export function EnhanceProWorkspace({
           </div>
 
           <div className="space-y-2">
-            <Label className="text-white/80" htmlFor="enhance-workspace-prompt">
+            <Label
+              className="text-[11px] uppercase tracking-[0.08em] text-white/65"
+              htmlFor="enhance-workspace-prompt"
+            >
               增强提示词
             </Label>
             <Textarea
-              className="border-white/10 bg-white/5 text-white placeholder:text-white/30"
+              className={`${SOLID_PANEL_FIELD_CLASS} min-h-[82px] resize-none placeholder:text-white/30`}
               id="enhance-workspace-prompt"
               onChange={(event) =>
                 setFormState((prev) => ({
@@ -637,221 +625,251 @@ export function EnhanceProWorkspace({
                 }))
               }
               placeholder="例如：保持主体不变，提升画质层次、纹理和局部细节，让结果更高级。"
-              rows={4}
+              rows={3}
               value={formState.prompt}
             />
           </div>
 
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-2">
-              <Label
-                className="text-white/80"
-                htmlFor="enhance-workspace-width"
-              >
-                输出宽度
-              </Label>
-              <Input
-                className="border-white/10 bg-white/5 text-white"
-                id="enhance-workspace-width"
-                max={config.maxOutputEdge}
-                min="1"
-                onChange={(event) =>
-                  handleNumericField(
-                    "width",
-                    clampNumber(
-                      Number.parseInt(event.target.value, 10) || 1,
-                      1,
-                      config.maxOutputEdge
-                    )
-                  )
-                }
-                type="number"
-                value={formState.width}
-              />
+          <div className="space-y-2">
+            <div className="text-[11px] uppercase tracking-[0.08em] text-white/65">
+              基础参数
             </div>
-            <div className="space-y-2">
-              <Label
-                className="text-white/80"
-                htmlFor="enhance-workspace-height"
-              >
-                输出高度
-              </Label>
-              <Input
-                className="border-white/10 bg-white/5 text-white"
-                id="enhance-workspace-height"
-                max={config.maxOutputEdge}
-                min="1"
-                onChange={(event) =>
-                  handleNumericField(
-                    "height",
-                    clampNumber(
-                      Number.parseInt(event.target.value, 10) || 1,
-                      1,
-                      config.maxOutputEdge
-                    )
-                  )
-                }
-                type="number"
-                value={formState.height}
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-3 gap-3">
-            <div className="space-y-2">
-              <Label className="text-white/80">增强模式</Label>
-              <Select
-                onValueChange={(value) =>
-                  setFormState((prev) => ({
-                    ...prev,
-                    model: value as FormState["model"],
-                  }))
-                }
-                value={formState.model}
-              >
-                <SelectTrigger className="border-white/10 bg-white/5 text-white">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="Redefine">Redefine</SelectItem>
-                  <SelectItem value="Recovery">Recovery</SelectItem>
-                  <SelectItem value="Recovery V2">Recovery V2</SelectItem>
-                  <SelectItem value="Reimagine">Reimagine</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label className="text-white/80">输出格式</Label>
-              <Select
-                onValueChange={(value) =>
-                  setFormState((prev) => ({
-                    ...prev,
-                    output_format: value as FormState["output_format"],
-                  }))
-                }
-                value={formState.output_format}
-              >
-                <SelectTrigger className="border-white/10 bg-white/5 text-white">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="jpg">JPG</SelectItem>
-                  <SelectItem value="png">PNG</SelectItem>
-                  <SelectItem value="webp">WEBP</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label className="text-white/80">作用区域</Label>
-              <Select
-                onValueChange={(value) =>
-                  setFormState((prev) => ({
-                    ...prev,
-                    subject_detection: value as FormState["subject_detection"],
-                  }))
-                }
-                value={formState.subject_detection}
-              >
-                <SelectTrigger className="border-white/10 bg-white/5 text-white">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="All">全部</SelectItem>
-                  <SelectItem value="Foreground">前景</SelectItem>
-                  <SelectItem value="Background">背景</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-3 gap-3">
-            {config.allowBatchSize ? (
-              <div className="space-y-2">
-                <Label className="text-white/80">候选结果</Label>
-                <Select
-                  onValueChange={(value) =>
+            <div className="grid grid-cols-3 gap-3">
+              <div className="space-y-1.5">
+                <Label
+                  className="text-xs text-white/70"
+                  htmlFor="enhance-workspace-width"
+                >
+                  宽度
+                </Label>
+                <Input
+                  className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
+                  id="enhance-workspace-width"
+                  max={config.maxOutputEdge}
+                  min="1"
+                  onChange={(event) =>
                     handleNumericField(
-                      "batchSize",
+                      "width",
                       clampNumber(
-                        Number.parseInt(value, 10) || 1,
+                        Number.parseInt(event.target.value, 10) || 1,
                         1,
-                        config.maxBatchSize
+                        config.maxOutputEdge
                       )
                     )
                   }
-                  value={String(formState.batchSize)}
+                  type="number"
+                  value={formState.width}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label
+                  className="text-xs text-white/70"
+                  htmlFor="enhance-workspace-height"
                 >
-                  <SelectTrigger className="border-white/10 bg-white/5 text-white">
+                  高度
+                </Label>
+                <Input
+                  className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
+                  id="enhance-workspace-height"
+                  max={config.maxOutputEdge}
+                  min="1"
+                  onChange={(event) =>
+                    handleNumericField(
+                      "height",
+                      clampNumber(
+                        Number.parseInt(event.target.value, 10) || 1,
+                        1,
+                        config.maxOutputEdge
+                      )
+                    )
+                  }
+                  type="number"
+                  value={formState.height}
+                />
+              </div>
+              {config.allowBatchSize ? (
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-white/70">候选</Label>
+                  <Select
+                    onValueChange={(value) =>
+                      handleNumericField(
+                        "batchSize",
+                        clampNumber(
+                          Number.parseInt(value, 10) || 1,
+                          1,
+                          config.maxBatchSize
+                        )
+                      )
+                    }
+                    value={String(formState.batchSize)}
+                  >
+                    <SelectTrigger
+                      className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Array.from(
+                        { length: config.maxBatchSize },
+                        (_, index) => index + 1
+                      ).map((item) => (
+                        <SelectItem key={item} value={String(item)}>
+                          {item} 张
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              ) : (
+                <div className="space-y-1.5">
+                  <Label
+                    className="text-xs text-white/70"
+                    htmlFor="enhance-workspace-seed"
+                  >
+                    Seed
+                  </Label>
+                  <Input
+                    className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
+                    id="enhance-workspace-seed"
+                    onChange={(event) =>
+                      handleNumericField(
+                        "seed",
+                        Number.parseInt(event.target.value, 10) || 1337
+                      )
+                    }
+                    type="number"
+                    value={formState.seed}
+                  />
+                </div>
+              )}
+              <div className="space-y-1.5">
+                <Label className="text-xs text-white/70">模式</Label>
+                <Select
+                  onValueChange={(value) =>
+                    setFormState((prev) => ({
+                      ...prev,
+                      model: value as FormState["model"],
+                    }))
+                  }
+                  value={formState.model}
+                >
+                  <SelectTrigger className={`${SOLID_PANEL_FIELD_CLASS} h-10`}>
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    {Array.from(
-                      { length: config.maxBatchSize },
-                      (_, index) => index + 1
-                    ).map((item) => (
-                      <SelectItem key={item} value={String(item)}>
-                        {item} 张
-                      </SelectItem>
-                    ))}
+                    <SelectItem value="Redefine">Redefine</SelectItem>
+                    <SelectItem value="Recovery">Recovery</SelectItem>
+                    <SelectItem value="Recovery V2">Recovery V2</SelectItem>
+                    <SelectItem value="Reimagine">Reimagine</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
-            ) : null}
-            <div className="space-y-2">
-              <Label className="text-white/80" htmlFor="enhance-workspace-seed">
-                Seed
-              </Label>
-              <Input
-                className="border-white/10 bg-white/5 text-white"
-                id="enhance-workspace-seed"
-                onChange={(event) =>
-                  handleNumericField(
-                    "seed",
-                    Number.parseInt(event.target.value, 10) || 1337
-                  )
-                }
-                type="number"
-                value={formState.seed}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label
-                className="text-white/80"
-                htmlFor="enhance-workspace-scale"
-              >
-                放大倍数
-              </Label>
-              <Input
-                className="border-white/10 bg-white/5 text-white"
-                id="enhance-workspace-scale"
-                max="32"
-                min="1"
-                onChange={(event) =>
-                  handleNumericField(
-                    "image_scaling_factor",
-                    clampNumber(
-                      Number.parseFloat(event.target.value) || 1,
-                      1,
-                      32
+              <div className="space-y-1.5">
+                <Label className="text-xs text-white/70">格式</Label>
+                <Select
+                  onValueChange={(value) =>
+                    setFormState((prev) => ({
+                      ...prev,
+                      output_format: value as FormState["output_format"],
+                    }))
+                  }
+                  value={formState.output_format}
+                >
+                  <SelectTrigger className={`${SOLID_PANEL_FIELD_CLASS} h-10`}>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="jpg">JPG</SelectItem>
+                    <SelectItem value="png">PNG</SelectItem>
+                    <SelectItem value="webp">WEBP</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-white/70">区域</Label>
+                <Select
+                  onValueChange={(value) =>
+                    setFormState((prev) => ({
+                      ...prev,
+                      subject_detection: value as FormState["subject_detection"],
+                    }))
+                  }
+                  value={formState.subject_detection}
+                >
+                  <SelectTrigger className={`${SOLID_PANEL_FIELD_CLASS} h-10`}>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="All">全部</SelectItem>
+                    <SelectItem value="Foreground">前景</SelectItem>
+                    <SelectItem value="Background">背景</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              {config.allowBatchSize ? (
+                <div className="space-y-1.5">
+                  <Label
+                    className="text-xs text-white/70"
+                    htmlFor="enhance-workspace-seed"
+                  >
+                    Seed
+                  </Label>
+                  <Input
+                    className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
+                    id="enhance-workspace-seed"
+                    onChange={(event) =>
+                      handleNumericField(
+                        "seed",
+                        Number.parseInt(event.target.value, 10) || 1337
+                      )
+                    }
+                    type="number"
+                    value={formState.seed}
+                  />
+                </div>
+              ) : null}
+              <div className="space-y-1.5">
+                <Label
+                  className="text-xs text-white/70"
+                  htmlFor="enhance-workspace-scale"
+                >
+                  放大
+                </Label>
+                <Input
+                  className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
+                  id="enhance-workspace-scale"
+                  max="32"
+                  min="1"
+                  onChange={(event) =>
+                    handleNumericField(
+                      "image_scaling_factor",
+                      clampNumber(
+                        Number.parseFloat(event.target.value) || 1,
+                        1,
+                        32
+                      )
                     )
-                  )
-                }
-                step="0.5"
-                type="number"
-                value={formState.image_scaling_factor}
-              />
+                  }
+                  step="0.5"
+                  type="number"
+                  value={formState.image_scaling_factor}
+                />
+              </div>
             </div>
           </div>
 
-          <div className="grid grid-cols-3 gap-3">
-            <div className="rounded-2xl border border-white/10 bg-white/5 p-3">
-              <div className="flex items-center justify-between gap-3">
-                <div>
-                  <div className="font-medium text-sm text-white">人脸增强</div>
-                  <div className="mt-1 text-[11px] text-white/45 leading-4">
-                    适合人像和模特图修复
-                  </div>
-                </div>
+          <div className="space-y-2">
+            <div className="text-[11px] uppercase tracking-[0.08em] text-white/65">
+              增强开关
+            </div>
+            <div className="grid grid-cols-3 gap-3">
+              <div
+                className={cn(
+                  SOLID_PANEL_CARD_CLASS,
+                  "flex items-center justify-between gap-3 px-3 py-3"
+                )}
+              >
+                <span className="text-sm text-white">人脸增强</span>
                 <Switch
                   checked={formState.face_enhancement}
                   onCheckedChange={(checked) =>
@@ -862,15 +880,13 @@ export function EnhanceProWorkspace({
                   }
                 />
               </div>
-            </div>
-            <div className="rounded-2xl border border-white/10 bg-white/5 p-3">
-              <div className="flex items-center justify-between gap-3">
-                <div>
-                  <div className="font-medium text-sm text-white">启用放大</div>
-                  <div className="mt-1 text-[11px] text-white/45 leading-4">
-                    强化增强时的上采样
-                  </div>
-                </div>
+              <div
+                className={cn(
+                  SOLID_PANEL_CARD_CLASS,
+                  "flex items-center justify-between gap-3 px-3 py-3"
+                )}
+              >
+                <span className="text-sm text-white">启用放大</span>
                 <Switch
                   checked={formState.upscaling_activated}
                   onCheckedChange={(checked) =>
@@ -881,15 +897,13 @@ export function EnhanceProWorkspace({
                   }
                 />
               </div>
-            </div>
-            <div className="rounded-2xl border border-white/10 bg-white/5 p-3">
-              <div className="flex items-center justify-between gap-3">
-                <div>
-                  <div className="font-medium text-sm text-white">裁剪铺满</div>
-                  <div className="mt-1 text-[11px] text-white/45 leading-4">
-                    尺寸比例不同时裁切填充
-                  </div>
-                </div>
+              <div
+                className={cn(
+                  SOLID_PANEL_CARD_CLASS,
+                  "flex items-center justify-between gap-3 px-3 py-3"
+                )}
+              >
+                <span className="text-sm text-white">裁剪铺满</span>
                 <Switch
                   checked={formState.crop_to_fill}
                   onCheckedChange={(checked) =>
@@ -903,13 +917,15 @@ export function EnhanceProWorkspace({
           {config.enableAdvancedControls ? (
             <>
               <Separator className="bg-white/10" />
-              <div className="space-y-3">
-                <div className="font-medium text-sm text-white">高级调节</div>
-                <div className="grid grid-cols-2 gap-3">
-                  <div className="space-y-2">
-                    <Label className="text-white/80">Creativity (1-6)</Label>
+              <div className="space-y-2">
+                <div className="text-[11px] uppercase tracking-[0.08em] text-white/65">
+                  高级调节
+                </div>
+                <div className="grid grid-cols-3 gap-3">
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-white/70">创造力</Label>
                     <Input
-                      className="border-white/10 bg-white/5 text-white"
+                      className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="6"
                       min="1"
                       onChange={(event) =>
@@ -926,10 +942,10 @@ export function EnhanceProWorkspace({
                       value={formState.creativity}
                     />
                   </div>
-                  <div className="space-y-2">
-                    <Label className="text-white/80">Texture (1-5)</Label>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-white/70">纹理</Label>
                     <Input
-                      className="border-white/10 bg-white/5 text-white"
+                      className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="5"
                       min="1"
                       onChange={(event) =>
@@ -946,10 +962,10 @@ export function EnhanceProWorkspace({
                       value={formState.texture}
                     />
                   </div>
-                  <div className="space-y-2">
-                    <Label className="text-white/80">Detail (0-1)</Label>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-white/70">细节</Label>
                     <Input
-                      className="border-white/10 bg-white/5 text-white"
+                      className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
                       min="0"
                       onChange={(event) =>
@@ -967,10 +983,10 @@ export function EnhanceProWorkspace({
                       value={formState.detail}
                     />
                   </div>
-                  <div className="space-y-2">
-                    <Label className="text-white/80">Sharpen (0-1)</Label>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-white/70">锐化</Label>
                     <Input
-                      className="border-white/10 bg-white/5 text-white"
+                      className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
                       min="0"
                       onChange={(event) =>
@@ -988,10 +1004,10 @@ export function EnhanceProWorkspace({
                       value={formState.sharpen}
                     />
                   </div>
-                  <div className="space-y-2">
-                    <Label className="text-white/80">Denoise (0-1)</Label>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-white/70">降噪</Label>
                     <Input
-                      className="border-white/10 bg-white/5 text-white"
+                      className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
                       min="0"
                       onChange={(event) =>
@@ -1009,10 +1025,10 @@ export function EnhanceProWorkspace({
                       value={formState.denoise}
                     />
                   </div>
-                  <div className="space-y-2">
-                    <Label className="text-white/80">Face Strength (0-1)</Label>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-white/70">脸部力度</Label>
                     <Input
-                      className="border-white/10 bg-white/5 text-white"
+                      className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
                       min="0"
                       onChange={(event) =>
@@ -1030,12 +1046,10 @@ export function EnhanceProWorkspace({
                       value={formState.face_enhancement_strength}
                     />
                   </div>
-                  <div className="space-y-2">
-                    <Label className="text-white/80">
-                      Face Creativity (0-1)
-                    </Label>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs text-white/70">脸部创意</Label>
                     <Input
-                      className="border-white/10 bg-white/5 text-white"
+                      className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
                       min="0"
                       onChange={(event) =>
@@ -1059,12 +1073,12 @@ export function EnhanceProWorkspace({
           ) : null}
         </div>
 
-        <div className="border-white/10 border-t px-5 py-4">
+        <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">
             <span>
               {generatedImages.length > 0
                 ? `已生成 ${generatedImages.length} 张候选结果`
-                : "结果会在生成后显示并可发送回画布"}
+                : "生成后可直接发送回画布"}
             </span>
             {selectedGeneratedImage ? (
               <span className="inline-flex items-center gap-1 text-emerald-300">
@@ -1075,7 +1089,7 @@ export function EnhanceProWorkspace({
           </div>
           <div className="flex items-center gap-2">
             <Button
-              className="h-11 flex-1 rounded-2xl bg-[#0f62fe] text-white hover:bg-[#0a58e0]"
+              className="h-10 flex-1 rounded-2xl bg-[#0f62fe] text-white hover:bg-[#0a58e0]"
               disabled={isSubmitting || !sourceImageUrl}
               onClick={handleSubmit}
               type="button"
@@ -1088,7 +1102,7 @@ export function EnhanceProWorkspace({
               开始增强 Pro
             </Button>
             <Button
-              className="h-11 rounded-2xl border-white/10 bg-white/5 px-4 text-white hover:bg-white/10 hover:text-white"
+              className="h-10 rounded-2xl border-white/10 bg-[#1a1b22] px-4 text-white hover:bg-[#23242c] hover:text-white"
               disabled={!selectedGeneratedImage}
               onClick={handleApply}
               type="button"
diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 22ae2d10a..f99c5d98a 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -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-border/40 bg-background/80 px-4 py-2 shadow-sm backdrop-blur-md transition hover:bg-background"
+          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]"
           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-foreground text-sm">
+          <span className="font-semibold text-sm text-white">
             {siteName}
           </span>
         </button>
 
-        <div className="pointer-events-auto inline-flex w-fit items-center gap-1 rounded-full border border-border/40 bg-background/85 p-1.5 shadow-sm backdrop-blur-md">
+        <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">
           <button
             className={cn(
               "inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition",
               workspaceMode === "realtime"
-                ? "bg-foreground text-background shadow-sm"
-                : "text-foreground/70 hover:bg-background hover:text-foreground"
+                ? "bg-white text-black shadow-sm"
+                : "bg-[#1a1b22] text-white/78 hover:bg-[#23242c] hover:text-white"
             )}
             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-foreground text-background shadow-sm"
-                : "text-foreground/70 hover:bg-background hover:text-foreground"
+                ? "bg-white text-black shadow-sm"
+                : "bg-[#1a1b22] text-white/78 hover:bg-[#23242c] hover:text-white"
             )}
             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-black bg-black p-1 shadow-sm">
+        <div className="pointer-events-auto rounded-full border border-white/10 bg-[#111216] p-1 shadow-sm">
           <Button
-            className="h-7 w-7 rounded-full text-white transition hover:bg-white/10 hover:text-white"
+            className="h-7 w-7 rounded-full bg-[#1a1b22] text-white transition hover:bg-[#23242c] hover:text-white"
             onClick={handleCloseRealtime}
             size="icon"
             title="关闭"
@@ -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-background/80 p-2 shadow-xl backdrop-blur-md">
+              <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="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-background/80 p-1.5 shadow-xl backdrop-blur-md">
+              <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">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -3760,7 +3760,7 @@ export function RealtimeCanvasDialog({
               </div>
             </TooltipProvider>
 
-            <div className="pointer-events-auto w-full rounded-[24px] border border-border/40 bg-background/80 p-4 shadow-2xl backdrop-blur-md">
+            <div className="pointer-events-auto w-full rounded-[24px] border border-border/40 bg-[#111216] p-4 shadow-2xl">
               <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)}