feat: 图片广场优化

Yi.Ai.Vue3/src/pages/chat/image/components/ImageGenerator.vue

@@ -3,6 +3,7 @@ import type { UploadFile, UploadUserFile } from 'element-plus';
 import type { ImageModel, TaskStatusResponse } from '@/api/aiImage/types';
 import {
   CircleCloseFilled,
+  CopyDocument,
   Delete,
   Download,
   MagicStick,
@@ -11,6 +12,7 @@ import {
   Refresh,
   ZoomIn,
 } from '@element-plus/icons-vue';
+import { useClipboard } from '@vueuse/core';
 import { ElMessage } from 'element-plus';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { getSelectableTokenInfo } from '@/api';
@@ -25,6 +27,8 @@ const props = defineProps({
 
 const emit = defineEmits(['task-created']);
 
+const { copy } = useClipboard();
+
 // State
 const tokenOptions = ref<any[]>([]);
 const selectedTokenId = ref('');
@@ -292,6 +296,11 @@ async function downloadImage() {
   }
 }
 
+async function copyError(text: string) {
+  await copy(text);
+  ElMessage.success('错误信息已复制');
+}
+
 // Exposed methods for external control
 function setPrompt(text: string) {
   prompt.value = text;
@@ -351,7 +360,7 @@ onUnmounted(() => {
           配置
         </h2>
 
-        <el-form label-position="top" class="space-y-2" label-width="auto">
+        <el-form label-position="top" class="space-y-2">
           <!-- Token -->
           <el-form-item label="API密钥 (可选)">
             <el-select
@@ -385,18 +394,18 @@ onUnmounted(() => {
                 :label="model.modelName"
                 :value="model.modelId"
               >
-                <div class="flex flex-col py-1">
-                  <span class="font-medium">{{ model.modelName }}</span>
-                  <span class="text-xs text-gray-400 truncate">{{ model.modelDescribe }}</span>
+                <div class="flex flex-col py-1 max-w-[350px]">
+                  <span class="font-medium truncate">{{ model.modelName }}</span>
+                  <span class="text-xs text-gray-400 truncate" :title="model.modelDescribe">{{ model.modelDescribe }}</span>
                 </div>
               </el-option>
             </el-select>
           </el-form-item>
 
           <!-- Prompt -->
-          <el-form-item label="提示词" required class="prompt-form-item ">
+          <el-form-item label="提示词" required>
             <template #label>
-              <div class="flex justify-between items-center w-full ">
+              <div class="flex justify-between items-center w-full">
                 <span>提示词</span>
                 <el-button link type="primary" size="small" @click="clearPrompt">
                   <el-icon class="mr-1">
@@ -408,7 +417,7 @@ onUnmounted(() => {
             <el-input
               v-model="prompt"
               type="textarea"
-              :autosize="{ minRows: 8, maxRows: 8 }"
+              :autosize="{ minRows: 8, maxRows: 15 }"
               placeholder="描述你想要生成的画面，例如：一只在太空中飞行的赛博朋克风格的猫..."
               maxlength="2000"
               show-word-limit
@@ -486,6 +495,8 @@ onUnmounted(() => {
 
             <el-image-viewer
               v-if="showViewer"
+
+              fit="contain"
               :url-list="[currentTask.storeUrl]"
               @close="showViewer = false"
             />
@@ -503,17 +514,27 @@ onUnmounted(() => {
           </div>
 
           <!-- Fail State -->
-          <div v-else-if="currentTask.taskStatus === 'Fail'" class="text-center text-red-500">
+          <div v-else-if="currentTask.taskStatus === 'Fail'" class="text-center text-red-500 w-full max-w-lg">
             <el-icon class="text-6xl mb-4">
               <CircleCloseFilled />
             </el-icon>
-            <p class="text-lg font-medium">
+            <p class="text-lg font-medium mb-2">
               生成失败
             </p>
-            <p class="text-sm opacity-80 mt-1">
-              {{ currentTask.errorInfo || '请检查提示词或稍后重试' }}
-            </p>
-            <el-button class="mt-4" icon="Refresh" @click="handleGenerate">
+            <div class="bg-red-50 p-4 rounded-lg border border-red-100 text-sm text-left relative group/error">
+              <div class="max-h-32 overflow-y-auto custom-scrollbar break-words pr-6">
+                {{ currentTask.errorInfo || '请检查提示词或稍后重试' }}
+              </div>
+              <el-button
+                class="absolute top-2 right-2 opacity-0 group-hover/error:opacity-100 transition-opacity"
+                size="small"
+                circle
+                :icon="CopyDocument"
+                title="复制错误信息"
+                @click="copyError(currentTask.errorInfo || '')"
+              />
+            </div>
+            <el-button class="mt-6" icon="Refresh" @click="handleGenerate">
               重试
             </el-button>
           </div>
@@ -594,8 +615,4 @@ onUnmounted(() => {
 :deep(.hide-upload-btn .el-upload--picture-card) {
   display: none;
 }
-/* 隐藏默认的标签 */
-:deep(.prompt-form-item .el-form-item__label){
-  display: flex;
-}
 </style>