From fa2f26bf97a54c4c8555b7a3e726e764c8191aac Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 16 May 2026 19:34:38 +0800
Subject: [PATCH] feat: align style pro UI with index prototype

---
 components/style-pro/StyleProWorkspace.tsx | 583 ++++++++++++---------
 1 file changed, 325 insertions(+), 258 deletions(-)

diff --git a/components/style-pro/StyleProWorkspace.tsx b/components/style-pro/StyleProWorkspace.tsx
index 6d34c3b42..3c81b24cf 100644
--- a/components/style-pro/StyleProWorkspace.tsx
+++ b/components/style-pro/StyleProWorkspace.tsx
@@ -16,7 +16,6 @@ import useSWR from "swr";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { imageGenerationService } from "@/services/canvas";
 import { cn, fetcher } from "@/lib/utils";
 import type {
@@ -107,7 +106,7 @@ function ImagePreview({
     return (
       <div
         className={cn(
-          "flex h-full min-h-[220px] items-center justify-center rounded-lg border border-dashed border-white/15 bg-white/[0.03] text-sm text-white/45",
+          "flex h-full min-h-[220px] items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 text-gray-400 text-sm",
           className
         )}
       >
@@ -208,7 +207,7 @@ function BeforeAfterSlider({
 
   if (!beforeUrl && !afterUrl) {
     return (
-      <div className="flex min-h-[460px] items-center justify-center rounded-lg border border-dashed border-white/15 bg-white/[0.03] text-white/45">
+      <div className="flex min-h-[460px] items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 text-gray-400">
         上传图片后开始生成
       </div>
     );
@@ -216,14 +215,14 @@ function BeforeAfterSlider({
 
   if (!afterUrl) {
     return (
-      <div className="min-h-[460px] rounded-lg border border-white/10 bg-[#111] p-3">
+      <div className="min-h-[460px] rounded-lg border border-gray-200 bg-gray-50 p-3">
         <ImagePreview alt="上传图片" imageUrl={beforeUrl} />
       </div>
     );
   }
 
   return (
-    <div className="relative min-h-[460px] overflow-hidden rounded-lg border border-white/10 bg-[#111]">
+    <div className="relative min-h-[460px] overflow-hidden rounded-lg border border-gray-200 bg-gray-50">
       <ImagePreview
         alt="生成后"
         className="absolute inset-0 h-full w-full"
@@ -507,10 +506,56 @@ export function StyleProWorkspace({
       : "";
 
   return (
-    <div className="flex h-dvh w-full overflow-hidden bg-[#050606] text-white">
-      <aside className="flex w-[76px] shrink-0 flex-col items-center border-white/10 border-r bg-black">
+    <div className="style-pro-index-shell flex h-dvh w-full overflow-hidden bg-gray-50 text-gray-900">
+      <style>{`
+        .style-pro-index-shell .section-card {
+          background: #fff;
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
+        }
+        .style-pro-index-shell .subsection-title {
+          color: #2563eb;
+          font-size: 14px;
+          font-weight: 700;
+          white-space: nowrap;
+        }
+        .style-pro-index-shell .option-btn {
+          border: 1px solid #e5e7eb;
+          background: #f9fafb;
+          color: #374151;
+          transition: all 0.18s ease;
+        }
+        .style-pro-index-shell .option-btn:hover {
+          background: #1f2937;
+          border-color: #1f2937;
+          color: #fff;
+        }
+        .style-pro-index-shell .option-btn.active {
+          background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.05));
+          color: #2563eb;
+          border-color: #60a5fa;
+          box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+        }
+        .style-pro-index-shell .preset-btn {
+          border-radius: 9999px;
+          transition: all 0.18s ease;
+        }
+        .style-pro-index-shell .custom-input {
+          border: 1px solid #e5e7eb;
+          background: #fafafa;
+          color: #111827;
+          outline: none;
+        }
+        .style-pro-index-shell .custom-input:focus {
+          border-color: #60a5fa;
+          box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
+        }
+      `}</style>
+
+      <aside className="flex w-[76px] shrink-0 flex-col items-center border-gray-200 border-r bg-white">
         <button
-          className="mt-5 flex h-11 w-11 items-center justify-center rounded-lg bg-white/[0.06] text-white"
+          className="mt-5 flex h-11 w-11 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 text-gray-800"
           onClick={onBack}
           title="返回画布"
           type="button"
@@ -518,12 +563,12 @@ export function StyleProWorkspace({
           {logo ? (
             <img alt={siteName} className="h-6 w-6 object-contain" src={logo} />
           ) : (
-            <Sparkles className="h-5 w-5 text-emerald-300" />
+            <Sparkles className="h-5 w-5 text-blue-600" />
           )}
         </button>
         <div className="mt-8 flex flex-col gap-3">
           <button
-            className="flex h-11 w-11 items-center justify-center rounded-lg bg-emerald-400 text-black"
+            className="flex h-11 w-11 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm"
             onClick={onBack}
             title="返回画布"
             type="button"
@@ -531,7 +576,7 @@ export function StyleProWorkspace({
             <Home className="h-5 w-5" />
           </button>
           <button
-            className="flex h-11 w-11 items-center justify-center rounded-lg bg-white/[0.05] text-white/75 hover:bg-white/[0.09] hover:text-white"
+            className="flex h-11 w-11 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
             onClick={() => fileInputRef.current?.click()}
             title="上传图片"
             type="button"
@@ -541,51 +586,113 @@ export function StyleProWorkspace({
         </div>
       </aside>
 
-      <main className="flex min-w-0 flex-1 flex-col">
-        <header className="flex h-16 shrink-0 items-center justify-between border-white/10 border-b bg-black/85 px-6">
-          <div className="flex items-center gap-3">
-            <Button
-              className="rounded-lg border-white/10 bg-white/[0.04] text-white hover:bg-white/[0.08]"
-              onClick={onBack}
-              size="sm"
-              variant="outline"
-            >
-              <ArrowLeft className="mr-2 h-4 w-4" />
-              返回画布
-            </Button>
-            <div>
-              <div className="text-sm text-white/45">{siteName}</div>
-              <h1 className="font-semibold text-xl">风格化 PRO</h1>
+      <main className="min-w-0 flex-1 overflow-y-auto">
+        <div className="sticky top-0 z-40 border-gray-200 border-b bg-white">
+          <div className="mx-auto flex max-w-[1920px] items-center justify-between gap-4 px-6 py-4">
+            <div className="flex items-center gap-3">
+              <Button
+                className="rounded-lg border-gray-200 bg-white text-gray-700 hover:bg-gray-100"
+                onClick={onBack}
+                size="sm"
+                variant="outline"
+              >
+                <ArrowLeft className="mr-2 h-4 w-4" />
+                返回画布
+              </Button>
+              <div className="flex items-center gap-2">
+                {logo ? (
+                  <img alt={siteName} className="h-8 w-8 object-contain" src={logo} />
+                ) : (
+                  <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 text-white">
+                    <Sparkles className="h-4 w-4" />
+                  </div>
+                )}
+                <div>
+                  <div className="font-semibold text-gray-900 text-sm">{siteName}</div>
+                  <div className="text-gray-500 text-xs">风格化 PRO</div>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-center justify-end gap-3">
+              <button
+                className="preset-btn flex items-center gap-2 border-2 border-blue-400 bg-gradient-to-r from-blue-500/20 to-blue-300/5 px-5 py-2 font-bold text-blue-700 text-sm"
+                onClick={quickFillRequired}
+                type="button"
+              >
+                <UserRound className="h-4 w-4" />
+                执行者
+              </button>
+              <button
+                className="preset-btn flex items-center gap-2 border-2 border-blue-400 bg-gradient-to-r from-blue-500/20 to-blue-300/5 px-5 py-2 font-bold text-blue-700 text-sm disabled:opacity-50"
+                disabled={generating || Boolean(disabledReason)}
+                onClick={handleGenerate}
+                type="button"
+              >
+                {generating ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Sparkles className="h-4 w-4" />
+                )}
+                执行
+              </button>
+              <button
+                className="preset-btn flex items-center gap-2 border-2 border-blue-400 bg-gradient-to-r from-blue-500/20 to-blue-300/5 px-5 py-2 font-bold text-blue-700 text-sm"
+                onClick={() => {
+                  setSelections({});
+                  setCurrentResult(null);
+                }}
+                type="button"
+              >
+                <RotateCcw className="h-4 w-4" />
+                重置
+              </button>
+              <button
+                className="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-gray-700 text-sm hover:bg-gray-100"
+                onClick={() => toast.info("个人中心入口已保留，可在首页打开完整账户面板")}
+                type="button"
+              >
+                <UserRound className="h-4 w-4" />
+                个人中心
+              </button>
             </div>
           </div>
-          <button
-            className="flex items-center gap-2 rounded-lg border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white/80 hover:bg-white/[0.08] hover:text-white"
-            onClick={() => toast.info("个人中心入口已保留，可在首页打开完整账户面板")}
-            type="button"
-          >
-            <UserRound className="h-4 w-4" />
-            个人中心
-          </button>
-        </header>
+        </div>
 
-        <div className="grid min-h-0 flex-1 grid-cols-[360px_minmax(0,1fr)] overflow-hidden">
-          <section className="flex min-h-0 flex-col border-white/10 border-r bg-[#080909]">
-            <ScrollArea className="min-h-0 flex-1">
-              <div className="space-y-5 p-5">
-                <div>
-                  <div className="mb-3 flex items-center justify-between">
-                    <div>
-                      <h2 className="font-semibold text-base">上传图片</h2>
-                      <p className="mt-1 text-sm text-white/45">
-                        上传后选择按钮组合生成最终图。
-                      </p>
-                    </div>
-                    <Badge className="border-emerald-400/30 bg-emerald-400/10 text-emerald-200">
-                      Final
-                    </Badge>
+        <div className="mx-auto max-w-[1920px] space-y-6 px-6 py-8">
+          <section className="section-card p-6">
+            <div className="mb-5 flex flex-wrap items-start justify-between gap-4">
+              <div>
+                <h1 className="font-black text-4xl text-gray-900 lg:text-5xl">
+                  风格化 PRO
+                </h1>
+                <p className="mt-2 text-gray-500 text-sm">
+                  上传图片，选择下方按钮组合，按执行生成最终图片。
+                </p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                <Badge className="border-blue-200 bg-blue-50 text-blue-800">
+                  {selectedOptionLabels.length
+                    ? `已选择 ${selectedOptionLabels.length} 项`
+                    : "等待选择"}
+                </Badge>
+                {disabledReason ? (
+                  <Badge className="border-amber-200 bg-amber-50 text-amber-700">
+                    {disabledReason}
+                  </Badge>
+                ) : null}
+              </div>
+            </div>
+
+            <div className="grid gap-6 xl:grid-cols-[360px_minmax(0,1fr)]">
+              <div className="space-y-4">
+                <div className="rounded-xl bg-gray-50 p-4">
+                  <div className="mb-3 flex items-center justify-between gap-3">
+                    <span className="subsection-title">上传图片</span>
+                    <span className="text-gray-400 text-xs">支持拖拽上传</span>
                   </div>
                   <button
-                    className="group relative flex min-h-[230px] w-full items-center justify-center overflow-hidden rounded-lg border border-dashed border-white/15 bg-white/[0.03] transition hover:border-emerald-300/60 hover:bg-white/[0.05]"
+                    className="flex min-h-[260px] w-full items-center justify-center overflow-hidden rounded-lg border border-dashed border-gray-300 bg-white transition hover:border-blue-400"
                     onClick={() => fileInputRef.current?.click()}
                     onDragOver={(event) => event.preventDefault()}
                     onDrop={(event) => {
@@ -597,19 +704,17 @@ export function StyleProWorkspace({
                     {sourceImageUrl ? (
                       <img
                         alt="上传图片"
-                        className="h-full max-h-[300px] w-full object-contain"
+                        className="h-full max-h-[320px] w-full object-contain"
                         src={sourceImageUrl}
                       />
                     ) : (
-                      <span className="flex flex-col items-center gap-3 text-white/55">
+                      <span className="flex flex-col items-center gap-3 text-gray-500">
                         {uploading ? (
                           <Loader2 className="h-7 w-7 animate-spin" />
                         ) : (
                           <Upload className="h-7 w-7" />
                         )}
-                        <span className="text-sm">
-                          点击上传，或拖入图片
-                        </span>
+                        <span className="text-sm">点击上传，或拖入图片</span>
                       </span>
                     )}
                   </button>
@@ -625,26 +730,26 @@ export function StyleProWorkspace({
                   />
                 </div>
 
-                <div>
-                  <div className="mb-3 flex items-center justify-between">
-                    <h2 className="font-semibold text-base">历史记录</h2>
-                    <span className="text-xs text-white/40">最近 4 条</span>
+                <div className="rounded-xl bg-gray-50 p-4">
+                  <div className="mb-3 flex items-center justify-between gap-3">
+                    <span className="subsection-title">历史记录</span>
+                    <span className="text-gray-400 text-xs">最近 4 条</span>
                   </div>
                   <div className="grid grid-cols-2 gap-3">
                     {history.length > 0 ? (
                       history.map((item) => (
                         <button
                           className={cn(
-                            "group overflow-hidden rounded-lg border bg-white/[0.03] text-left transition hover:border-emerald-300/70",
+                            "overflow-hidden rounded-lg border bg-white text-left transition hover:border-blue-400",
                             currentResult?.id === item.id
-                              ? "border-emerald-300/80"
-                              : "border-white/10"
+                              ? "border-blue-400 shadow-[0_4px_12px_rgba(59,130,246,0.16)]"
+                              : "border-gray-200"
                           )}
                           key={item.id}
                           onClick={() => restoreHistoryItem(item)}
                           type="button"
                         >
-                          <div className="aspect-square bg-black">
+                          <div className="aspect-square bg-gray-100">
                             <img
                               alt="风格化历史"
                               className="h-full w-full object-cover"
@@ -652,7 +757,7 @@ export function StyleProWorkspace({
                             />
                           </div>
                           <div className="space-y-1 p-2">
-                            <div className="flex items-center gap-1 text-[11px] text-white/50">
+                            <div className="flex items-center gap-1 text-[11px] text-gray-400">
                               <Clock3 className="h-3 w-3" />
                               {new Date(item.createdAt).toLocaleTimeString(
                                 "zh-CN",
@@ -662,222 +767,184 @@ export function StyleProWorkspace({
                                 }
                               )}
                             </div>
-                            <div className="line-clamp-1 text-xs text-white/80">
+                            <div className="line-clamp-1 text-gray-700 text-xs">
                               {item.optionLabels[0] || "风格化结果"}
                             </div>
                           </div>
                         </button>
                       ))
                     ) : (
-                      <div className="col-span-2 rounded-lg border border-dashed border-white/12 p-5 text-center text-sm text-white/40">
+                      <div className="col-span-2 rounded-lg border border-dashed border-gray-300 bg-white p-5 text-center text-gray-400 text-sm">
                         生成后会在这里保存历史。
                       </div>
                     )}
                   </div>
                 </div>
               </div>
-            </ScrollArea>
-          </section>
 
-          <section className="flex min-w-0 flex-col overflow-hidden bg-[#0b0c0c]">
-            <div className="border-white/10 border-b p-5">
-              <div className="flex flex-wrap items-start justify-between gap-4">
-                <div>
-                  <div className="flex items-center gap-2">
-                    <Sparkles className="h-5 w-5 text-emerald-300" />
-                    <h2 className="font-semibold text-lg">提示词按钮组合</h2>
+              <div className="rounded-xl bg-gray-50 p-4">
+                <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+                  <div>
+                    <span className="subsection-title">生图结果</span>
+                    <p className="mt-1 text-gray-500 text-sm">
+                      生成后拖动滑块查看原图与结果图。
+                    </p>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <Button
+                      className="rounded-lg bg-blue-600 text-white hover:bg-blue-700"
+                      disabled={generating || Boolean(disabledReason)}
+                      onClick={handleGenerate}
+                    >
+                      {generating ? (
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      ) : (
+                        <Sparkles className="mr-2 h-4 w-4" />
+                      )}
+                      {generating ? "正在创建图片" : "执行"}
+                    </Button>
+                    <Button
+                      className="rounded-lg border-gray-200 bg-white text-gray-700 hover:bg-gray-100"
+                      disabled={!currentResult}
+                      onClick={() => currentResult && onAddToCanvas?.(currentResult)}
+                      variant="outline"
+                    >
+                      添加到画布
+                    </Button>
                   </div>
-                  <p className="mt-1 text-sm text-white/45">
-                    完成必选项后执行，后台隐藏提示词会参与最终生成。
-                  </p>
-                </div>
-                <div className="flex flex-wrap gap-2">
-                  <Button
-                    className="rounded-lg border-white/10 bg-white/[0.04] text-white hover:bg-white/[0.08]"
-                    onClick={quickFillRequired}
-                    size="sm"
-                    variant="outline"
-                  >
-                    <Sparkles className="mr-2 h-4 w-4" />
-                    自动补全必选
-                  </Button>
-                  <Button
-                    className="rounded-lg border-white/10 bg-white/[0.04] text-white hover:bg-white/[0.08]"
-                    onClick={() => setSelections({})}
-                    size="sm"
-                    variant="outline"
-                  >
-                    <RotateCcw className="mr-2 h-4 w-4" />
-                    清空选择
-                  </Button>
                 </div>
+                <BeforeAfterSlider
+                  afterUrl={currentResult?.resultImageUrl}
+                  beforeUrl={currentResult?.sourceImageUrl || sourceImageUrl}
+                  generating={generating}
+                />
               </div>
             </div>
+          </section>
 
-            <ScrollArea className="min-h-0 flex-1">
-              <div className="space-y-6 p-5">
-                {configLoading ? (
-                  <div className="flex min-h-[180px] items-center justify-center rounded-lg border border-white/10 bg-white/[0.03] text-white/55">
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    正在加载配置
-                  </div>
-                ) : !config?.enabled ? (
-                  <div className="rounded-lg border border-amber-400/30 bg-amber-400/10 p-5 text-amber-100">
-                    风格化 PRO 暂未启用，请联系管理员开启。
-                  </div>
-                ) : (
-                  <div className="space-y-4">
-                    {enabledCategories.map((category, index) => {
-                      const selectedIds = selections[category.id] || [];
-                      const complete =
-                        selectedIds.length >=
-                        Math.max(
-                          category.required ? 1 : 0,
-                          category.minSelections
-                        );
-                      return (
-                        <div
-                          className="rounded-lg border border-white/10 bg-white/[0.035] p-4"
-                          key={category.id}
-                        >
-                          <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
-                            <div className="flex items-start gap-3">
-                              <span
-                                className={cn(
-                                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-semibold",
-                                  complete
-                                    ? "bg-emerald-300 text-black"
-                                    : "bg-white/[0.08] text-white/65"
-                                )}
-                              >
-                                {index + 1}
-                              </span>
-                              <div>
-                                <div className="flex items-center gap-2">
-                                  <h3 className="font-semibold text-white">
-                                    {category.title}
-                                  </h3>
-                                  {category.required ? (
-                                    <Badge className="border-emerald-400/30 bg-emerald-400/10 text-emerald-200">
-                                      必选
-                                    </Badge>
-                                  ) : (
-                                    <Badge
-                                      className="border-white/10 text-white/55"
-                                      variant="outline"
-                                    >
-                                      可选
-                                    </Badge>
-                                  )}
-                                </div>
-                                {category.description ? (
-                                  <p className="mt-1 text-sm text-white/45">
-                                    {category.description}
-                                  </p>
-                                ) : null}
-                              </div>
-                            </div>
-                            <span className="rounded-full border border-white/10 px-3 py-1 text-xs text-white/45">
-                              已选 {selectedIds.length}/{category.maxSelections}
+          {configLoading ? (
+            <section className="section-card flex min-h-[180px] items-center justify-center p-6 text-gray-500">
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              正在加载配置
+            </section>
+          ) : !config?.enabled ? (
+            <section className="section-card border-amber-200 bg-amber-50 p-6 text-amber-800">
+              风格化 PRO 暂未启用，请联系管理员开启。
+            </section>
+          ) : (
+            enabledCategories.map((category) => {
+              const selectedIds = selections[category.id] || [];
+              return (
+                <section className="section-card p-6" key={category.id}>
+                  <div className="rounded-xl bg-gray-50 p-4">
+                    <div className="mb-3 flex items-start gap-4">
+                      <span className="subsection-title mt-2 w-20">
+                        {category.title}
+                      </span>
+                      <div className="min-w-0 flex-1">
+                        <div className="mb-3 flex flex-wrap items-center gap-2">
+                          {category.required ? (
+                            <Badge className="border-blue-200 bg-blue-50 text-blue-800">
+                              必选
+                            </Badge>
+                          ) : (
+                            <Badge className="border-gray-200 bg-white text-gray-500">
+                              可选
+                            </Badge>
+                          )}
+                          <span className="text-gray-400 text-xs">
+                            已选 {selectedIds.length}/{category.maxSelections}
+                          </span>
+                          {category.description ? (
+                            <span className="text-gray-400 text-xs">
+                              {category.description}
                             </span>
-                          </div>
-                          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-                            {category.options.map((option) => {
-                              const selected = selectedIds.includes(option.id);
-                              return (
-                                <button
-                                  className={cn(
-                                    "min-h-[96px] rounded-lg border p-4 text-left transition",
-                                    selected
-                                      ? "border-emerald-300/80 bg-emerald-300/12 shadow-[0_0_0_1px_rgba(110,231,183,0.25)]"
-                                      : "border-white/10 bg-black/25 hover:border-white/25 hover:bg-white/[0.05]"
-                                  )}
-                                  key={option.id}
-                                  onClick={() => toggleOption(category, option.id)}
-                                  type="button"
-                                >
-                                  <div className="flex items-start justify-between gap-3">
-                                    <span className="font-semibold text-sm text-white">
-                                      {option.label}
-                                    </span>
-                                    {selected ? (
-                                      <span className="rounded-full bg-emerald-300 px-2 py-0.5 text-[11px] font-semibold text-black">
-                                        已选
-                                      </span>
-                                    ) : null}
-                                  </div>
-                                  {option.description ? (
-                                    <p className="mt-2 line-clamp-2 text-xs leading-relaxed text-white/45">
-                                      {option.description}
-                                    </p>
-                                  ) : null}
-                                </button>
-                              );
-                            })}
-                          </div>
+                          ) : null}
                         </div>
-                      );
-                    })}
+                        <div className="flex flex-wrap gap-2">
+                          {category.options.map((option) => {
+                            const selected = selectedIds.includes(option.id);
+                            return (
+                              <button
+                                className={cn(
+                                  "option-btn rounded-full px-4 py-2 font-medium text-sm",
+                                  selected && "active"
+                                )}
+                                key={option.id}
+                                onClick={() => toggleOption(category, option.id)}
+                                title={option.description || option.label}
+                                type="button"
+                              >
+                                {option.label}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                    <input
+                      className="custom-input w-full rounded-lg px-4 py-2 text-sm"
+                      disabled
+                      placeholder={`自定义${category.title}描述...`}
+                      type="text"
+                    />
                   </div>
-                )}
+                </section>
+              );
+            })
+          )}
 
-                <div className="rounded-lg border border-white/10 bg-white/[0.035] p-4">
-                  <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-                    <div>
-                      <h2 className="font-semibold text-lg">图像对比</h2>
-                      <p className="mt-1 text-sm text-white/45">
-                        生成完成后拖动滑块查看前后差异。
-                      </p>
-                    </div>
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Button
-                        className="rounded-lg bg-emerald-400 text-black hover:bg-emerald-300"
-                        disabled={generating || Boolean(disabledReason)}
-                        onClick={handleGenerate}
-                      >
-                        {generating ? (
-                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        ) : (
-                          <Sparkles className="mr-2 h-4 w-4" />
-                        )}
-                        {generating ? "生成中" : "开始生成"}
-                      </Button>
-                      <Button
-                        className="rounded-lg border-white/10 bg-white/[0.04] text-white hover:bg-white/[0.08]"
-                        disabled={!currentResult}
-                        onClick={() => currentResult && onAddToCanvas?.(currentResult)}
-                        variant="outline"
-                      >
-                        添加到画布
-                      </Button>
-                    </div>
-                  </div>
-                  {disabledReason ? (
-                    <div className="mb-3 rounded-lg border border-white/10 bg-black/35 px-3 py-2 text-sm text-white/45">
-                      {disabledReason}
-                    </div>
-                  ) : null}
-                  <BeforeAfterSlider
-                    afterUrl={currentResult?.resultImageUrl}
-                    beforeUrl={currentResult?.sourceImageUrl || sourceImageUrl}
-                    generating={generating}
-                  />
-                  {selectedOptionLabels.length > 0 ? (
-                    <div className="mt-4 flex flex-wrap gap-2">
-                      {selectedOptionLabels.map((label) => (
-                        <Badge
-                          className="border-white/10 bg-white/[0.04] text-white/70"
-                          key={label}
-                          variant="outline"
-                        >
-                          {label}
-                        </Badge>
-                      ))}
-                    </div>
-                  ) : null}
-                </div>
+          <section className="section-card p-6">
+            <div className="flex flex-wrap items-center justify-between gap-4">
+              <div>
+                <h3 className="flex items-center gap-2 font-bold text-gray-900">
+                  <Sparkles className="h-5 w-5 text-blue-600" />
+                  已选组合
+                </h3>
+                <p className="mt-1 text-gray-500 text-sm">
+                  按钮提示词只在服务端参与生成，前台仅展示按钮名称。
+                </p>
               </div>
-            </ScrollArea>
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  className="rounded-lg border-gray-200 bg-white text-gray-700 hover:bg-gray-100"
+                  onClick={() => setSelections({})}
+                  variant="outline"
+                >
+                  <RotateCcw className="mr-2 h-4 w-4" />
+                  清空选择
+                </Button>
+                <Button
+                  className="rounded-lg bg-blue-600 text-white hover:bg-blue-700"
+                  disabled={generating || Boolean(disabledReason)}
+                  onClick={handleGenerate}
+                >
+                  {generating ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <Sparkles className="mr-2 h-4 w-4" />
+                  )}
+                  执行
+                </Button>
+              </div>
+            </div>
+            {selectedOptionLabels.length > 0 ? (
+              <div className="mt-4 flex flex-wrap gap-2">
+                {selectedOptionLabels.map((label) => (
+                  <Badge
+                    className="border-blue-200 bg-blue-50 text-blue-800"
+                    key={label}
+                    variant="outline"
+                  >
+                    {label}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <div className="mt-4 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-5 text-center text-gray-400 text-sm">
+                还没有选择按钮。
+              </div>
+            )}
           </section>
         </div>
       </main>