fix: 统一图片预览按钮样式，防止文字换行

- 添加 whitespace-nowrap 防止按钮文字换行
- 减小按钮尺寸：图标 14px->12px，文字 text-xs->text-[10px]
- 减小按钮间距和内边距，适应不同宽度的图片
- 添加 flex-wrap 允许按钮换行到下一行

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>
         )}

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 />;
           })()}