- {{ customSizeError }}
+
+
尺寸
+
+
+
+ {{ displaySize }}
+
+
+
+
@@ -183,7 +166,7 @@ import { useImageGeneration } from '../../hooks'
import { updateNode, addNode, addEdge, nodes, edges, duplicateNode, removeNode } from '../../stores/canvas'
import NodeHandleMenu from './NodeHandleMenu.vue'
import { useModelStore } from '../../stores/pinia'
-import { getModelSizeOptions, getModelQualityOptions, getModelConfig, DEFAULT_IMAGE_MODEL, DEFAULT_IMAGE_SIZE, DEFAULT_IMAGE_QUALITY } from '../../stores/models'
+import { getModelSizeOptions, getModelQualityOptions, getModelConfig, DEFAULT_IMAGE_MODEL, DEFAULT_IMAGE_SIZE } from '../../stores/models'
import { parseMentions } from '../../hooks/useNodeRef'
// 使用 Pinia store 获取模型选项（根据渠道过滤）
@@ -204,16 +187,10 @@ const isConfigured = computed(() => !!modelStore.currentApiKey)
const { loading, error, images: generatedImages, generate } = useImageGeneration()
// Local state | 本地状态
-const normalizeQualityKey = (quality) => {
- if (quality === 'standard' || quality === 'hd') return 'high'
- return quality || DEFAULT_IMAGE_QUALITY
-}
const showHandleMenu = ref(false)
const localModel = ref(props.data?.model || DEFAULT_IMAGE_MODEL)
const localSize = ref(props.data?.size || DEFAULT_IMAGE_SIZE)
-const localQuality = ref(normalizeQualityKey(props.data?.quality))
-const customSizeInput = ref(localSize.value)
-const customSizeError = ref('')
+const localQuality = ref(props.data?.quality || 'standard')
// Label editing state | Label 编辑状态
const isEditingLabel = ref(false)
@@ -283,7 +260,7 @@ const hasQualityOptions = computed(() => {
// Display quality | 显示画质
const displayQuality = computed(() => {
const option = qualityOptions.value.find(o => o.key === localQuality.value)
- return option?.label || '高 · 最终稿'
+ return option?.label || '标准画质'
})
// Size options based on model and quality | 基于模型和画质的尺寸选项
@@ -297,44 +274,12 @@ const hasSizeOptions = computed(() => {
return config?.sizes && config.sizes.length > 0
})
-const supportsCustomSize = computed(() => {
- const config = getModelConfig(localModel.value)
- return config?.supportsCustomSize !== false
-})
-
// Display size with label | 显示尺寸（带标签）
const displaySize = computed(() => {
const option = sizeOptions.value.find(o => o.key === localSize.value)
- return option?.label || formatSizeLabel(localSize.value)
+ return option?.label || localSize.value
})
-const parseImageSize = (value) => {
- const normalized = String(value || '').trim().toLowerCase().replace('×', 'x')
- const match = normalized.match(/^(\d{3,4})\s*x\s*(\d{3,4})$/)
- if (!match) return null
- return { width: Number(match[1]), height: Number(match[2]), key: `${Number(match[1])}x${Number(match[2])}` }
-}
-
-const formatSizeLabel = (value) => {
- if (value === 'auto') return '自动 · 生成后显示实际像素'
- const parsed = parseImageSize(value)
- return parsed ? `自定义 · ${parsed.width}×${parsed.height}` : value
-}
-
-const validateImageSize = (value) => {
- const parsed = parseImageSize(value)
- if (!parsed) return { ok: false, message: '格式用 1088x1920' }
- const { width, height } = parsed
- const pixels = width * height
- const longEdge = Math.max(width, height)
- const shortEdge = Math.min(width, height)
- if (width % 16 !== 0 || height % 16 !== 0) return { ok: false, message: '宽高需为 16 的倍数' }
- if (longEdge > 3840) return { ok: false, message: '最长边不能超过 3840px' }
- if (longEdge / shortEdge > 3) return { ok: false, message: '比例不能超过 3:1' }
- if (pixels < 655360 || pixels > 8294400) return { ok: false, message: '总像素超出模型范围' }
- return { ok: true, key: parsed.key }
-}
-
// Initialize on mount | 挂载时初始化
onMounted(() => {
// 检查当前模型是否在可用模型列表中
@@ -347,19 +292,6 @@ onMounted(() => {
localModel.value = selected || availableModels[0]?.key || DEFAULT_IMAGE_MODEL
updateNode(props.id, { model: localModel.value })
}
- if (props.data?.quality !== localQuality.value) {
- updateNode(props.id, { quality: localQuality.value })
- }
- const mountedSizeOptions = getModelSizeOptions(localModel.value, localQuality.value)
- if (mountedSizeOptions.length > 0 && !mountedSizeOptions.some(o => o.key === localSize.value)) {
- const defaultSize = currentModelConfig.value?.defaultParams?.size
- || mountedSizeOptions.find(o => o.key === DEFAULT_IMAGE_SIZE)?.key
- || mountedSizeOptions[0].key
- localSize.value = defaultSize
- customSizeInput.value = defaultSize === 'auto' ? '' : defaultSize
- customSizeError.value = ''
- updateNode(props.id, { size: defaultSize })
- }
})
// 解析 textNode 内容中的 @ 引用，转换为简短引用（如 图 1）并收集图片
@@ -561,8 +493,6 @@ const handleModelSelect = (key) => {
}
localSize.value = defaultSize
- customSizeInput.value = defaultSize === 'auto' ? '' : defaultSize
- customSizeError.value = ''
// 更新节点数据
updateNode(props.id, {
@@ -575,14 +505,20 @@ const handleModelSelect = (key) => {
// Handle quality selection | 处理画质选择
const handleQualitySelect = (quality) => {
localQuality.value = quality
- updateNode(props.id, { quality })
+ // Update size to first option of new quality | 更新尺寸为新画质的第一个选项
+ const newSizeOptions = getModelSizeOptions(localModel.value, quality)
+ if (newSizeOptions.length > 0) {
+ const defaultSize = newSizeOptions.find(o => o.key === DEFAULT_IMAGE_SIZE)?.key
+ localSize.value = defaultSize || newSizeOptions[0].key
+ updateNode(props.id, { quality, size: localSize.value })
+ } else {
+ updateNode(props.id, { quality })
+ }
}
// Handle size selection | 处理尺寸选择
const handleSizeSelect = (size) => {
localSize.value = size
- customSizeInput.value = size === 'auto' ? '' : size
- customSizeError.value = ''
updateNode(props.id, { size })
}
@@ -591,19 +527,6 @@ const updateSize = () => {
updateNode(props.id, { size: localSize.value })
}
-const applyCustomSize = () => {
- if (!supportsCustomSize.value) return
- const result = validateImageSize(customSizeInput.value)
- if (!result.ok) {
- customSizeError.value = result.message
- return
- }
- customSizeError.value = ''
- localSize.value = result.key
- customSizeInput.value = result.key
- updateNode(props.id, { size: result.key })
-}
-
// Created image node ID | 创建的图片节点 ID
const createdImageNodeId = ref(null)
@@ -673,16 +596,7 @@ const handleGenerate = async (mode = 'auto') => {
// Replace mode: find any connected image node | 替换模式：查找任意连接的图片节点
imageNodeId = findConnectedOutputImageNode(false)
if (imageNodeId) {
- updateNode(imageNodeId, {
- loading: true,
- url: '',
- error: '',
- model: localModel.value,
- size: localSize.value,
- quality: localQuality.value,
- width: 0,
- height: 0
- })
+ updateNode(imageNodeId, { loading: true, url: '' })
}
} else if (mode === 'new') {
// New mode: always create new node | 新建模式：始终创建新节点
@@ -691,15 +605,7 @@ const handleGenerate = async (mode = 'auto') => {
// Auto mode: check for empty connected node first | 自动模式：先检查空白连接节点
imageNodeId = findConnectedOutputImageNode(true)
if (imageNodeId) {
- updateNode(imageNodeId, {
- loading: true,
- error: '',
- model: localModel.value,
- size: localSize.value,
- quality: localQuality.value,
- width: 0,
- height: 0
- })
+ updateNode(imageNodeId, { loading: true })
}
}
@@ -720,10 +626,7 @@ const handleGenerate = async (mode = 'auto') => {
imageNodeId = addNode('image', { x: nodeX + 400, y: nodeY + yOffset }, {
url: '',
loading: true,
- label: '图像生成结果',
- model: localModel.value,
- size: localSize.value,
- quality: localQuality.value
+ label: '图像生成结果'
})
// Auto-connect imageConfig → image | 自动连接 生图配置 → 图片
@@ -765,11 +668,7 @@ const handleGenerate = async (mode = 'auto') => {
url: result[0].url,
loading: false,
label: '文生图',
- model: result[0].model || localModel.value,
- size: result[0].size || localSize.value,
- quality: result[0].quality || localQuality.value,
- width: result[0].width || 0,
- height: result[0].height || 0,
+ model: localModel.value,
updatedAt: Date.now()
})
@@ -843,25 +742,10 @@ watch(() => props.data?.model, (newModel) => {
// 同步 Size
if (config?.defaultParams?.size) {
localSize.value = config.defaultParams.size
- customSizeInput.value = localSize.value === 'auto' ? '' : localSize.value
}
}
})
-watch(() => props.data?.size, (newSize) => {
- if (newSize && newSize !== localSize.value) {
- localSize.value = newSize
- customSizeInput.value = newSize === 'auto' ? '' : newSize
- }
-})
-
-watch(() => props.data?.quality, (newQuality) => {
- const normalized = normalizeQualityKey(newQuality)
- if (normalized !== localQuality.value) {
- localQuality.value = normalized
- }
-})
-
// 修复 Vue Flow visibility: hidden 问题
watch(() => props.data, () => {
nextTick(() => {
diff --git a/web/canvas-app/src/components/nodes/ImageNode.vue b/web/canvas-app/src/components/nodes/ImageNode.vue
index 6f158de..c1ca598 100644
--- a/web/canvas-app/src/components/nodes/ImageNode.vue
+++ b/web/canvas-app/src/components/nodes/ImageNode.vue
@@ -95,9 +95,9 @@