From f5c87efba7c83e6fc0e00308ea2156f3a070a9bf Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 12 Jan 2026 14:14:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E9=98=B2=E6=AD=A2=E6=96=87=E5=AD=97=E6=8D=A2=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 whitespace-nowrap 防止按钮文字换行
- 减小按钮尺寸：图标 14px->12px，文字 text-xs->text-[10px]
- 减小按钮间距和内边距，适应不同宽度的图片
- 添加 flex-wrap 允许按钮换行到下一行
---
 components/image-preview.tsx | 53 ++++++++++++++++++++++++------------
 components/messages.tsx      |  9 ++++--
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/components/image-preview.tsx b/components/image-preview.tsx
index 01072d7..d156b44 100644
--- a/components/image-preview.tsx
+++ b/components/image-preview.tsx
@@ -71,9 +71,14 @@ export function ImagePreview({
       
       if (extraInfo === "4K") {
         is4K = true;
+        maxWidth = 500; // 4K 图片显示 500px 宽
       } else if (extraInfo === "2K") {
-        // 2K 不是 4K，但也是高质量
+        // 2K 是高质量图片，显示较大尺寸
         is4K = false;
+        maxWidth = 400; // 2K 图片显示 400px 宽
+      } else if (extraInfo === "1K") {
+        is4K = false;
+        maxWidth = 300; // 1K 图片显示 300px 宽
       } else if (extraInfo && !isNaN(parseInt(extraInfo, 10))) {
         maxWidth = parseInt(extraInfo, 10);
       }
@@ -89,6 +94,13 @@ export function ImagePreview({
       
       if (extraInfo === "4K") {
         is4K = true;
+        maxWidth = 500;
+      } else if (extraInfo === "2K") {
+        is4K = false;
+        maxWidth = 400;
+      } else if (extraInfo === "1K") {
+        is4K = false;
+        maxWidth = 300;
       } else if (extraInfo && !isNaN(parseInt(extraInfo, 10))) {
         maxWidth = parseInt(extraInfo, 10);
       }
@@ -104,6 +116,13 @@ export function ImagePreview({
       
       if (extraInfo === "4K") {
         is4K = true;
+        maxWidth = 500;
+      } else if (extraInfo === "2K") {
+        is4K = false;
+        maxWidth = 400;
+      } else if (extraInfo === "1K") {
+        is4K = false;
+        maxWidth = 300;
       } else if (extraInfo && !isNaN(parseInt(extraInfo, 10))) {
         maxWidth = parseInt(extraInfo, 10);
       }
@@ -236,10 +255,10 @@ export function ImagePreview({
         
         {/* 左上角：变清晰、抠图和图像拓展按钮 - 始终显示 */}
         {(onImageEnhance || onImageRmbg || onImageExtend) && (
-          <div className="absolute top-2 left-2 flex gap-1.5 z-10">
+          <div className="absolute top-2 left-2 flex gap-1 z-10 flex-wrap">
             {onImageEnhance && (
               <button
-                className="flex items-center gap-1.5 rounded-full bg-black/70 hover:bg-black/80 px-2.5 py-1.5 text-white transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                className="flex items-center gap-1 rounded-full bg-black/70 hover:bg-black/80 px-2 py-1 text-white transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
                 onClick={(e) => {
                   e.stopPropagation();
                   if (!isProcessingEnhance && !isProcessingRmbg && !isProcessingExtend) {
@@ -251,13 +270,13 @@ export function ImagePreview({
                 aria-label="变清晰"
                 title="变清晰"
               >
-                <Sparkles size={14} />
-                <span className="text-xs font-medium">变清晰</span>
+                <Sparkles size={12} />
+                <span className="text-[10px] font-medium">变清晰</span>
               </button>
             )}
             {onImageRmbg && (
               <button
-                className="flex items-center gap-1.5 rounded-full bg-black/70 hover:bg-black/80 px-2.5 py-1.5 text-white transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                className="flex items-center gap-1 rounded-full bg-black/70 hover:bg-black/80 px-2 py-1 text-white transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
                 onClick={(e) => {
                   e.stopPropagation();
                   if (!isProcessingEnhance && !isProcessingRmbg && !isProcessingExtend) {
@@ -269,13 +288,13 @@ export function ImagePreview({
                 aria-label="抠图"
                 title="抠图"
               >
-                <Scissors size={14} />
-                <span className="text-xs font-medium">抠图</span>
+                <Scissors size={12} />
+                <span className="text-[10px] font-medium">抠图</span>
               </button>
             )}
             {onImageExtend && (
               <button
-                className="flex items-center gap-1.5 rounded-full bg-black/70 hover:bg-black/80 px-2.5 py-1.5 text-white transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                className="flex items-center gap-1 rounded-full bg-black/70 hover:bg-black/80 px-2 py-1 text-white transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
                 onClick={(e) => {
                   e.stopPropagation();
                   if (!isProcessingEnhance && !isProcessingRmbg && !isProcessingExtend && !isProcessingAngleEdit) {
@@ -287,13 +306,13 @@ export function ImagePreview({
                 aria-label="图像拓展"
                 title="图像拓展"
               >
-                <Expand size={14} />
-                <span className="text-xs font-medium">图像拓展</span>
+                <Expand size={12} />
+                <span className="text-[10px] font-medium">图像拓展</span>
               </button>
             )}
             {onImageAngleEdit && (
               <button
-                className="flex items-center gap-1.5 rounded-full bg-black/70 hover:bg-black/80 px-2.5 py-1.5 text-white transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                className="flex items-center gap-1 rounded-full bg-black/70 hover:bg-black/80 px-2 py-1 text-white transition-colors shadow-lg disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
                 onClick={(e) => {
                   e.stopPropagation();
                   if (!isProcessingEnhance && !isProcessingRmbg && !isProcessingExtend && !isProcessingAngleEdit) {
@@ -305,12 +324,12 @@ export function ImagePreview({
                 aria-label="角度调整"
                 title="角度调整"
               >
-                <Move3D size={14} />
-                <span className="text-xs font-medium">角度调整</span>
+                <Move3D size={12} />
+                <span className="text-[10px] font-medium">角度调整</span>
               </button>
             )}
             <button
-              className="flex items-center gap-1.5 rounded-full bg-black/70 hover:bg-black/80 px-2.5 py-1.5 text-white transition-colors shadow-lg"
+              className="flex items-center gap-1 rounded-full bg-black/70 hover:bg-black/80 px-2 py-1 text-white transition-colors shadow-lg whitespace-nowrap"
               onClick={(e) => {
                 e.stopPropagation();
                 setShowResizeEditor(true);
@@ -319,8 +338,8 @@ export function ImagePreview({
               aria-label="尺寸调整"
               title="尺寸调整"
             >
-              <Maximize2 size={14} />
-              <span className="text-xs font-medium">尺寸调整</span>
+              <Maximize2 size={12} />
+              <span className="text-[10px] font-medium">尺寸调整</span>
             </button>
           </div>
         )}
diff --git a/components/messages.tsx b/components/messages.tsx
index 1d165be..471a504 100644
--- a/components/messages.tsx
+++ b/components/messages.tsx
@@ -109,6 +109,11 @@ function PureMessages({
     (m: DynamicModel) => m.id === selectedModelId && m.providerType === "alibaba-image"
   ) ?? false;
   
+  // 🆕 获取当前模型的显示名称
+  const currentModelDisplayName = modelsData?.models?.find(
+    (m: DynamicModel) => m.id === selectedModelId
+  )?.displayName;
+  
   // 判断是否是视频生成模型（通过 providerType 或模型名称）
   const isVideoModel = modelsData?.models?.some(
     (m: DynamicModel) => 
@@ -311,8 +316,8 @@ function PureMessages({
             if (showVideo) return <QianwenVideoLoading />;
             if (showGemini) return <GeminiImageLoading imageCount={imageCount} />;
             if (showVolcano) return <VolcanoVisionLoading imageCount={imageCount} />;
-            // 🆕 阿里生图模型使用通用组件，橙色主题，最多 6 张
-            if (showAlibabaImage) return <ImageGenerationLoading imageCount={imageCount} maxImages={6} providerType="alibaba-image" />;
+            // 🆕 阿里生图模型使用通用组件，橙色主题，最多 6 张，传递自定义模型名称
+            if (showAlibabaImage) return <ImageGenerationLoading imageCount={imageCount} maxImages={6} providerType="alibaba-image" modelName={currentModelDisplayName} />;
             return <ThinkingMessage />;
           })()}