diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json index f3e41617..d3833932 100644 --- a/apps/web/messages/en.json +++ b/apps/web/messages/en.json @@ -10,6 +10,9 @@ "cancel": "Cancel", "confirm": "Confirm", "close": "Close", + "closeEsc": "Close (ESC)", + "previous": "Previous (←)", + "next": "Next (→)", "save": "Save", "delete": "Delete", "edit": "Edit", diff --git a/apps/web/messages/zh-TW.json b/apps/web/messages/zh-TW.json index 3842fb7d..b6ddb389 100644 --- a/apps/web/messages/zh-TW.json +++ b/apps/web/messages/zh-TW.json @@ -10,6 +10,9 @@ "cancel": "取消", "confirm": "確認", "close": "關閉", + "closeEsc": "關閉 (ESC)", + "previous": "上一個 (←)", + "next": "下一個 (→)", "save": "儲存", "delete": "刪除", "edit": "編輯", diff --git a/apps/web/src/components/ui/approval-modal.tsx b/apps/web/src/components/ui/approval-modal.tsx index 75548c1c..5e371365 100644 --- a/apps/web/src/components/ui/approval-modal.tsx +++ b/apps/web/src/components/ui/approval-modal.tsx @@ -17,6 +17,7 @@ import { useEffect, useCallback, useState } from 'react' import { createPortal } from 'react-dom' +import { useTranslations } from 'next-intl' import { cn } from '@/lib/utils' import { X, ChevronLeft, ChevronRight, Shield } from 'lucide-react' @@ -37,12 +38,15 @@ export function ApprovalModal({ open, onClose, children, - title = '審核詳情', + title, onPrev, onNext, current, total, }: ApprovalModalProps) { + const t = useTranslations('common') + const tApproval = useTranslations('approval') + const displayTitle = title ?? tApproval('title') // ESC 關閉 + 方向鍵導航 const handleKeyDown = useCallback((e: KeyboardEvent) => { if (e.key === 'Escape') onClose() @@ -98,7 +102,7 @@ export function ApprovalModal({

- {title} + {displayTitle}

Multi-Sig Authorization Required @@ -119,7 +123,7 @@ export function ApprovalModal({ ? 'text-nothing-gray-300 cursor-not-allowed' : 'text-nothing-gray-600 hover:bg-nothing-gray-200' )} - title="上一個 (←)" + title={t('previous')} > @@ -135,7 +139,7 @@ export function ApprovalModal({ ? 'text-nothing-gray-300 cursor-not-allowed' : 'text-nothing-gray-600 hover:bg-nothing-gray-200' )} - title="下一個 (→)" + title={t('next')} > @@ -146,7 +150,7 @@ export function ApprovalModal({ diff --git a/apps/web/src/components/ui/slide-panel.tsx b/apps/web/src/components/ui/slide-panel.tsx index 94dfea79..da6bf603 100644 --- a/apps/web/src/components/ui/slide-panel.tsx +++ b/apps/web/src/components/ui/slide-panel.tsx @@ -13,6 +13,7 @@ */ import { useEffect, useCallback } from 'react' +import { useTranslations } from 'next-intl' import { cn } from '@/lib/utils' import { X, ChevronLeft, ChevronRight } from 'lucide-react' import { Z_INDEX } from '@/lib/constants/z-index' @@ -50,6 +51,7 @@ export function SlidePanel({ total, width = 'lg', }: SlidePanelProps) { + const t = useTranslations('common') // ESC 關閉 const handleKeyDown = useCallback((e: KeyboardEvent) => { if (e.key === 'Escape') onClose() @@ -96,7 +98,7 @@ export function SlidePanel({ @@ -123,7 +125,7 @@ export function SlidePanel({ ? 'text-nothing-gray-300 cursor-not-allowed' : 'text-nothing-gray-500 hover:bg-nothing-gray-200' )} - title="上一個 (←)" + title={t('previous')} > @@ -136,7 +138,7 @@ export function SlidePanel({ ? 'text-nothing-gray-300 cursor-not-allowed' : 'text-nothing-gray-500 hover:bg-nothing-gray-200' )} - title="下一個 (→)" + title={t('next')} >