feat: 添加图片OCR结果转换为待办事项的功能
- 后端新增 `/images/:id/convert-to-todo` 路由及控制器方法，支持将图片OCR结果创建为待办事项 - 前端添加 `useConvertImageToTodo` hook 和 `ImageService.convertToTodo` 方法 - 在图片列表页面为已识别图片添加“转为待办”操作按钮 - 新增文档详情页面路由及基础UI - 修复PaddleOCR和RapidOCR提供商的配置及可用性检查逻辑 - 优化图片上传时对document_id的处理（空字符串转为null）
This commit is contained in:
congsh
@@ -0,0 +1,226 @@
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { useDocument, useDocumentAnalysis, useAnalyzeDocument } from '@/hooks/useDocuments';
|
||||
import { Button } from '@/components/Button';
|
||||
import { Card } from '@/components/Card';
|
||||
import { ArrowLeft, FileText, Sparkles, Tag, FolderOpen, Trash2, Edit2, CheckSquare } from 'lucide-react';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function DocumentDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { data: document, isLoading: docLoading, error: docError } = useDocument(id || '');
|
||||
const { data: analysis, isLoading: analysisLoading } = useDocumentAnalysis(id || '');
|
||||
const analyzeMutation = useAnalyzeDocument();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editedTitle, setEditedTitle] = useState('');
|
||||
const [editedContent, setEditedContent] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (document) {
|
||||
setEditedTitle(document.title || '');
|
||||
setEditedContent(document.content);
|
||||
}
|
||||
}, [document]);
|
||||
|
||||
const handleAnalyze = async () => {
|
||||
if (!id) return;
|
||||
try {
|
||||
await analyzeMutation.mutateAsync({ id });
|
||||
} catch (err: any) {
|
||||
alert(err.message || 'AI 分析失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
// TODO: 实现保存功能
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
if (docLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="text-gray-600">加载中...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (docError || !document) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Card variant="bordered" className="max-w-md">
|
||||
<div className="text-center py-8">
|
||||
<p className="text-red-600 mb-4">文档不存在或无权访问</p>
|
||||
<Link to="/documents">
|
||||
<Button>返回文档列表</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
{/* 头部导航 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/documents">
|
||||
<button className="p-2 hover:bg-gray-100 rounded-lg">
|
||||
<ArrowLeft className="h-5 w-5 text-gray-600" />
|
||||
</button>
|
||||
</Link>
|
||||
<div className="flex-1">
|
||||
<h1 className="text-2xl font-bold text-gray-900">文档详情</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 文档内容卡片 */}
|
||||
<Card variant="bordered">
|
||||
<div className="space-y-4">
|
||||
{/* 标题和操作栏 */}
|
||||
<div className="flex items-start justify-between">
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editedTitle}
|
||||
onChange={(e) => setEditedTitle(e.target.value)}
|
||||
className="flex-1 mr-4 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="文档标题"
|
||||
/>
|
||||
) : (
|
||||
<h2 className="flex-1 text-xl font-semibold text-gray-900">
|
||||
{document.title || '无标题'}
|
||||
</h2>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
{isEditing ? (
|
||||
<>
|
||||
<Button size="sm" onClick={handleSave}>
|
||||
保存
|
||||
</Button>
|
||||
<Button size="sm" variant="secondary" onClick={() => setIsEditing(false)}>
|
||||
取消
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsEditing(true)}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg"
|
||||
title="编辑"
|
||||
>
|
||||
<Edit2 className="h-4 w-4 text-gray-600" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAnalyze}
|
||||
disabled={analyzeMutation.isPending || analysisLoading}
|
||||
className="p-2 hover:bg-purple-100 rounded-lg disabled:opacity-50"
|
||||
title="AI 分析"
|
||||
>
|
||||
<Sparkles className={`h-4 w-4 ${analyzeMutation.isPending ? 'animate-pulse' : ''} text-purple-600`} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 文档内容 */}
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
value={editedContent}
|
||||
onChange={(e) => setEditedContent(e.target.value)}
|
||||
className="w-full min-h-[300px] px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm"
|
||||
placeholder="文档内容"
|
||||
/>
|
||||
) : (
|
||||
<div className="p-4 bg-gray-50 rounded-lg">
|
||||
<p className="whitespace-pre-wrap text-sm text-gray-700">{document.content}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 元数据 */}
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span>创建时间: {new Date(document.created_at).toLocaleString()}</span>
|
||||
<span>更新时间: {new Date(document.updated_at).toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* AI 分析结果 */}
|
||||
{(analysis || analyzeMutation.isPending || analysisLoading) && (
|
||||
<Card title="AI 分析结果" variant="bordered">
|
||||
{analyzeMutation.isPending || analysisLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Sparkles className="h-6 w-6 text-purple-600 animate-pulse mr-2" />
|
||||
<span className="text-gray-600">AI 分析中...</span>
|
||||
</div>
|
||||
) : analysis ? (
|
||||
<div className="space-y-4">
|
||||
{/* 标签 */}
|
||||
{analysis.suggested_tags && analysis.suggested_tags.length > 0 && (
|
||||
<div className="flex items-start gap-2">
|
||||
<Tag className="h-4 w-4 text-gray-500 mt-0.5" />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{analysis.suggested_tags.map((tag, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 分类建议 */}
|
||||
{analysis.suggested_category && (
|
||||
<div className="flex items-start gap-2">
|
||||
<FolderOpen className="h-4 w-4 text-gray-500 mt-0.5" />
|
||||
<span className="text-gray-700">
|
||||
建议分类:{' '}
|
||||
<span className="font-medium text-gray-900">{analysis.suggested_category}</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 摘要 */}
|
||||
{analysis.summary && (
|
||||
<div className="bg-purple-50 rounded-lg p-4">
|
||||
<div className="flex items-start gap-2 mb-2">
|
||||
<Sparkles className="h-4 w-4 text-purple-600 mt-0.5" />
|
||||
<span className="font-medium text-gray-900">摘要</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700 ml-6">{analysis.summary}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 提供商信息 */}
|
||||
<p className="text-xs text-gray-500">
|
||||
由 {analysis.provider} ({analysis.model}) 分析
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* 转为待办 */}
|
||||
<Card variant="bordered">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckSquare className="h-5 w-5 text-green-600" />
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900">转为待办事项</h3>
|
||||
<p className="text-xs text-gray-500">将此文档内容转换为待办任务</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => navigate(`/todos?createFromDocument=${id}`)}
|
||||
variant="secondary"
|
||||
>
|
||||
创建待办
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user