YogeLiu/doc_ai_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add translate

Browse Source
This commit is contained in:
liuyuanchuang
2026-01-24 13:53:50 +08:00
parent 6747205bd0
commit 42850c4460
12 changed files with 572 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ResultPanel.tsx
View File

@@ -7,6 +7,7 @@ import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';
import { RecognitionResult } from '../types';
import ExportSidebar from './ExportSidebar';
import { useLanguage } from '../contexts/LanguageContext';
interface ResultPanelProps {
result: RecognitionResult | null;
@@ -67,6 +68,7 @@ function preprocessLatex(content: string): string {
}
export default function ResultPanel({ result, fileStatus }: ResultPanelProps) {
const { t } = useLanguage();
const [isExportSidebarOpen, setIsExportSidebarOpen] = useState(false);
if (!result) {
@@ -75,44 +77,45 @@ export default function ResultPanel({ result, fileStatus }: ResultPanelProps) {
<div className="h-full flex flex-col items-center justify-center bg-white text-center p-8">
<div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mb-6"></div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">
{fileStatus === 'pending' ? 'Waiting in queue...' : 'Analyzing...'}
{fileStatus === 'pending' ? t.resultPanel.waitingQueue : t.resultPanel.analyzing}
</h3>
<p className="text-gray-500 max-w-sm">
{fileStatus === 'pending'
? 'Your file is in the queue, please wait.'
: 'Texpixel is processing your file, this may take a moment.'}
? t.resultPanel.queueSubtitle
: t.resultPanel.processingSubtitle}
</p>
</div>
);
}
return (
<div className="h-full flex flex-col items-center justify-center bg-white text-center p-8">
<div className="h-full flex flex-col items-center justify-center bg-white text-center p-8" id="result-empty-state">
<div className="w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mb-6 shadow-inner">
<Code2 size={48} className="text-gray-900" />
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">Waiting for recognition result</h3>
<h3 className="text-xl font-semibold text-gray-900 mb-2">{t.resultPanel.waitingTitle}</h3>
<p className="text-gray-500 max-w-sm">
After uploading the file, Texpixel will automatically recognize and display the result here
{t.resultPanel.waitingSubtitle}
</p>
</div>
);
}
return (
<div className="flex flex-col h-full bg-white relative overflow-hidden">
<div className="flex flex-col h-full bg-white relative overflow-hidden" id="result-panel-content">
{/* Top Header */}
<div className="h-16 px-6 border-b border-gray-200 flex items-center justify-between bg-white shrink-0 z-10">
<div className="flex items-center gap-4">
<h2 className="text-lg font-bold text-gray-900">Markdown</h2>
<h2 className="text-lg font-bold text-gray-900">{t.resultPanel.markdown}</h2>
</div>
<button
id="export-button"
onClick={() => setIsExportSidebarOpen(true)}
className={`px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors flex items-center gap-2 shadow-sm ${isExportSidebarOpen ? 'opacity-0 pointer-events-none' : ''}`}
>
<Download size={16} />
Export
{t.common.export}
</button>
</div>