fix(frontend): complete i18n coverage and responsive layouts

frontend/src/composables/__tests__/localized-feedback.spec.ts

@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { setI18nLocale } from '@/i18n'
+import { useToast } from '../useToast'
+import { useConfirm } from '../useConfirm'
+
+afterEach(() => {
+  useToast().clearAll()
+  useConfirm().handleCancel()
+})
+
+describe('localized feedback', () => {
+  it('retranslates an existing toast in both directions without changing its identity', () => {
+    const { showToast, toasts, removeToast } = useToast()
+    setI18nLocale('en-US')
+    const id = showToast({ title: '保存', description: '保存成功', duration: 0 })
+    expect(toasts.value[0]).toMatchObject({ id, title: 'Save' })
+    setI18nLocale('zh-CN')
+    expect(toasts.value[0]).toMatchObject({ id, title: '保存', message: '保存成功' })
+    setI18nLocale('en-US')
+    expect(toasts.value[0].title).toBe('Save')
+    removeToast(id)
+    expect(toasts.value).toEqual([])
+  })
+
+  it('keeps the pending confirmation while its labels change language', async () => {
+    const { confirm, state, handleConfirm } = useConfirm()
+    setI18nLocale('en-US')
+    const result = confirm({ message: '保存', confirmText: '保存' })
+    expect(state.value.confirmText).toBe('Save')
+    setI18nLocale('zh-CN')
+    expect(state.value).toMatchObject({ isOpen: true, message: '保存', confirmText: '保存' })
+    setI18nLocale('en-US')
+    expect(state.value.message).toBe('Save')
+    handleConfirm()
+    expect(await result).toBe(true)
+    expect(state.value.isOpen).toBe(false)
+  })
+})

frontend/src/composables/useConfirm.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { getI18nLocale } from '@/i18n'
 import { translateLegacyText } from '@/i18n/messages'
 
@@ -40,10 +40,10 @@ export function useConfirm() {
     return new Promise((resolve) => {
       state.value = {
         isOpen: true,
-        title: localizeConfirmText(options.title || '确认操作'),
-        message: localizeConfirmText(options.message),
-        confirmText: localizeConfirmText(options.confirmText || '确认'),
-        cancelText: localizeConfirmText(options.cancelText || '取消'),
+        title: options.title || '确认操作',
+        message: options.message,
+        confirmText: options.confirmText || '确认',
+        cancelText: options.cancelText || '取消',
         variant: options.variant || 'question',
         resolve
       }
@@ -107,7 +107,13 @@ export function useConfirm() {
   }
 
   return {
-    state,
+    state: computed(() => ({
+      ...state.value,
+      title: localizeConfirmText(state.value.title || '确认操作'),
+      message: localizeConfirmText(state.value.message),
+      confirmText: localizeConfirmText(state.value.confirmText || '确认'),
+      cancelText: localizeConfirmText(state.value.cancelText || '取消'),
+    })),
     confirm,
     confirmDanger,
     confirmWarning,

frontend/src/composables/useToast.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { TOAST_CONFIG } from '@/config/constants'
 import { getI18nLocale } from '@/i18n'
 import { translateLegacyText } from '@/i18n/messages'
@@ -36,8 +36,8 @@ export function useToast() {
       duration: 5000,
       ...toastOptions,
       variant: normalizeToastVariant(options.variant),
-      title: localizeToastText(options.title),
-      message: localizeToastText(options.message ?? description),
+      title: options.title,
+      message: options.message ?? description,
     }
 
 
@@ -81,7 +81,11 @@ export function useToast() {
   }
 
   return {
-    toasts,
+    toasts: computed(() => toasts.value.map(toast => ({
+      ...toast,
+      title: localizeToastText(toast.title),
+      message: localizeToastText(toast.message),
+    }))),
     showToast,
     removeToast,
     toast: showToast,