koishi-plugin-media-luna 0.0.5 → 0.0.7

package/client/components/GenerateView.vue

@@ -24,14 +24,7 @@
 
               <div class="form-item">
                 <div class="label">预设模板</div>
-                <el-select v-model="presetId" placeholder="选择预设模板 (可选)" style="width: 100%" clearable @change="applyPreset">
-                  <el-option
-                    v-for="preset in presets"
-                    :key="preset.id"
-                    :label="preset.name"
-                    :value="preset.id"
-                  />
-                </el-select>
+                <PresetPicker v-model="presetId" :presets="presets" />
               </div>
             </div>
 
@@ -97,9 +90,26 @@
 
         <!-- 右侧预览区 -->
         <div class="preview-panel">
-          <div v-if="result" class="result-container">
-            <div v-if="result.success" class="success-result">
-              <div class="output-grid" v-if="result.output && result.output.length">
+          <!-- 生成中状态 -->
+          <div v-if="generating" class="generating-state">
+            <div class="generating-content">
+              <div class="loader"></div>
+              <div class="generating-info">
+                <p class="generating-title">正在生成中...</p>
+                <p class="generating-timer">
+                  <k-icon name="stopwatch"></k-icon>
+                  已用时间: {{ formatElapsedTime(elapsedTime) }}
+                </p>
+                <p class="generating-hint" v-if="currentTaskId">任务 ID: {{ currentTaskId }}</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 有结果 -->
+          <div v-else-if="result" class="result-container">
+            <!-- 成功状态 -->
+            <div v-if="result.success && result.output && result.output.length" class="success-result">
+              <div class="output-grid">
                 <div v-for="(asset, idx) in result.output" :key="idx" class="output-wrapper">
                   <!-- 图片 -->
                   <template v-if="asset.kind === 'image'">
@@ -136,25 +146,37 @@
                 </div>
               </div>
               <div class="result-meta">
+                <span class="meta-item success-badge">
+                  <k-icon name="check-circle"></k-icon> 生成成功
+                </span>
                 <span class="meta-item" v-if="result.duration">
-                  <k-icon name="stopwatch"></k-icon> 耗时: {{ (result.duration / 1000).toFixed(2) }}s
+                  <k-icon name="stopwatch"></k-icon> 耗时: {{ formatElapsedTime(result.duration) }}
                 </span>
                 <span class="meta-item" v-if="result.taskId">
                   <k-icon name="list-alt"></k-icon> 任务 ID: {{ result.taskId }}
                 </span>
               </div>
             </div>
+
+            <!-- 失败状态 -->
             <div v-else class="error-result">
-              <k-icon name="warning" class="error-icon"></k-icon>
-              <div class="error-msg">{{ result.error || '生成失败' }}</div>
+              <div class="error-content">
+                <k-icon name="exclamation-triangle" class="error-icon"></k-icon>
+                <div class="error-info">
+                  <p class="error-title">生成失败</p>
+                  <p class="error-msg">{{ result.error || '未知错误' }}</p>
+                  <p class="error-meta" v-if="result.taskId">任务 ID: {{ result.taskId }}</p>
+                  <p class="error-meta" v-if="result.duration">耗时: {{ formatElapsedTime(result.duration) }}</p>
+                </div>
+              </div>
+              <k-button class="retry-btn" @click="generate">
+                <template #icon><k-icon name="refresh"></k-icon></template>
+                重新生成
+              </k-button>
             </div>
           </div>
 
-          <div v-else-if="generating" class="generating-state">
-            <div class="loader"></div>
-            <p>正在生成中，请稍候...</p>
-          </div>
-
+          <!-- 空状态 -->
           <div v-else class="empty-state">
             <k-icon name="image" class="empty-icon"></k-icon>
             <p>在左侧配置并点击生成</p>
@@ -178,12 +200,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { message } from '@koishijs/client'
 import { ChannelConfig, PresetData, GenerationResult, ClientFileData } from '../types'
 import { channelApi, presetApi, generateApi, taskApi } from '../api'
 import HistoryGallery from './HistoryGallery.vue'
 import ImageLightbox from './ImageLightbox.vue'
