db443b258e
- appsettings.json: restored hardcoded secrets - Program.cs: removed .env file loader - Frontend api-clients: restored hardcoded localhost:5000 - Removed .env, .env.example, vite-env.d.ts files - Kept all audit fixes (endpoints, DTOs, field names, status labels)
231 lines
12 KiB
TypeScript
231 lines
12 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { useParams, Link } from 'react-router-dom';
|
||
import { api } from '../../services/api-client';
|
||
|
||
interface RawReport {
|
||
id: string; patientId: string; title: string; category: string;
|
||
imageUrls: string[]; status: string; riskLevel?: string;
|
||
summary?: string; suggestions?: string;
|
||
patientName?: string; doctorName?: string;
|
||
createdAt: string; completedAt?: string;
|
||
items?: RawItem[];
|
||
}
|
||
|
||
interface RawItem {
|
||
id: string; itemName: string; resultValue: string;
|
||
unit?: string; referenceRange?: string; isAbnormal: boolean;
|
||
}
|
||
|
||
const categoryMap: Record<string, string> = {
|
||
'血液检查': '血液检查', '心电图': '心电图', '影像学': '影像学', '尿液检查': '尿液检查', '其他': '其他',
|
||
'Blood Test': '血液检查', 'ECG': '心电图', 'Imaging': '影像学',
|
||
};
|
||
|
||
export function ReportDetailPage() {
|
||
const { id } = useParams<{ id: string }>();
|
||
const [report, setReport] = useState<RawReport | null>(null);
|
||
const [lightbox, setLightbox] = useState<string | null>(null);
|
||
|
||
const [summary, setSummary] = useState('');
|
||
const [riskLevel, setRiskLevel] = useState('normal');
|
||
const [suggestions, setSuggestions] = useState('');
|
||
const [items, setItems] = useState([{ itemName: '', resultValue: '', unit: '', referenceRange: '', isAbnormal: false }]);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (!id) return;
|
||
api.get<RawReport>(`/api/reports/${id}`).then((r) => setReport(r.data)).catch(() => {});
|
||
}, [id]);
|
||
|
||
const addItem = () => setItems((prev) => [...prev, { itemName: '', resultValue: '', unit: '', referenceRange: '', isAbnormal: false }]);
|
||
const updateItem = (i: number, field: string, value: string | boolean) =>
|
||
setItems((prev) => prev.map((it, idx) => idx === i ? { ...it, [field]: value } : it));
|
||
const removeItem = (i: number) => { if (items.length > 1) setItems((prev) => prev.filter((_, idx) => idx !== i)); };
|
||
|
||
const handleInterpret = async () => {
|
||
if (!summary.trim() || !id) return;
|
||
setSubmitting(true);
|
||
try {
|
||
await api.post(`/api/reports/${id}/interpret`, {
|
||
summary, items: items.filter((it) => it.itemName.trim()), riskLevel,
|
||
suggestions: suggestions || null,
|
||
});
|
||
const updated = await api.get<RawReport>(`/api/reports/${id}`);
|
||
setReport(updated.data);
|
||
} catch { alert('提交失败'); }
|
||
finally { setSubmitting(false); }
|
||
};
|
||
|
||
if (!report) return <div style={{ padding: 24 }}>加载中...</div>;
|
||
|
||
const isCompleted = report.status === 'completed';
|
||
const riskMap: Record<string, { text: string; color: string }> = {
|
||
normal: { text: '正常', color: '#2e7d32' },
|
||
attention: { text: '关注', color: '#f57c00' },
|
||
abnormal: { text: '异常', color: '#c62828' },
|
||
};
|
||
|
||
return (
|
||
<div style={{ padding: 24 }}>
|
||
<Link to="/reports" style={{ fontSize: 13, color: '#1976d2' }}>← 返回报告列表</Link>
|
||
|
||
<div style={{ background: '#fff', marginTop: 16, padding: 24, borderRadius: 8, boxShadow: '0 1px 4px rgba(0,0,0,0.08)' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||
<div>
|
||
<h2 style={{ margin: 0 }}>{report.title}</h2>
|
||
<div style={{ marginTop: 8, fontSize: 13, color: '#888' }}>
|
||
患者：{report.patientName || '未知'} |
|
||
分类：{categoryMap[report.category] || report.category} |
|
||
日期：{report.createdAt?.split('T')[0]}
|
||
</div>
|
||
</div>
|
||
<span style={{
|
||
padding: '4px 12px', borderRadius: 12, fontSize: 12, fontWeight: 500,
|
||
background: isCompleted ? '#e8f5e9' : '#fff3e0',
|
||
color: isCompleted ? '#2e7d32' : '#f57c00',
|
||
}}>
|
||
{isCompleted ? '已完成' : '待审核'}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 图片 */}
|
||
{report.imageUrls && report.imageUrls.length > 0 && (
|
||
<div style={{ marginTop: 20 }}>
|
||
<h4 style={{ fontSize: 14, marginBottom: 8 }}>上传图片（{report.imageUrls.length}张）</h4>
|
||
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||
{report.imageUrls.map((url, i) => (
|
||
<div key={i} onClick={() => setLightbox(url)} style={{
|
||
width: 120, height: 120, borderRadius: 8, overflow: 'hidden',
|
||
cursor: 'pointer', border: '2px solid #eee', background: '#f5f5f5',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
}}>
|
||
<img src={`http://localhost:5000${url}`} alt={`图片${i}`}
|
||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }}
|
||
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }} />
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 灯箱 */}
|
||
{lightbox && (
|
||
<div onClick={() => setLightbox(null)} style={{
|
||
position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)',
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 999, cursor: 'pointer',
|
||
}}>
|
||
<img src={`http://localhost:5000${lightbox}`} alt="预览" style={{ maxWidth: '90vw', maxHeight: '90vh', borderRadius: 8 }} />
|
||
</div>
|
||
)}
|
||
|
||
{/* 已完成解读 */}
|
||
{isCompleted && (
|
||
<div style={{ marginTop: 20, padding: 16, background: '#e8f5e9', borderRadius: 8 }}>
|
||
<h4 style={{ fontSize: 14, marginBottom: 8 }}>解读结果</h4>
|
||
<div style={{ fontSize: 13 }}>
|
||
<p><strong>风险等级：</strong>
|
||
<span style={{ color: riskMap[report.riskLevel || '']?.color, fontWeight: 600 }}>
|
||
{riskMap[report.riskLevel || '']?.text || report.riskLevel || '-'}
|
||
</span>
|
||
</p>
|
||
<p><strong>总结：</strong>{report.summary || '-'}</p>
|
||
{report.suggestions && <p><strong>建议：</strong>{report.suggestions}</p>}
|
||
</div>
|
||
|
||
{report.items && report.items.length > 0 && (
|
||
<table style={{ width: '100%', marginTop: 12, borderCollapse: 'collapse', fontSize: 12 }}>
|
||
<thead><tr style={{ textAlign: 'left', borderBottom: '2px solid #c8e6c9' }}>
|
||
<th style={{ padding: '6px 8px' }}>检查项目</th>
|
||
<th style={{ padding: '6px 8px' }}>结果</th>
|
||
<th style={{ padding: '6px 8px' }}>参考范围</th>
|
||
<th style={{ padding: '6px 8px' }}>是否异常</th>
|
||
</tr></thead>
|
||
<tbody>
|
||
{report.items.map((item) => (
|
||
<tr key={item.id} style={{ borderBottom: '1px solid #e8f5e9' }}>
|
||
<td style={{ padding: '6px 8px' }}>{item.itemName}</td>
|
||
<td style={{ padding: '6px 8px' }}>{item.resultValue} {item.unit || ''}</td>
|
||
<td style={{ padding: '6px 8px' }}>{item.referenceRange || '-'}</td>
|
||
<td style={{ padding: '6px 8px', color: item.isAbnormal ? '#c62828' : '#2e7d32', fontWeight: 500 }}>
|
||
{item.isAbnormal ? '是' : '否'}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* 解读表单 */}
|
||
{!isCompleted && (
|
||
<div style={{ marginTop: 24, borderTop: '1px solid #eee', paddingTop: 20 }}>
|
||
<h3 style={{ fontSize: 15, marginBottom: 16 }}>医生解读</h3>
|
||
|
||
<div style={{ marginBottom: 12 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>解读总结</label>
|
||
<textarea value={summary} onChange={(e) => setSummary(e.target.value)}
|
||
placeholder="请输入您的专业解读总结..."
|
||
rows={4}
|
||
style={{ width: '100%', padding: '10px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, resize: 'vertical', fontFamily: 'inherit', boxSizing: 'border-box' }} />
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 16, marginBottom: 12 }}>
|
||
<div style={{ flex: 1 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>风险等级</label>
|
||
<select value={riskLevel} onChange={(e) => setRiskLevel(e.target.value)}
|
||
style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, fontFamily: 'inherit' }}>
|
||
<option value="normal">正常</option>
|
||
<option value="attention">需关注</option>
|
||
<option value="abnormal">异常</option>
|
||
</select>
|
||
</div>
|
||
<div style={{ flex: 1 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 4 }}>医生建议</label>
|
||
<input value={suggestions} onChange={(e) => setSuggestions(e.target.value)}
|
||
placeholder="如：继续当前用药方案"
|
||
style={{ width: '100%', padding: '8px 12px', border: '1px solid #ddd', borderRadius: 6, fontSize: 13, fontFamily: 'inherit', boxSizing: 'border-box' }} />
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: 12 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}>检查项目</label>
|
||
{items.map((item, i) => (
|
||
<div key={i} style={{ display: 'flex', gap: 8, marginBottom: 6, alignItems: 'center' }}>
|
||
<input placeholder="项目名称" value={item.itemName} onChange={(e) => updateItem(i, 'itemName', e.target.value)}
|
||
style={{ flex: 2, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
|
||
<input placeholder="结果" value={item.resultValue} onChange={(e) => updateItem(i, 'resultValue', e.target.value)}
|
||
style={{ flex: 1, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
|
||
<input placeholder="单位" value={item.unit} onChange={(e) => updateItem(i, 'unit', e.target.value)}
|
||
style={{ width: 70, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
|
||
<input placeholder="参考范围" value={item.referenceRange} onChange={(e) => updateItem(i, 'referenceRange', e.target.value)}
|
||
style={{ flex: 1, padding: '6px 10px', border: '1px solid #ddd', borderRadius: 4, fontSize: 12, fontFamily: 'inherit' }} />
|
||
<label style={{ fontSize: 12, whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 3 }}>
|
||
<input type="checkbox" checked={item.isAbnormal} onChange={(e) => updateItem(i, 'isAbnormal', e.target.checked)} />
|
||
异常
|
||
</label>
|
||
<button onClick={() => removeItem(i)}
|
||
style={{ background: 'none', border: 'none', color: '#c62828', cursor: 'pointer', fontSize: 16 }}
|
||
disabled={items.length <= 1}>✕</button>
|
||
</div>
|
||
))}
|
||
<button onClick={addItem} style={{
|
||
padding: '4px 12px', border: '1px dashed #1976d2', borderRadius: 4,
|
||
background: 'none', color: '#1976d2', cursor: 'pointer', fontSize: 12,
|
||
}}>+ 添加项目</button>
|
||
</div>
|
||
|
||
<button onClick={handleInterpret} disabled={submitting} style={{
|
||
padding: '10px 28px', background: '#1976d2', color: '#fff',
|
||
border: 'none', borderRadius: 6, fontSize: 14, cursor: 'pointer',
|
||
opacity: submitting ? 0.7 : 1, marginTop: 8,
|
||
}}>
|
||
{submitting ? '提交中...' : '提交解读'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|