更新国际化支持:为工作流任务卡片添加多语言文本,提升用户体验

This commit is contained in:
jxxghp
2025-04-28 20:07:41 +08:00
parent 995e07c351
commit 8854affc4c
4 changed files with 110 additions and 34 deletions

View File

@@ -5,6 +5,9 @@ import { useConfirm } from 'vuetify-use-dialog'
import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
import WorkflowActionsDialog from '@/components/dialog/WorkflowActionsDialog.vue'
import api from '@/api'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// 定义输入参数
const props = defineProps({
@@ -52,8 +55,8 @@ function editDone() {
// 删除任务
async function handleDelete(item: Workflow) {
const isConfirmed = await createConfirm({
title: '确认',
content: `是否确认删除任务 ${item.name} ?`,
title: t('common.confirm'),
content: t('workflow.task.confirmDelete', { name: item.name }),
})
if (!isConfirmed) return
@@ -61,10 +64,10 @@ async function handleDelete(item: Workflow) {
try {
const result: { [key: string]: string } = await api.delete(`workflow/${item.id}`)
if (result.success) {
$toast.success('删除任务成功!')
$toast.success(t('workflow.task.deleteSuccess'))
emit('refresh')
} else {
$toast.error(`删除任务失败:${result.message}`)
$toast.error(t('workflow.task.deleteFailed', { message: result.message }))
}
} catch (error) {
console.error(error)
@@ -77,10 +80,10 @@ async function handleEnable(item: Workflow) {
try {
const result: { [key: string]: string } = await api.post(`workflow/${item.id}/start`)
if (result.success) {
$toast.success('启用任务成功!')
$toast.success(t('workflow.task.enableSuccess'))
emit('refresh')
} else {
$toast.error(`启用任务失败:${result.message}`)
$toast.error(t('workflow.task.enableFailed', { message: result.message }))
}
} catch (error) {
console.error(error)
@@ -94,10 +97,10 @@ async function handlePause(item: Workflow) {
try {
const result: { [key: string]: string } = await api.post(`workflow/${item.id}/pause`)
if (result.success) {
$toast.success('停用任务成功!')
$toast.success(t('workflow.task.pauseSuccess'))
emit('refresh')
} else {
$toast.error(`停用任务失败:${result.message}`)
$toast.error(t('workflow.task.pauseFailed', { message: result.message }))
}
} catch (error) {
console.error(error)
@@ -116,10 +119,10 @@ async function handleRun(item: Workflow, from_begin: boolean) {
from_begin,
})
if (result.success) {
$toast.success('任务执行完成!')
$toast.success(t('workflow.task.runSuccess'))
emit('refresh')
} else {
$toast.error(`任务执行失败:${result.message}`)
$toast.error(t('workflow.task.runFailed', { message: result.message }))
emit('refresh')
}
} catch (error) {
@@ -131,8 +134,8 @@ async function handleRun(item: Workflow, from_begin: boolean) {
// 重置任务
async function handleReset(item: Workflow) {
const isConfirmed = await createConfirm({
title: '确认',
content: `是否确认重置任务 ${item.name} ?`,
title: t('common.confirm'),
content: t('workflow.task.confirmReset', { name: item.name }),
})
if (!isConfirmed) return
@@ -140,10 +143,10 @@ async function handleReset(item: Workflow) {
try {
const result: { [key: string]: string } = await api.post(`workflow/${item.id}/reset`)
if (result.success) {
$toast.success('重置任务成功!')
$toast.success(t('workflow.task.resetSuccess'))
emit('refresh')
} else {
$toast.error(`重置任务失败:${result.message}`)
$toast.error(t('workflow.task.resetFailed', { message: result.message }))
}
} catch (error) {
console.error(error)
@@ -152,11 +155,11 @@ async function handleReset(item: Workflow) {
// 计算状态颜色
const resolveStatusVariant = (status: string | undefined) => {
if (status === 'S') return { color: 'success', text: '成功' }
else if (status === 'R') return { color: 'primary', text: '运行中' }
else if (status === 'F') return { color: 'error', text: '失败' }
else if (status === 'P') return { color: 'secondary', text: '暂停' }
else return { color: 'info', text: '等待' }
if (status === 'S') return { color: 'success', text: t('workflow.task.status.success') }
else if (status === 'R') return { color: 'primary', text: t('workflow.task.status.running') }
else if (status === 'F') return { color: 'error', text: t('workflow.task.status.failed') }
else if (status === 'P') return { color: 'secondary', text: t('workflow.task.status.paused') }
else return { color: 'info', text: t('workflow.task.status.waiting') }
}
// 计算当前动作占比
@@ -205,37 +208,37 @@ const resolveProgress = (item: Workflow) => {
<template #prepend>
<VIcon icon="mdi-note-edit" />
</template>
<VListItemTitle>编辑任务</VListItemTitle>
<VListItemTitle>{{ t('workflow.task.edit') }}</VListItemTitle>
</VListItem>
<VListItem v-if="workflow.current_action" base-color="info" @click="handleRun(workflow, false)">
<template #prepend>
<VIcon icon="mdi-play-speed" />
</template>
<VListItemTitle>继续执行</VListItemTitle>
<VListItemTitle>{{ t('workflow.task.continue') }}</VListItemTitle>
</VListItem>
<VListItem v-if="workflow.current_action" base-color="info" @click="handleRun(workflow, true)">
<template #prepend>
<VIcon icon="mdi-replay" />
</template>
<VListItemTitle>重新执行</VListItemTitle>
<VListItemTitle>{{ t('workflow.task.restart') }}</VListItemTitle>
</VListItem>
<VListItem v-else base-color="info" @click="handleRun(workflow, true)">
<template #prepend>
<VIcon icon="mdi-run" />
</template>
<VListItemTitle>立即执行</VListItemTitle>
<VListItemTitle>{{ t('workflow.task.run') }}</VListItemTitle>
</VListItem>
<VListItem base-color="warning" @click="handleReset(workflow)">
<template #prepend>
<VIcon icon="mdi-restore-alert" />
</template>
<VListItemTitle>重置任务</VListItemTitle>
<VListItemTitle>{{ t('workflow.task.reset') }}</VListItemTitle>
</VListItem>
<VListItem base-color="error" @click="handleDelete(workflow)">
<template #prepend>
<VIcon icon="mdi-delete" />
</template>
<VListItemTitle>删除任务</VListItemTitle>
<VListItemTitle>{{ t('workflow.task.delete') }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
@@ -247,11 +250,11 @@ const resolveProgress = (item: Workflow) => {
<div class="d-flex flex-column gap-y-4">
<div class="d-flex flex-wrap gap-x-6">
<div class="flex-1">
<div class="mb-1">定时</div>
<div class="mb-1">{{ t('workflow.task.info.timer') }}</div>
<h5 class="text-h6">{{ workflow?.timer }}</h5>
</div>
<div class="flex-1">
<div class="mb-1">状态</div>
<div class="mb-1">{{ t('workflow.task.info.status') }}</div>
<h5 class="text-h6" :class="`text-${resolveStatusVariant(workflow?.state).color}`">
{{ resolveStatusVariant(workflow?.state).text }}
</h5>
@@ -259,7 +262,7 @@ const resolveProgress = (item: Workflow) => {
</div>
<div class="d-flex flex-wrap gap-x-6">
<div class="flex-1">
<div class="mb-1">动作数</div>
<div class="mb-1">{{ t('workflow.task.info.actionCount') }}</div>
<div>
<VAvatar size="32" color="primary" variant="tonal">
<span class="text-sm">{{ workflow?.actions?.length }}</span>
@@ -267,13 +270,13 @@ const resolveProgress = (item: Workflow) => {
</div>
</div>
<div class="flex-1">
<div class="mb-1">已执行次数</div>
<div class="mb-1">{{ t('workflow.task.info.runCount') }}</div>
<h5 class="text-h6">{{ workflow?.run_count }}</h5>
</div>
</div>
<div class="d-flex flex-wrap gap-x-6">
<div class="flex-1">
<div class="mb-1">进度</div>
<div class="mb-1">{{ t('workflow.task.info.progress') }}</div>
<div class="d-flex align-center gap-5">
<div class="flex-grow-1">
<VProgressLinear color="info" rounded :model-value="resolveProgress(workflow)" />
@@ -284,7 +287,7 @@ const resolveProgress = (item: Workflow) => {
</div>
<div class="d-flex flex-wrap gap-x-6" v-if="workflow?.result">
<div class="flex-1">
<div class="mb-1">错误信息</div>
<div class="mb-1">{{ t('workflow.task.info.error') }}</div>
<div class="text-error">{{ workflow?.result }}</div>
</div>
</div>

View File

@@ -258,6 +258,41 @@ export default {
dragToCanvas: 'Drag to Canvas',
tapComponentHint: 'Tap component to add to canvas',
dragComponentHint: 'Drag component to canvas',
task: {
edit: 'Edit Task',
continue: 'Continue',
restart: 'Restart',
run: 'Run Now',
reset: 'Reset Task',
delete: 'Delete Task',
confirmDelete: 'Are you sure to delete task {name} ?',
confirmReset: 'Are you sure to reset task {name} ?',
deleteSuccess: 'Task deleted successfully!',
deleteFailed: 'Failed to delete task: {message}',
enableSuccess: 'Task enabled successfully!',
enableFailed: 'Failed to enable task: {message}',
pauseSuccess: 'Task paused successfully!',
pauseFailed: 'Failed to pause task: {message}',
runSuccess: 'Task execution completed!',
runFailed: 'Task execution failed: {message}',
resetSuccess: 'Task reset successfully!',
resetFailed: 'Failed to reset task: {message}',
status: {
success: 'Success',
running: 'Running',
failed: 'Failed',
paused: 'Paused',
waiting: 'Waiting',
},
info: {
timer: 'Timer',
status: 'Status',
actionCount: 'Action Count',
runCount: 'Run Count',
progress: 'Progress',
error: 'Error Message',
},
},
},
dashboard: {
storage: 'Storage',

View File

@@ -282,7 +282,7 @@ export default {
running: '运行中',
failed: '失败',
paused: '暂停',
waiting: '等待'
waiting: '等待',
},
info: {
timer: '定时',
@@ -290,6 +290,9 @@ export default {
actionCount: '动作数',
runCount: '已执行次数',
progress: '进度',
error: '错误信息',
},
},
},
dashboard: {
storage: '存储空间',

View File

@@ -255,9 +255,44 @@ export default {
workflow: {
components: '動作組件',
clickToAdd: '點擊添加',
dragToCanvas: '拖動到畫布',
dragToCanvas: '拖曳至畫布',
tapComponentHint: '點擊組件添加到畫布',
dragComponentHint: '拖組件到畫布',
dragComponentHint: '拖組件到畫布',
task: {
edit: '編輯任務',
continue: '繼續',
restart: '重新開始',
run: '立即執行',
reset: '重置任務',
delete: '刪除任務',
confirmDelete: '確定要刪除任務 {name} 嗎?',
confirmReset: '確定要重置任務 {name} 嗎?',
deleteSuccess: '任務刪除成功!',
deleteFailed: '刪除任務失敗:{message}',
enableSuccess: '任務啟用成功!',
enableFailed: '啟用任務失敗:{message}',
pauseSuccess: '任務暫停成功!',
pauseFailed: '暫停任務失敗:{message}',
runSuccess: '任務執行完成!',
runFailed: '任務執行失敗:{message}',
resetSuccess: '任務重置成功!',
resetFailed: '重置任務失敗:{message}',
status: {
success: '成功',
running: '執行中',
failed: '失敗',
paused: '已暫停',
waiting: '等待中',
},
info: {
timer: '定時器',
status: '狀態',
actionCount: '動作數量',
runCount: '執行次數',
progress: '進度',
error: '錯誤訊息',
},
},
},
dashboard: {
storage: '存儲空間',