Skip to content

perf: T2I template editor preview #4574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Soulter merged 1 commit into from
Jan 20, 2026
Merged

perf: T2I template editor preview #4574

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 22 additions & 7 deletions dashboard/src/components/shared/T2ITemplateEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,23 +283,36 @@ const editorOptions = {
}
// --- 预览逻辑 ---
const previewData = {
text: '这是一个示例文本，用于预览模板效果。\n\n这里可以包含多行文本，支持换行和各种格式。',
version: 'v4.0.0'
const previewVersion = ref('v4.0.0')
const syncPreviewVersion = async () => {
try {
const res = await axios.get('/api/stat/version')
const rawVersion = res?.data?.data?.version || res?.data?.version
if (rawVersion) {
previewVersion.value = rawVersion.startsWith('v') ? rawVersion : `v${rawVersion}`
}
} catch (error) {
console.warn('Failed to fetch version:', error)
}
}
const previewData = computed(() => ({
text: tm('t2iTemplateEditor.previewText') || '这是一个示例文本，用于预览模板效果。\n\n这里可以包含多行文本，支持换行和各种格式。',
version: previewVersion.value
}))
Comment on lines +299 to +302
Copy link
Contributor

@sourcery-ai sourcery-ai bot Jan 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: 使用 || 会导致有意配置为空字符串的翻译也回退到默认文案。

如果 tm('t2iTemplateEditor.previewText') 返回的是一个有意设置的空字符串，|| 会把它当作 falsy，从而错误地回退到默认的中文文案。为了只在翻译缺失（undefined/null）时回退，建议使用空值合并运算符或显式判断，例如：

const t = tm('t2iTemplateEditor.previewText')
text: t ?? defaultText
// or
text: t !== undefined ? t : defaultText
Suggested change
const previewData = computed(() => ({
text: tm('t2iTemplateEditor.previewText') || '这是一个示例文本，用于预览模板效果。\n\n这里可以包含多行文本，支持换行和各种格式。',
version: previewVersion.value
}))
const previewData = computed(() => {
const t = tm('t2iTemplateEditor.previewText')
return {
text: t ?? '这是一个示例文本，用于预览模板效果。\n\n这里可以包含多行文本，支持换行和各种格式。',
version: previewVersion.value
}
})
Original comment in English

suggestion: Using || means an intentionally empty translated string will fall back to the default text.

If tm('t2iTemplateEditor.previewText') returns an intentionally empty string, || will treat it as falsy and incorrectly fall back to the default Chinese text. To only fall back when the translation is missing (undefined/null), use nullish coalescing or an explicit check, e.g.:

const t = tm('t2iTemplateEditor.previewText')
text: t ?? defaultText
// or
text: t !== undefined ? t : defaultText
Suggested change
const previewData = computed(() => ({
text: tm('t2iTemplateEditor.previewText') || '这是一个示例文本，用于预览模板效果。\n\n这里可以包含多行文本，支持换行和各种格式。',
version: previewVersion.value
}))
const previewData = computed(() => {
const t = tm('t2iTemplateEditor.previewText')
return {
text: t ?? '这是一个示例文本，用于预览模板效果。\n\n这里可以包含多行文本，支持换行和各种格式。',
version: previewVersion.value
}
})

const previewContent = computed(() => {
try {
let content = templateContent.value
content = content.replace(/\{\{\s*text\s*\|\s*safe\s*\}\}/g, previewData.text)
content = content.replace(/\{\{\s*version\s*\}\}/g, previewData.version)
content = content.replace(/\{\{\s*text\s*\|\s*safe\s*\}\}/g, previewData.value.text)
content = content.replace(/\{\{\s*version\s*\}\}/g, previewData.value.version)
return content
} catch (error) {
return `<div style="color: red; padding: 20px;">模板渲染错误: ${error.message}</div>`
}
})
// --- API 调用方法 ---
const loadInitialData = async () => {
loading.value = true
try {
Expand Down Expand Up @@ -396,7 +409,7 @@ const confirmDelete = async () => {
const nameToDelete = selectedTemplate.value
await axios.delete(`/api/t2i/templates/${nameToDelete}`)
deleteDialog.value = false
// 如果删除的是当前活动模板，则将活动模板重置为base
if (activeTemplate.value === nameToDelete) {
await setActiveTemplate('base')
Expand Down Expand Up @@ -475,6 +488,7 @@ const confirmApplyAndClose = async () => {
const refreshPreview = () => {
previewLoading.value = true
syncPreviewVersion()
nextTick(() => {
if (previewFrame.value) {
previewFrame.value.contentWindow.location.reload()
Expand All @@ -491,6 +505,7 @@ const closeDialog = () => {
watch(dialog, (newVal) => {
if (newVal) {
syncPreviewVersion()
loadInitialData()
} else {
// 关闭时重置状态
Expand Down