+import PresetPicker from './PresetPicker.vue'
 
 /** 本地文件项 */
 interface LocalFile {
@@ -202,6 +225,12 @@ const fileInput = ref<HTMLInputElement>()
 const historyGalleryRef = ref<InstanceType<typeof HistoryGallery>>()
 let fileUid = 0
 
+// 计时器相关
+const elapsedTime = ref(0)
+const currentTaskId = ref<number | null>(null)
+let timerInterval: ReturnType<typeof setInterval> | null = null
+let startTime = 0
+
 const form = ref({
   channel: undefined as number | undefined,
   prompt: '',
@@ -216,6 +245,33 @@ const lightboxImages = ref<string[]>([])
 const lightboxIndex = ref(0)
 const lightboxPrompt = ref('')  // 存储最终提示词
 
+// 格式化耗时
+const formatElapsedTime = (ms: number) => {
+  if (ms < 1000) return `${ms}ms`
+  const seconds = ms / 1000
+  if (seconds < 60) return `${seconds.toFixed(1)}s`
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = (seconds % 60).toFixed(0)
+  return `${minutes}m ${remainingSeconds}s`
+}
+
+// 开始计时
+const startTimer = () => {
+  startTime = Date.now()
+  elapsedTime.value = 0
+  timerInterval = setInterval(() => {
+    elapsedTime.value = Date.now() - startTime
+  }, 100)
+}
+
+// 停止计时
+const stopTimer = () => {
+  if (timerInterval) {
+    clearInterval(timerInterval)
+    timerInterval = null
+  }
+}
+
 // 打开图片预览
 const openImagePreview = (index: number) => {
   if (result.value?.output) {
@@ -241,12 +297,6 @@ const fetchData = async () => {
   }
 }
 
-const applyPreset = () => {
-  // Logic to pre-fill prompt or params based on preset could go here
-  // But mostly the backend handles preset logic via ID or name
-  // The API 'media-luna/generate' accepts parameters.preset name
-}
-
 // 文件转 base64
 const fileToBase64 = (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {
@@ -324,6 +374,38 @@ const removeFile = (index: number) => {
   }
 }
 
+// 尝试通过 taskId 获取结果
+const fetchTaskResult = async (taskId: number): Promise<GenerationResult | null> => {
+  try {
+    const task = await taskApi.get(taskId)
+
+    // 获取最终提示词
+    lightboxPrompt.value = (task.middlewareLogs as any)?.preset?.transformedPrompt
+      || task.requestSnapshot?.prompt
+      || ''
+
+    if (task.status === 'success' && task.responseSnapshot && task.responseSnapshot.length > 0) {
+      return {
+        success: true,
+        output: task.responseSnapshot,
+        taskId: task.id,
+        duration: task.duration || undefined
+      }
+    } else if (task.status === 'failed') {
+      const errorInfo = (task.middlewareLogs as any)?._error
+      return {
+        success: false,
+        error: errorInfo?.message || '生成失败',
+        taskId: task.id,
+        duration: task.duration || undefined
+      }
+    }
+    return null
+  } catch {
+    return null
+  }
+}
+
 const generate = async () => {
   if (!form.value.channel) {
     message.warning('请选择渠道')
@@ -332,6 +414,8 @@ const generate = async () => {
 
   generating.value = true
   result.value = null
+  currentTaskId.value = null
+  startTimer()
 
   try {
     const params: any = {
@@ -353,30 +437,64 @@ const generate = async () => {
     }
 
     const res = await generateApi.generate(params)
-    result.value = res
 
-    // 生成成功后刷新历史画廊，并获取最终提示词
+    // 更新 taskId
+    if (res.taskId) {
+      currentTaskId.value = res.taskId
+    }
+
+    // 如果成功，直接使用结果
     if (res.success) {
+      result.value = res
       historyGalleryRef.value?.refresh()
-      // 获取任务详情以获得最终提示词
+
+      // 获取最终提示词
       if (res.taskId) {
         try {
           const task = await taskApi.get(res.taskId)
-          // 优先使用预设中间件处理后的最终提示词
           lightboxPrompt.value = (task.middlewareLogs as any)?.preset?.transformedPrompt
             || task.requestSnapshot?.prompt
             || ''
         } catch {
-          // 如果获取失败，使用输入的提示词
           lightboxPrompt.value = form.value.prompt
         }
       } else {
         lightboxPrompt.value = form.value.prompt
       }
+    } else {
+      // API 返回失败，但可能任务实际成功了，尝试通过 taskId 获取
+      if (res.taskId) {
+        // 等待一小段时间让后端完成处理
+        await new Promise(resolve => setTimeout(resolve, 500))
+        const taskResult = await fetchTaskResult(res.taskId)
+        if (taskResult && taskResult.success) {
+          result.value = taskResult
+          historyGalleryRef.value?.refresh()
+        } else {
+          result.value = res
+        }
+      } else {
+        result.value = res
+      }
+    }
+  } catch (e: any) {
+    // 请求异常，尝试通过 taskId 恢复
+    if (currentTaskId.value) {
+      await new Promise(resolve => setTimeout(resolve, 500))
+      const taskResult = await fetchTaskResult(currentTaskId.value)
+      if (taskResult) {
+        result.value = taskResult
+        if (taskResult.success) {
+          historyGalleryRef.value?.refresh()
+        }
+      } else {
+        result.value = { success: false, error: e.message || '请求失败' }
+      }
+    } else {
+      result.value = { success: false, error: e.message || '请求失败' }
     }
-  } catch (e) {
-    result.value = { success: false, error: '请求失败' }
   } finally {
+    stopTimer()
     generating.value = false
   }
 }
@@ -391,6 +509,10 @@ const handleHistorySelect = (task: { prompt: string }) => {
 onMounted(() => {
   fetchData()
 })
+
+onUnmounted(() => {
+  stopTimer()
+})
 </script>
 
 <style scoped>
@@ -417,7 +539,7 @@ onMounted(() => {
 }
 
 .config-panel {
-  width: 380px;
+  width: 320px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -425,7 +547,7 @@ onMounted(() => {
 }
 
 .config-card {
-  padding: 1.5rem;
+  padding: 1.25rem;
   flex: 1 1 0;
   min-height: 0;
   overflow-y: auto;
@@ -464,7 +586,11 @@ onMounted(() => {
 }
 
 .form-section {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+
+.form-section:last-of-type {
+  margin-bottom: 0;
 }
 
 .form-section.flex-grow {
@@ -483,12 +609,12 @@ onMounted(() => {
 
 .section-title {
   font-weight: 600;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
   color: var(--k-color-text);
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .section-title .k-icon {
@@ -496,23 +622,29 @@ onMounted(() => {
 }
 
 .form-item {
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.form-item:last-child {
+  margin-bottom: 0;
 }
 
 .label {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: var(--k-color-text-description);
-  margin-bottom: 0.35rem;
+  margin-bottom: 0.25rem;
 }
 
 .form-actions {
-  margin-top: 1.5rem;
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--k-color-border);
 }
 
 .generate-btn {
   width: 100%;
-  height: 44px;
-  font-size: 1rem;
+  height: 40px;
+  font-size: 0.95rem;
   font-weight: 600;
   transition: all 0.2s;
   background: linear-gradient(135deg, var(--k-color-primary) 0%, var(--k-color-primary-dark, var(--k-color-primary)) 100%);
@@ -568,7 +700,7 @@ onMounted(() => {
 }
 
 /* States */
-.empty-state, .generating-state {
+.empty-state {
   text-align: center;
   color: var(--k-color-text-description);
   display: flex;
@@ -585,14 +717,34 @@ onMounted(() => {
   color: var(--k-color-text);
 }
 
+/* 生成中状态 - 增强样式 */
+.generating-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.generating-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 2rem;
+  background: linear-gradient(135deg, rgba(var(--k-color-primary-rgb), 0.05) 0%, rgba(var(--k-color-primary-rgb), 0.02) 100%);
+  border-radius: 16px;
+  border: 1px solid rgba(var(--k-color-primary-rgb), 0.1);
+}
+
 .loader {
   border: 4px solid var(--k-color-bg-2);
   border-top: 4px solid var(--k-color-active);
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
   animation: spin 1s linear infinite;
-  margin: 0 auto 1rem;
 }
 
 @keyframes spin {
@@ -600,6 +752,35 @@ onMounted(() => {
   100% { transform: rotate(360deg); }
 }
 
+.generating-info {
+  text-align: center;
+}
+
+.generating-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--k-color-text);
+  margin: 0 0 0.75rem 0;
+}
+
+.generating-timer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--k-color-active);
+  margin: 0 0 0.5rem 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.generating-hint {
+  font-size: 0.85rem;
+  color: var(--k-color-text-description);
+  margin: 0;
+}
+
 /* Result */
 .result-container {
   width: 100%;
@@ -682,6 +863,7 @@ onMounted(() => {
   margin-top: 1.5rem;
   display: flex;
   gap: 1.5rem;
+  flex-wrap: wrap;
   color: var(--k-color-text-description);
   font-size: 0.9rem;
   border-top: 1px solid var(--k-color-border);
@@ -694,19 +876,68 @@ onMounted(() => {
   gap: 0.5rem;
 }
 
+.success-badge {
+  color: var(--k-color-success, #67c23a);
+  font-weight: 600;
+}
+
+/* 错误状态 - 增强样式 */
 .error-result {
-  text-align: center;
-  color: var(--k-color-error);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 1.5rem;
+}
+
+.error-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem;
+  background: linear-gradient(135deg, rgba(245, 108, 108, 0.08) 0%, rgba(245, 108, 108, 0.02) 100%);
+  border-radius: 16px;
+  border: 1px solid rgba(245, 108, 108, 0.2);
 }
 
 .error-icon {
   font-size: 3rem;
-  margin-bottom: 1rem;
+  color: var(--k-color-error, #f56c6c);
+}
+
+.error-info {
+  text-align: center;
+}
+
+.error-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--k-color-error, #f56c6c);
+  margin: 0 0 0.5rem 0;
+}
+
+.error-msg {
+  color: var(--k-color-text);
+  margin: 0 0 0.5rem 0;
+  max-width: 400px;
+  word-break: break-word;
+}
+
+.error-meta {
+  font-size: 0.85rem;
+  color: var(--k-color-text-description);
+  margin: 0;
+}
+
+.retry-btn {
+  margin-top: 0.5rem;
 }
 
 /* Upload Area */
 .upload-area {
-  margin-top: 0.5rem;
+  margin-top: 0.25rem;
 }
 
 .upload-list {
@@ -718,9 +949,9 @@ onMounted(() => {
 
 .upload-item {
   position: relative;
-  width: 64px;
-  height: 64px;
-  border-radius: 8px;
+  width: 56px;
+  height: 56px;
+  border-radius: 6px;
   overflow: hidden;
   border: 1px solid var(--k-color-border);
   background-color: var(--k-color-bg-2);
@@ -750,10 +981,10 @@ onMounted(() => {
 }
 
 .upload-trigger {
-  width: 64px;
-  height: 64px;
+  width: 56px;
+  height: 56px;
   border: 2px dashed var(--k-color-border);
-  border-radius: 8px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -778,9 +1009,10 @@ onMounted(() => {
 }
 
 .upload-tip {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: var(--k-color-text-description);
-  margin-top: 0.5rem;
+  margin-top: 0.35rem;
+  opacity: 0.8;
 }
 
 /* Text output */
@@ -810,4 +1042,4 @@ onMounted(() => {
 .file-link:hover {
   background-color: var(--k-color-bg-3);
 }
-</style>
+</style>