From 262dad5563ddb808cc050d313530197dbc3804e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Wed, 5 Aug 2026 15:16:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E7=94=9F=E6=88=90=E9=9D=A2=E6=9D=BF=E7=9A=84?=
 =?UTF-8?q?=E5=A4=9A=E8=A1=8C=E8=BE=93=E5=85=A5=E6=A1=86,=20=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=BA=A4=E4=BA=92=E4=B8=8E=E5=9B=BE=E6=A0=87=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化输入框样式，与画布编辑器一致。
- 调整按钮布局，添加间距和微调样式以提升一致性。
- 替换按钮文本为动态图标及文本组合，优化用户体验。
---
 .../ImageCanvasSpecGenerationPanelView.tsx    | 113 ++++++++++--------
 1 file changed, 65 insertions(+), 48 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
index 93198069e..2842e7496 100644
--- a/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasSpecGenerationPanelView.tsx
@@ -1,4 +1,11 @@
-import { ClipboardList, Cpu, ImagePlus } from 'lucide-react';
+import {
+  ClipboardList,
+  Cpu,
+  ImagePlus,
+  Loader2,
+  Sparkles,
+  Undo2,
+} from 'lucide-react';
 import {
   type CSSProperties,
   type Dispatch,
@@ -466,61 +473,71 @@ export function ImageCanvasSpecGenerationPanelView({
                     >
                       {item.title}
                     </PlatformFieldLabel>
-                    <div>
-                      <PlatformTextField
-                        variant="textarea"
-                        aria-label={item.title}
-                        value={value}
-                        placeholder={item.placeholder}
-                        disabled={isGenerating || item.optimization.optimizing}
-                        size="sm"
-                        density="compact"
-                        className="image-canvas-editor__spec-textarea"
-                        onChange={(event) =>
-                          onUpdateSpecFormValue(
-                            item.key,
-                            limitIconSpecPrompt(event.target.value),
-                          )
+                    <AutoGrowTextArea
+                      aria-label={item.title}
+                      value={value}
+                      placeholder={item.placeholder}
+                      disabled={isGenerating || item.optimization.optimizing}
+                      className="image-canvas-editor__generation-prompt image-canvas-editor__spec-textarea"
+                      onChange={(event) =>
+                        onUpdateSpecFormValue(
+                          item.key,
+                          limitIconSpecPrompt(event.target.value),
+                        )
+                      }
+                    />
+                    <div className="flex items-center gap-1">
+                      <PlatformActionButton
+                        type="button"
+                        tone="ghost"
+                        size="xxs"
+                        shape="pill"
+                        className="!gap-1 !px-2 !py-0.5 !text-[9px] !leading-3"
+                        aria-label={`一键优化${item.title}`}
+                        disabled={
+                          isGenerating ||
+                          item.optimization.optimizing ||
+                          !isValidIconSpecPrompt(value)
                         }
-                      />
-                      <div>
+                        onClick={() => optimizeIconSpecField(item.field)}
+                      >
+                        {item.optimization.optimizing ? (
+                          <>
+                            <Loader2
+                              className="h-3 w-3 animate-spin"
+                              aria-hidden="true"
+                            />
+                            正在优化
+                          </>
+                        ) : (
+                          <>
+                            <Sparkles
+                              className="h-3 w-3"
+                              aria-hidden="true"
+                            />
+                            一键优化
+                          </>
+                        )}
+                      </PlatformActionButton>
+                      {item.optimization.undoValue !== null &&
+                      !item.optimization.optimizing ? (
                         <PlatformActionButton
                           type="button"
                           tone="ghost"
                           size="xxs"
                           shape="pill"
-                          aria-label={`一键优化${item.title}`}
-                          disabled={
-                            isGenerating ||
-                            item.optimization.optimizing ||
-                            !isValidIconSpecPrompt(value)
-                          }
-                          onClick={() => optimizeIconSpecField(item.field)}
+                          className="!gap-1 !px-2 !py-0.5 !text-[9px] !leading-3"
+                          aria-label={`撤销${item.title}优化`}
+                          disabled={isGenerating}
+                          onClick={() => undoIconSpecOptimization(item.field)}
                         >
-                          {item.optimization.optimizing
-                            ? '正在优化'
-                            : '✦ 一键优化'}
+                          <Undo2
+                            className="h-3 w-3"
+                            aria-hidden="true"
+                          />
+                          撤销
                         </PlatformActionButton>
-                        {item.optimization.undoValue !== null &&
-                        !item.optimization.optimizing ? (
-                          <>
-                            <span aria-hidden="true">｜</span>
-                            <PlatformActionButton
-                              type="button"
-                              tone="ghost"
-                              size="xxs"
-                              shape="pill"
-                              aria-label={`撤销${item.title}优化`}
-                              disabled={isGenerating}
-                              onClick={() =>
-                                undoIconSpecOptimization(item.field)
-                              }
-                            >
-                              ↺ 撤销
-                            </PlatformActionButton>
-                          </>
-                        ) : null}
-                      </div>
+                      ) : null}
                     </div>
                   </label>
                 );