Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | import { useState, useEffect } from 'react';
import { useToast } from '../components/ui/Toast';
import { Pagination } from '../components/ui/Pagination';
import { userApi } from '../api/user';
import { translateApi } from '../api/translate';
import type { TranslationHistoryItem } from '../api/types';
import { Trash2, Clock, Languages, FileText } from 'lucide-react';
import { useTranslation } from 'react-i18next';
function HistoryPage() {
const { t } = useTranslation();
const { success, error: toastError } = useToast();
const [items, setItems] = useState<TranslationHistoryItem[]>([]);
const [filter, setFilter] = useState('all');
const [loading, setLoading] = useState(false);
const [page, setPage] = useState(1);
const [totalPages, setTotalPages] = useState(1);
useEffect(() => { loadHistory(); }, [filter, page]);
useEffect(() => { setPage(1); }, [filter]);
const loadHistory = async () => {
setLoading(true);
try {
const { data } = await userApi.getTranslationHistory({
page, pageSize: 20, type: filter === 'all' ? undefined : filter,
});
setItems(data.list || []);
setTotalPages(data.totalPages || 1);
} catch (err) {
console.warn('加载历史记录失败:', err);
}
finally { setLoading(false); }
};
const handleDelete = async (taskId: string) => {
try { await translateApi.deleteHistory(taskId); success('已删除'); loadHistory(); }
catch { toastError(t('history.actions.delete')); }
};
const formatDate = (dateStr: string) => {
const date = new Date(dateStr);
const now = new Date();
const diff = now.getTime() - date.getTime();
const minutes = Math.floor(diff / 60000);
const hours = Math.floor(diff / 3600000);
const days = Math.floor(diff / 86400000);
if (minutes < 1) return t('history.time.justNow');
if (minutes < 60) return t('history.time.minutesAgo', { count: minutes });
if (hours < 24) return t('history.time.hoursAgo', { count: hours });
if (days < 7) return t('history.time.daysAgo', { count: days });
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
};
const getLangName = (code: string) => {
return t(`common.languages.${code}`, { defaultValue: code });
};
const filterTabs = [
{ key: 'all', label: t('history.filters.all') },
{ key: 'completed', label: t('history.filters.completed') },
{ key: 'processing', label: t('history.filters.inProgress') },
{ key: 'failed', label: t('history.filters.failed') },
];
return (
<div className="py-8">
<div className="mb-6">
<h1 className="text-[28px] font-bold text-text-primary mb-2 tracking-tight">
{t('history.title')}
</h1>
<p className="text-[15px] text-text-secondary">
{t('history.subtitle')}
</p>
</div>
<div className="border border-border rounded-xl shadow-sm bg-surface overflow-hidden">
<div className="flex items-center gap-2 px-6 py-4 border-b border-border bg-surface-secondary/30">
{filterTabs.map(tab => (
<button
key={tab.key}
onClick={() => setFilter(tab.key)}
className={`px-3 py-1.5 text-[13px] font-medium rounded-md transition-all ${
filter === tab.key
? 'bg-accent/10 text-accent'
: 'text-text-tertiary hover:text-text-primary hover:bg-surface-secondary'
}`}
>
{tab.label}
</button>
))}
</div>
<div className="flex-1 overflow-auto">
{loading ? (
<div className="flex flex-col items-center justify-center py-16 gap-3">
<div className="w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin" />
<span className="text-[13px] text-text-tertiary">{t('history.loading')}</span>
</div>
) : items.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 gap-4 text-center">
<div className="w-16 h-16 rounded-full bg-surface-secondary flex items-center justify-center">
<Clock className="w-8 h-8 text-text-tertiary" />
</div>
<div>
<p className="text-[15px] font-medium text-text-secondary mb-1">{t('history.empty.title')}</p>
<p className="text-[13px] text-text-tertiary">{t('history.empty.subtitle')}</p>
</div>
</div>
) : (
<div className="divide-y divide-border/30">
{items.map(item => (
<div key={item.id} className="px-6 py-4 hover:bg-surface-secondary/20 transition-colors">
<div className="flex items-center gap-3">
<div className="flex-shrink-0">
<FileText className="w-5 h-5 text-text-tertiary" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-3 mb-1.5">
<div className="min-w-0 flex-1">
<p className="text-[14px] font-medium text-text-primary truncate" title={item.filename || item.taskId}>
{item.filename || `翻译任务 #${item.taskId}`}
</p>
</div>
<button
onClick={() => handleDelete(item.taskId)}
className="p-1.5 rounded-md text-text-tertiary hover:text-red hover:bg-red-bg transition-colors flex-shrink-0"
title={t('history.actions.delete')}
>
<Trash2 className="w-4 h-4" />
</button>
</div>
<div className="flex items-center gap-3 text-[12px] text-text-tertiary">
<span className="flex items-center gap-1">
<Languages className="w-3 h-3" />
{getLangName(item.sourceLang)} → {getLangName(item.targetLang)}
</span>
<span className="text-text-placeholder">·</span>
<span className="flex items-center gap-1">
<Clock className="w-3 h-3" />
{formatDate(item.createTime)}
</span>
</div>
{item.sourceTextPreview && (
<div className="mt-2 text-[13px] text-text-secondary line-clamp-2">
{item.sourceTextPreview}
</div>
)}
</div>
</div>
</div>
))}
</div>
)}
</div>
<Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
</div>
</div>
);
}
export { HistoryPage };
|