koishi-plugin-media-luna 0.0.4 → 0.0.6

package/client/components/GenerateView.vue

@@ -97,9 +97,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 +153,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,7 +207,7 @@
 </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'
@@ -202,6 +231,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 +251,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) {
@@ -324,6 +386,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 +426,8 @@ const generate = async () => {
 
   generating.value = true
   result.value = null
+  currentTaskId.value = null
+  startTimer()
 
   try {
     const params: any = {
@@ -353,30 +449,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 +521,10 @@ const handleHistorySelect = (task: { prompt: string }) => {
 onMounted(() => {
   fetchData()
 })
+
+onUnmounted(() => {
+  stopTimer()
+})
 </script>
 
 <style scoped>
@@ -406,11 +540,12 @@ onMounted(() => {
   flex: 1 1 0;
   min-height: 0;
   overflow: hidden;
+  padding: 0.5rem;
 }
 
 .generate-layout {
   display: flex;
-  gap: 20px;
+  gap: 1rem;
   height: 100%;
   min-height: 0;
 }
@@ -420,26 +555,33 @@ onMounted(() => {
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
 .config-card {
   padding: 1.5rem;
-  height: 100%;
+  flex: 1 1 0;
+  min-height: 0;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   border-radius: 12px;
   background-color: var(--k-card-bg);
-  border: 1px solid transparent;
+  border: 1px solid var(--k-color-border);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: border-color 0.2s, box-shadow 0.2s;
+  /* 隐藏式滚动条 */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
 }
 
 .config-card:hover {
+  border-color: var(--k-color-active);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  scrollbar-color: var(--k-color-border) transparent;
 }
 
-/* Scrollbar styling for config card */
+/* Webkit 隐藏式滚动条 */
 .config-card::-webkit-scrollbar {
   width: 6px;
 }
@@ -447,8 +589,12 @@ onMounted(() => {
   background: transparent;
 }
 .config-card::-webkit-scrollbar-thumb {
-  background-color: var(--k-color-border);
+  background-color: transparent;
   border-radius: 3px;
+  transition: background-color 0.2s;
+}
+.config-card:hover::-webkit-scrollbar-thumb {
+  background-color: var(--k-color-border);
 }
 
 .form-section {
@@ -514,10 +660,12 @@ onMounted(() => {
 }
 
 .preview-panel {
-  flex-grow: 1;
-  background-color: var(--k-color-bg-2);
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  background-color: var(--k-card-bg);
   border-radius: 12px;
-  border: 1px dashed var(--k-color-border);
+  border: 1px solid var(--k-color-border);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -525,15 +673,36 @@ onMounted(() => {
   padding: 2rem;
   position: relative;
   overflow-y: auto;
-  transition: background-color 0.3s;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  /* 隐藏式滚动条 */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
 }
 
 .preview-panel:hover {
-  background-color: var(--k-color-bg-1);
+  border-color: var(--k-color-active);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  scrollbar-color: var(--k-color-border) transparent;
+}
+
+/* Webkit 隐藏式滚动条 */
+.preview-panel::-webkit-scrollbar {
+  width: 6px;
+}
+.preview-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+.preview-panel::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 3px;
+  transition: background-color 0.2s;
+}
+.preview-panel:hover::-webkit-scrollbar-thumb {
+  background-color: var(--k-color-border);
 }
 
 /* States */
-.empty-state, .generating-state {
+.empty-state {
   text-align: center;
   color: var(--k-color-text-description);
   display: flex;
@@ -550,14 +719,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 {
@@ -565,6 +754,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%;
@@ -647,6 +865,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);
@@ -659,14 +878,63 @@ 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 */
@@ -775,4 +1043,4 @@ onMounted(() => {
 .file-link:hover {
   background-color: var(--k-color-bg-3);
 }
-</style>
+</style>

package/client/components/HistoryGallery.vue

@@ -292,15 +292,20 @@ onUnmounted(() => {
 <style scoped>
 .history-gallery {
   width: 240px;
-  max-height: 100%;
   flex-shrink: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   background-color: var(--k-card-bg);
   border-radius: 12px;
   border: 1px solid var(--k-color-border);
   overflow: hidden;
-  transition: width 0.3s ease;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.history-gallery:not(.collapsed):hover {
+  border-color: var(--k-color-active);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
 }
 
 .history-gallery.collapsed {
@@ -401,13 +406,20 @@ onUnmounted(() => {
 
 /* 任务列表 */
 .gallery-list {
-  flex: 1 1 auto;
-  max-height: calc(100vh - 200px);
+  flex: 1 1 0;
+  min-height: 0;
   overflow-y: auto;
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  /* 隐藏式滚动条 */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.gallery-list:hover {
+  scrollbar-color: var(--k-color-border) transparent;
 }
 
 .gallery-list::-webkit-scrollbar {
@@ -419,8 +431,13 @@ onUnmounted(() => {
 }
 
 .gallery-list::-webkit-scrollbar-thumb {
-  background-color: var(--k-color-border);
+  background-color: transparent;
   border-radius: 2px;
+  transition: background-color 0.2s;
+}
+
+.gallery-list:hover::-webkit-scrollbar-thumb {
+  background-color: var(--k-color-border);
 }
 
 /* 任务卡片 */
@@ -431,6 +448,7 @@ onUnmounted(() => {
   overflow: hidden;
   transition: all 0.2s;
   position: relative;
+  border: 1px solid var(--k-color-border);
 }
 
 .task-card.clickable {
@@ -440,6 +458,19 @@ onUnmounted(() => {
 .task-card.clickable:hover {
   background-color: var(--k-color-bg-1);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--k-color-active);
+}
+
+/* 处理中状态的卡片 */
+.task-card:has(.task-processing) {
+  border-color: var(--k-color-warning, #e6a23c);
+  background-color: rgba(230, 162, 60, 0.05);
+}
+
+/* 失败状态的卡片 */
+.task-card:has(.task-failed) {
+  border-color: var(--k-color-error, #f56c6c);
+  background-color: rgba(245, 108, 108, 0.05);
 }
 
 /* 图片区域 - 单张图片，完整显示不裁剪 */
@@ -473,6 +504,7 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
+  background: linear-gradient(135deg, rgba(230, 162, 60, 0.08) 0%, rgba(230, 162, 60, 0.02) 100%);
 }
 
 .processing-animation {
@@ -481,9 +513,9 @@ onUnmounted(() => {
 }
 
 .processing-animation .dot {
-  width: 6px;
-  height: 6px;
-  background-color: var(--k-color-active);
+  width: 8px;
+  height: 8px;
+  background-color: var(--k-color-warning, #e6a23c);
   border-radius: 50%;
   animation: bounce 1.4s ease-in-out infinite both;
 }
@@ -498,7 +530,8 @@ onUnmounted(() => {
 
 .processing-text {
   font-size: 0.75rem;
-  color: var(--k-color-text-description);
+  color: var(--k-color-warning, #e6a23c);
+  font-weight: 500;
 }
 
 /* 失败状态 */
@@ -508,16 +541,18 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
-  color: var(--k-color-error);
+  color: var(--k-color-error, #f56c6c);
+  background: linear-gradient(135deg, rgba(245, 108, 108, 0.08) 0%, rgba(245, 108, 108, 0.02) 100%);
 }
 
 .failed-icon {
-  font-size: 1.25rem;
-  opacity: 0.7;
+  font-size: 1.5rem;
+  opacity: 0.8;
 }
 
 .task-failed span {
   font-size: 0.75rem;
+  font-weight: 500;
 }
 
 /* 任务信息 */