auto-save 2026-05-27 18:13 (~3)

web/canvas-app/src/components/nodes/ImageConfigNode.vue

@@ -41,7 +41,7 @@
         <!-- Model selector | 模型选择 -->
         <div class="flex items-center justify-between">
           <span class="text-xs text-[var(--text-secondary)]">模型</span>
-          <n-dropdown :options="modelOptions" @select="handleModelSelect">
+          <n-dropdown trigger="click" :options="modelOptions" @select="handleModelSelect">
             <button class="flex items-center gap-1 text-sm text-[var(--text-primary)] hover:text-[var(--accent-color)]">
               {{ displayModelName }}
               <n-icon :size="12"><ChevronDownOutline /></n-icon>
@@ -52,7 +52,7 @@
         <!-- Quality selector | 画质选择 -->
         <div v-if="hasQualityOptions" class="flex items-center justify-between">
           <span class="text-xs text-[var(--text-secondary)]">画质</span>
-          <n-dropdown :options="qualityOptions" @select="handleQualitySelect">
+          <n-dropdown trigger="click" :options="qualityOptions" @select="handleQualitySelect">
             <button class="flex items-center gap-1 text-sm text-[var(--text-primary)] hover:text-[var(--accent-color)]">
               {{ displayQuality }}
               <n-icon :size="12"><ChevronForwardOutline /></n-icon>
@@ -64,7 +64,7 @@
         <div v-if="hasSizeOptions" class="flex items-center justify-between">
           <span class="text-xs text-[var(--text-secondary)]">尺寸</span>
           <div class="flex items-center gap-2">
-            <n-dropdown :options="sizeOptions" @select="handleSizeSelect">
+            <n-dropdown trigger="click" :options="sizeOptions" @select="handleSizeSelect">
               <button
                 class="flex items-center gap-1 text-sm text-[var(--text-primary)] hover:text-[var(--accent-color)]">
                 {{ displaySize }}
@@ -97,7 +97,7 @@
         <!-- Generate button | 生成按钮 -->
         <div v-if="hasConnectedImageWithContent" class="flex gap-2">
           <!-- Create new (primary) | 新建节点（主按钮） -->
-          <button @click="handleGenerate('new')" :disabled="loading || !isConfigured"
+          <button @click="handleGenerate('new')" :disabled="loading || !canGenerate"
             class="flex-1 flex items-center justify-center gap-1.5 py-2 px-3 rounded-lg bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
             <n-spin v-if="loading" :size="14" />
             <template v-else>
@@ -106,7 +106,7 @@
             </template>
           </button>
           <!-- Replace existing (secondary) | 替换现有（次按钮） -->
-          <button @click="handleGenerate('replace')" :disabled="loading || !isConfigured"
+          <button @click="handleGenerate('replace')" :disabled="loading || !canGenerate"
             class="flex-shrink-0 flex items-center justify-center gap-1 py-2 px-2.5 rounded-lg border border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-color)] hover:text-[var(--accent-color)] text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
             <n-spin v-if="loading" :size="14" />
             <template v-else>
@@ -115,7 +115,7 @@
             </template>
           </button>
         </div>
-        <button v-else @click="handleGenerate('auto')" :disabled="loading || !isConfigured"
+        <button v-else @click="handleGenerate('auto')" :disabled="loading || !canGenerate"
           class="w-full flex items-center justify-center gap-2 py-2 px-4 rounded-lg bg-[var(--accent-color)] hover:bg-[var(--accent-hover)] text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
           <n-spin v-if="loading" :size="14" />
           <template v-else>
@@ -124,6 +124,9 @@
             立即生成
           </template>
         </button>
+        <div v-if="!canGenerate" class="text-xs text-amber-500 mt-2">
+          当前环境未配置该图片模型 API，只能预览和选择模型参数。
+        </div>
 
         <!-- Error message | 错误信息 -->
         <div v-if="error" class="text-xs text-red-500 mt-2">
@@ -182,6 +185,10 @@ const { updateNodeInternals } = useVueFlow()
 
 // API config state | API 配置状态
 const isConfigured = computed(() => !!modelStore.currentApiKey)
+const hasAvailableImageRuntime = computed(() => {
+  const runtimeModels = modelStore.runtimeImageModels || []
+  return runtimeModels.length === 0 || runtimeModels.some(model => model.available !== false)
+})
 
 // Image generation hook | 图片生成 hook
 const { loading, error, images: generatedImages, generate } = useImageGeneration()
@@ -232,6 +239,11 @@ const handleSelect = (item) => {
 
 // Get current model config | 获取当前模型配置
 const currentModelConfig = computed(() => getModelConfig(localModel.value))
+const canGenerate = computed(() => (
+  isConfigured.value &&
+  hasAvailableImageRuntime.value &&
+  currentModelConfig.value?.available !== false
+))
 
 // Model options from Pinia store (filtered by provider) | 从 Pinia store 获取模型选项（根据渠道过滤）
 const modelOptions = computed(() => modelStore.allImageModelOptions)

web/canvas-app/src/stores/pinia/models.js

@@ -324,7 +324,7 @@ export const useModelStore = defineStore('model', () => {
     allImageModels.value.map(m => ({
       label: m.label,
       key: m.key,
-      disabled: m.available === false
+      disabled: false
     }))
   )