Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e6cdfd84d4 | ||
|
|
3eb1b489f3 | ||
|
|
9ff2f5923a | ||
|
|
8ccb234a62 | ||
|
|
cfb3cb91f8 | ||
|
|
d5529a4998 | ||
|
|
7ab8c919e3 | ||
|
|
89bf60b4e1 | ||
|
|
888255ae6f |
@@ -8,15 +8,19 @@ import { storage } from '../utils/storage';
|
|||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [stats, setStats] = useState({
|
const [stats, setStats] = useState({
|
||||||
reportCount: 0,
|
totalCount: 0,
|
||||||
|
monthCount: 0,
|
||||||
templateCount: 0,
|
templateCount: 0,
|
||||||
userCount: 0,
|
userCount: 0,
|
||||||
todayCount: 0,
|
todayCount: 0,
|
||||||
trend: [0,0,0,0,0,0,0],
|
trend: [0,0,0,0,0,0,0],
|
||||||
trendLabels: ['','','','','','',''],
|
trendLabels: ['','','','','','',''],
|
||||||
|
trendFullDates: ['','','','','','',''],
|
||||||
maxTrend: 1
|
maxTrend: 1
|
||||||
});
|
});
|
||||||
|
const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; date: string; count: number }>({ visible: false, x: 0, y: 0, date: '', count: 0 });
|
||||||
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
const [currentUser, setCurrentUser] = useState<User | null>(null);
|
||||||
|
const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days');
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const user = storage.get<User | null>('currentUser', null);
|
const user = storage.get<User | null>('currentUser', null);
|
||||||
@@ -35,32 +39,42 @@ export default function Dashboard() {
|
|||||||
? reports.filter(r => r.author === user.username)
|
? reports.filter(r => r.author === user.username)
|
||||||
: reports;
|
: reports;
|
||||||
|
|
||||||
const today = new Date().toISOString().split('T')[0];
|
const now = new Date();
|
||||||
|
const today = now.toISOString().split('T')[0];
|
||||||
const todayReports = userReports.filter(r => r.createdAt === today);
|
const todayReports = userReports.filter(r => r.createdAt === today);
|
||||||
|
|
||||||
// 7-day trend data
|
// 本月报告数
|
||||||
|
const currentMonth = today.slice(0, 7);
|
||||||
|
const thisMonthReports = userReports.filter(r => r.createdAt && r.createdAt.startsWith(currentMonth));
|
||||||
|
|
||||||
|
// 动态趋势数据
|
||||||
|
const daysCount = timeRange === '7days' ? 7 : 30;
|
||||||
const trend: number[] = [];
|
const trend: number[] = [];
|
||||||
const labels: string[] = [];
|
const labels: string[] = [];
|
||||||
for (let i = 6; i >= 0; i--) {
|
const fullDates: string[] = [];
|
||||||
const d = new Date();
|
for (let i = daysCount - 1; i >= 0; i--) {
|
||||||
|
const d = new Date(now);
|
||||||
d.setDate(d.getDate() - i);
|
d.setDate(d.getDate() - i);
|
||||||
const dateStr = d.toISOString().split('T')[0];
|
const dateStr = d.toISOString().split('T')[0];
|
||||||
const label = `${d.getMonth() + 1}/${d.getDate()}`;
|
const label = timeRange === '7days' ? `${d.getMonth() + 1}/${d.getDate()}` : `${d.getDate()}`;
|
||||||
labels.push(label);
|
labels.push(label);
|
||||||
|
fullDates.push(dateStr);
|
||||||
trend.push(userReports.filter(r => r.createdAt === dateStr).length);
|
trend.push(userReports.filter(r => r.createdAt === dateStr).length);
|
||||||
}
|
}
|
||||||
const maxTrend = Math.max(...trend, 1);
|
const maxTrend = Math.max(...trend, 1);
|
||||||
|
|
||||||
setStats({
|
setStats({
|
||||||
reportCount: userReports.length,
|
totalCount: userReports.length,
|
||||||
|
monthCount: thisMonthReports.length,
|
||||||
templateCount: templates.length,
|
templateCount: templates.length,
|
||||||
userCount: users.length,
|
userCount: users.length,
|
||||||
todayCount: todayReports.length,
|
todayCount: todayReports.length,
|
||||||
trend,
|
trend,
|
||||||
trendLabels: labels,
|
trendLabels: labels,
|
||||||
|
trendFullDates: fullDates,
|
||||||
maxTrend
|
maxTrend
|
||||||
});
|
});
|
||||||
}, [navigate]);
|
}, [navigate, timeRange]);
|
||||||
|
|
||||||
if (!currentUser) return null;
|
if (!currentUser) return null;
|
||||||
|
|
||||||
@@ -80,10 +94,15 @@ export default function Dashboard() {
|
|||||||
</Link>
|
</Link>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||||
|
<div className="card-minimal">
|
||||||
|
<div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">全部报告总数</div>
|
||||||
|
<div className="text-3xl font-bold text-text-main">{stats.totalCount}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="card-minimal">
|
<div className="card-minimal">
|
||||||
<div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">本月报告总数</div>
|
<div className="text-[11px] text-text-muted mb-2 uppercase tracking-wider font-bold">本月报告总数</div>
|
||||||
<div className="text-3xl font-bold text-text-main">{stats.reportCount}</div>
|
<div className="text-3xl font-bold text-text-main">{stats.monthCount}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card-minimal">
|
<div className="card-minimal">
|
||||||
@@ -104,11 +123,44 @@ export default function Dashboard() {
|
|||||||
<TrendingUp size={16} className="text-accent" />
|
<TrendingUp size={16} className="text-accent" />
|
||||||
报告增长趋势
|
报告增长趋势
|
||||||
</span>
|
</span>
|
||||||
<span className="text-[10px] text-accent font-bold uppercase tracking-wider">最近 7 天</span>
|
<div className="flex bg-slate-100 p-1 rounded-lg">
|
||||||
|
<button
|
||||||
|
onClick={() => setTimeRange('7days')}
|
||||||
|
className={`px-3 py-1 text-xs font-bold rounded-md transition-colors ${timeRange === '7days' ? 'bg-white text-accent shadow-sm' : 'text-text-muted hover:text-text-main'}`}
|
||||||
|
>最近 7 天</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setTimeRange('1month')}
|
||||||
|
className={`px-3 py-1 text-xs font-bold rounded-md transition-colors ${timeRange === '1month' ? 'bg-white text-accent shadow-sm' : 'text-text-muted hover:text-text-main'}`}
|
||||||
|
>最近 30 天</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 bg-slate-50 rounded-xl p-6 min-h-[240px] relative">
|
<div className="flex-1 bg-slate-50 rounded-xl p-6 min-h-[240px] relative">
|
||||||
{/* SVG Area Chart */}
|
{/* SVG Area Chart */}
|
||||||
<svg viewBox="0 0 300 120" className="w-full h-full overflow-visible">
|
<svg
|
||||||
|
viewBox="0 0 300 135"
|
||||||
|
className="w-full h-full overflow-visible"
|
||||||
|
onMouseMove={(e) => {
|
||||||
|
const svg = e.currentTarget;
|
||||||
|
const rect = svg.getBoundingClientRect();
|
||||||
|
const mouseX = ((e.clientX - rect.left) / rect.width) * 300;
|
||||||
|
const paddingX = 10;
|
||||||
|
const chartW = 300 - paddingX * 2;
|
||||||
|
const n = stats.trend.length;
|
||||||
|
if (n <= 1) return;
|
||||||
|
let idx = Math.round(((mouseX - paddingX) / chartW) * (n - 1));
|
||||||
|
idx = Math.max(0, Math.min(n - 1, idx));
|
||||||
|
const ptX = paddingX + (idx / (n - 1)) * chartW;
|
||||||
|
const ptY = 8 + (120 - 16) - (stats.maxTrend > 0 ? (stats.trend[idx] / stats.maxTrend) * (120 - 16) : 0);
|
||||||
|
setTooltip({
|
||||||
|
visible: true,
|
||||||
|
x: (ptX / 300) * rect.width,
|
||||||
|
y: (ptY / 135) * rect.height,
|
||||||
|
date: stats.trendFullDates[idx] || '',
|
||||||
|
count: stats.trend[idx]
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => setTooltip(prev => ({ ...prev, visible: false }))}
|
||||||
|
>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="trendGradient" x1="0" y1="0" x2="0" y2="1">
|
<linearGradient id="trendGradient" x1="0" y1="0" x2="0" y2="1">
|
||||||
<stop offset="0%" stopColor="#2563EB" stopOpacity="0.35" />
|
<stop offset="0%" stopColor="#2563EB" stopOpacity="0.35" />
|
||||||
@@ -145,17 +197,37 @@ export default function Dashboard() {
|
|||||||
<g>
|
<g>
|
||||||
<path d={areaPath} fill="url(#trendGradient)" />
|
<path d={areaPath} fill="url(#trendGradient)" />
|
||||||
<path d={linePath} fill="none" stroke="#2563EB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
<path d={linePath} fill="none" stroke="#2563EB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||||
|
{/* Transparent capture layer for reliable mouse events */}
|
||||||
|
<rect x="0" y="0" width="300" height="135" fill="transparent" />
|
||||||
{points.map((p, i) => (
|
{points.map((p, i) => (
|
||||||
<g key={i}>
|
<g key={i}>
|
||||||
<circle cx={p.x} cy={p.y} r="3.5" fill="#2563EB" stroke="#fff" strokeWidth="2" />
|
{/* 7天模式显示圆点和数值;30天模式隐藏 */}
|
||||||
<text x={p.x} y={p.y - 10} textAnchor="middle" fontSize="8" fill="#64748B" fontWeight="bold">{p.count}</text>
|
{stats.trend.length <= 10 && (
|
||||||
<text x={p.x} y={120 - 2} textAnchor="middle" fontSize="8" fill="#94A3B8" fontWeight="bold">{p.label}</text>
|
<>
|
||||||
|
<circle cx={p.x} cy={p.y} r="3.5" fill="#2563EB" stroke="#fff" strokeWidth="2" />
|
||||||
|
<text x={p.x} y={p.y - 10} textAnchor="middle" fontSize="8" fill="#64748B" fontWeight="bold">{p.count}</text>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{/* 标签稀疏化:7天每天显示,30天每隔5天显示 */}
|
||||||
|
{(stats.trend.length <= 10 || i % 5 === 0) && (
|
||||||
|
<text x={p.x} y={128} textAnchor="middle" fontSize={stats.trendLabels.length > 10 ? '7' : '8'} fill="#94A3B8" fontWeight="bold">{p.label}</text>
|
||||||
|
)}
|
||||||
</g>
|
</g>
|
||||||
))}
|
))}
|
||||||
</g>
|
</g>
|
||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
</svg>
|
</svg>
|
||||||
|
{/* Tooltip */}
|
||||||
|
{tooltip.visible && (
|
||||||
|
<div
|
||||||
|
className="absolute pointer-events-none bg-slate-800 text-white text-xs rounded-lg px-3 py-2 shadow-lg z-10"
|
||||||
|
style={{ left: tooltip.x, top: tooltip.y - 40, transform: 'translateX(-50%)' }}
|
||||||
|
>
|
||||||
|
<div className="font-bold">{tooltip.date}</div>
|
||||||
|
<div className="text-slate-300">报告数: {tooltip.count}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -55,6 +55,26 @@ export default function ReportEditor() {
|
|||||||
|
|
||||||
const [activeTab, setActiveTab] = useState<'info' | 'video'>('info');
|
const [activeTab, setActiveTab] = useState<'info' | 'video'>('info');
|
||||||
const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null);
|
const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!editorRef.current) return;
|
||||||
|
const allFields = editorRef.current.querySelectorAll('.field-value');
|
||||||
|
allFields.forEach(el => {
|
||||||
|
(el as HTMLElement).style.backgroundColor = '';
|
||||||
|
(el as HTMLElement).style.outline = '';
|
||||||
|
(el as HTMLElement).style.outlineOffset = '';
|
||||||
|
});
|
||||||
|
if (activeFieldKey) {
|
||||||
|
const targetEl = editorRef.current.querySelector(`.field-value[data-bind="${activeFieldKey}"]`) as HTMLElement;
|
||||||
|
if (targetEl) {
|
||||||
|
targetEl.style.backgroundColor = '#f1f5f9';
|
||||||
|
targetEl.style.outline = '1px solid #94a3b8';
|
||||||
|
targetEl.style.outlineOffset = '1px';
|
||||||
|
targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [activeFieldKey]);
|
||||||
|
|
||||||
const [multiSelectOptions, setMultiSelectOptions] = useState<Record<string, string[]>>({
|
const [multiSelectOptions, setMultiSelectOptions] = useState<Record<string, string[]>>({
|
||||||
surgeon: ['张医生', '李医生', '王医生'],
|
surgeon: ['张医生', '李医生', '王医生'],
|
||||||
assistant: ['赵医生', '钱医生', '孙医生'],
|
assistant: ['赵医生', '钱医生', '孙医生'],
|
||||||
@@ -414,6 +434,9 @@ export default function ReportEditor() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 点击空白处清除高亮
|
||||||
|
setActiveFieldKey(null);
|
||||||
|
|
||||||
const placeholder = targetEl.closest('.image-placeholder') as HTMLElement | null;
|
const placeholder = targetEl.closest('.image-placeholder') as HTMLElement | null;
|
||||||
if (!placeholder) return;
|
if (!placeholder) return;
|
||||||
|
|
||||||
@@ -1525,7 +1548,7 @@ export default function ReportEditor() {
|
|||||||
if (field.type === 'text' || field.type === 'date') {
|
if (field.type === 'text' || field.type === 'date') {
|
||||||
const inputType = field.type === 'date' ? 'date' : 'text';
|
const inputType = field.type === 'date' ? 'date' : 'text';
|
||||||
return (
|
return (
|
||||||
<div key={field.key} id={`input-${field.key}`} className={`${field.category === '填空' && formFields.filter(f2 => f2.visibleInForm && f2.type === 'text' && f2.isSystemLocked).length > 1 && (field.key === 'patientName' || field.key === 'hospitalId') ? 'flex-1 space-y-1' : 'space-y-1'} p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`${field.category === '填空' && formFields.filter(f2 => f2.visibleInForm && f2.type === 'text' && f2.isSystemLocked).length > 1 && (field.key === 'patientName' || field.key === 'hospitalId') ? 'flex-1 space-y-1' : 'space-y-1'} p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||||||
<label className="block text-xs font-bold text-text-main">
|
<label className="block text-xs font-bold text-text-main">
|
||||||
{field.label} {isRequired && <span className="text-red-500">*</span>}
|
{field.label} {isRequired && <span className="text-red-500">*</span>}
|
||||||
</label>
|
</label>
|
||||||
@@ -1545,7 +1568,7 @@ export default function ReportEditor() {
|
|||||||
const isOpen = openDropdown === field.key;
|
const isOpen = openDropdown === field.key;
|
||||||
const opts = field.options || (field.key === 'anesthesiaType' ? anesthesiaOptions : []);
|
const opts = field.options || (field.key === 'anesthesiaType' ? anesthesiaOptions : []);
|
||||||
return (
|
return (
|
||||||
<div key={field.key} id={`input-${field.key}`} className={`space-y-1 select-dropdown-root relative p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`space-y-1 select-dropdown-root relative p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||||||
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
||||||
<div
|
<div
|
||||||
className="w-full px-3 py-2 border border-border rounded-lg bg-white flex items-center min-h-[42px] cursor-text"
|
className="w-full px-3 py-2 border border-border rounded-lg bg-white flex items-center min-h-[42px] cursor-text"
|
||||||
@@ -1654,7 +1677,7 @@ export default function ReportEditor() {
|
|||||||
const currentInputText = multiInputText[field.key] !== undefined ? multiInputText[field.key] : displayText;
|
const currentInputText = multiInputText[field.key] !== undefined ? multiInputText[field.key] : displayText;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={field.key} id={`input-${field.key}`} className={`space-y-1 select-dropdown-root relative p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`space-y-1 select-dropdown-root relative p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||||||
<label className="block text-xs font-bold text-text-main">{field.label}(可多选)</label>
|
<label className="block text-xs font-bold text-text-main">{field.label}(可多选)</label>
|
||||||
<div
|
<div
|
||||||
className="w-full px-3 py-2 border border-border rounded-lg bg-white flex flex-wrap gap-1 items-center min-h-[42px] cursor-text"
|
className="w-full px-3 py-2 border border-border rounded-lg bg-white flex flex-wrap gap-1 items-center min-h-[42px] cursor-text"
|
||||||
@@ -1735,7 +1758,7 @@ export default function ReportEditor() {
|
|||||||
const { h: h12, isPM } = from24h(h24val);
|
const { h: h12, isPM } = from24h(h24val);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={field.key} id={`input-${field.key}`} className={`space-y-1 p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`space-y-1 p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||||||
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<select
|
<select
|
||||||
@@ -1792,7 +1815,7 @@ export default function ReportEditor() {
|
|||||||
const { h: h12g, isPM: isPMg } = from24h(h24);
|
const { h: h12g, isPM: isPMg } = from24h(h24);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={field.key} id={`input-${field.key}`} className="space-y-1">
|
<div key={field.key} id={`input-${field.key}`} onClick={() => setActiveFieldKey(field.key)} className={`space-y-1 p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}>
|
||||||
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
<label className="block text-xs font-bold text-text-main">{field.label}</label>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<select
|
<select
|
||||||
@@ -2101,7 +2124,7 @@ export default function ReportEditor() {
|
|||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const ts = new Date().toISOString().replace(/[:.]/g, '-');
|
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||||
const title = reportData.title || '无标题';
|
const title = reportData.title || '无标题';
|
||||||
const patient = reportData.patientName || '未知';
|
const patient = reportData.patientName || '未知';
|
||||||
const hid = reportData.hospitalId || '无号';
|
const hid = reportData.hospitalId || '无号';
|
||||||
@@ -2112,7 +2135,7 @@ export default function ReportEditor() {
|
|||||||
>导出 PDF</button>
|
>导出 PDF</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const ts = new Date().toISOString().replace(/[:.]/g, '-');
|
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||||
const title = reportData.title || '无标题';
|
const title = reportData.title || '无标题';
|
||||||
const patient = reportData.patientName || '未知';
|
const patient = reportData.patientName || '未知';
|
||||||
const hid = reportData.hospitalId || '无号';
|
const hid = reportData.hospitalId || '无号';
|
||||||
|
|||||||
@@ -178,7 +178,7 @@ export default function ReportManage() {
|
|||||||
const exportBulkJSON = () => {
|
const exportBulkJSON = () => {
|
||||||
const selectedReports = reports.filter(r => selectedIds.includes(r.id));
|
const selectedReports = reports.filter(r => selectedIds.includes(r.id));
|
||||||
const data = selectedReports.map(r => buildExportData(r));
|
const data = selectedReports.map(r => buildExportData(r));
|
||||||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
const timestamp = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||||
downloadJSON(data, `reports_export_${timestamp}.json`);
|
downloadJSON(data, `reports_export_${timestamp}.json`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -52,6 +52,7 @@ export default function TemplateManage() {
|
|||||||
isOpen: false, rows: '2', cols: '3'
|
isOpen: false, rows: '2', cols: '3'
|
||||||
});
|
});
|
||||||
const [imageAssets, setImageAssets] = useState<{ id: string; name: string; dataUrl: string }[]>([]);
|
const [imageAssets, setImageAssets] = useState<{ id: string; name: string; dataUrl: string }[]>([]);
|
||||||
|
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
||||||
|
|
||||||
const updatePageHeight = () => {
|
const updatePageHeight = () => {
|
||||||
if (!editorRef.current) return;
|
if (!editorRef.current) return;
|
||||||
@@ -498,6 +499,19 @@ export default function TemplateManage() {
|
|||||||
setFormFields(updated);
|
setFormFields(updated);
|
||||||
storage.set('formFieldsConfig', updated);
|
storage.set('formFieldsConfig', updated);
|
||||||
setEditingFieldKey(null);
|
setEditingFieldKey(null);
|
||||||
|
|
||||||
|
// 同步更新编辑器中已插入字段的 classList
|
||||||
|
if (editorRef.current) {
|
||||||
|
const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`);
|
||||||
|
els.forEach(el => {
|
||||||
|
if (editFieldHasUnderline) {
|
||||||
|
el.classList.remove('no-underline');
|
||||||
|
} else {
|
||||||
|
el.classList.add('no-underline');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
saveTemplateContent();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const addField = () => {
|
const addField = () => {
|
||||||
@@ -588,22 +602,49 @@ export default function TemplateManage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleDeleteTemplate = (id: string) => {
|
const handleDeleteTemplate = (id: string) => {
|
||||||
if (templates.length <= 1) {
|
|
||||||
alert('至少需要保留一个模板');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (window.confirm('确定要删除此模板吗?')) {
|
if (window.confirm('确定要删除此模板吗?')) {
|
||||||
const allTemplates = storage.get<Template[]>('templates', []);
|
const allTemplates = storage.get<Template[]>('templates', []);
|
||||||
const updated = allTemplates.filter(t => t.id !== id);
|
const updated = allTemplates.filter(t => t.id !== id);
|
||||||
setTemplates(updated.filter(t => templates.some(x => x.id === t.id)));
|
setTemplates(updated);
|
||||||
storage.set('templates', updated);
|
storage.set('templates', updated);
|
||||||
if (currentTemplateId === id) {
|
if (currentTemplateId === id) {
|
||||||
const visible = updated.filter(t => templates.some(x => x.id === t.id));
|
setCurrentTemplateId(updated[0]?.id || null);
|
||||||
setCurrentTemplateId(visible[0]?.id || null);
|
|
||||||
}
|
}
|
||||||
|
setSelectedIds(prev => prev.filter(sid => sid !== id));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleBatchDelete = () => {
|
||||||
|
if (selectedIds.length === 0) return;
|
||||||
|
if (!window.confirm(`确定要删除选中的 ${selectedIds.length} 个模板吗?`)) return;
|
||||||
|
const allTemplates = storage.get<Template[]>('templates', []);
|
||||||
|
const updated = allTemplates.filter(t => !selectedIds.includes(t.id));
|
||||||
|
setTemplates(updated);
|
||||||
|
storage.set('templates', updated);
|
||||||
|
if (currentTemplateId && selectedIds.includes(currentTemplateId)) {
|
||||||
|
setCurrentTemplateId(updated[0]?.id || null);
|
||||||
|
}
|
||||||
|
setSelectedIds([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBatchExport = () => {
|
||||||
|
if (selectedIds.length === 0) return;
|
||||||
|
const targets = templates.filter(t => selectedIds.includes(t.id));
|
||||||
|
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||||
|
const exportData = {
|
||||||
|
version: '1.0',
|
||||||
|
type: 'surclaw_template_package_batch',
|
||||||
|
templates: targets
|
||||||
|
};
|
||||||
|
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = `模板批量导出-${ts}.json`;
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
};
|
||||||
|
|
||||||
const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const file = e.target.files?.[0];
|
const file = e.target.files?.[0];
|
||||||
if (!file) return;
|
if (!file) return;
|
||||||
@@ -738,45 +779,76 @@ export default function TemplateManage() {
|
|||||||
<Plus size={16} />
|
<Plus size={16} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
{selectedIds.length > 0 && (
|
||||||
|
<div className="px-4 pt-3 pb-1 flex items-center justify-between bg-slate-50 border-b border-border">
|
||||||
|
<span className="text-xs text-text-muted font-bold">已选中 {selectedIds.length} 项</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleBatchExport}
|
||||||
|
className="px-2 py-1 rounded-md bg-blue-50 text-blue-600 text-[10px] font-bold hover:bg-blue-100 transition-colors"
|
||||||
|
>
|
||||||
|
批量导出
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleBatchDelete}
|
||||||
|
className="px-2 py-1 rounded-md bg-red-50 text-red-600 text-[10px] font-bold hover:bg-red-100 transition-colors"
|
||||||
|
>
|
||||||
|
批量删除
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="flex-1 overflow-y-auto p-4 space-y-2">
|
<div className="flex-1 overflow-y-auto p-4 space-y-2">
|
||||||
{templates.map(tpl => (
|
{templates.map(tpl => (
|
||||||
<div
|
<div
|
||||||
key={tpl.id}
|
key={tpl.id}
|
||||||
onClick={() => setCurrentTemplateId(tpl.id)}
|
onClick={() => setCurrentTemplateId(tpl.id)}
|
||||||
className={`p-4 rounded-xl border transition-all group ${
|
className={`p-4 rounded-xl border transition-all group cursor-pointer ${
|
||||||
currentTemplateId === tpl.id
|
currentTemplateId === tpl.id
|
||||||
? 'bg-white border-accent shadow-sm'
|
? 'bg-white border-accent shadow-sm'
|
||||||
: 'bg-transparent border-transparent hover:bg-white hover:border-border'
|
: 'bg-transparent border-transparent hover:bg-white hover:border-border'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="flex justify-between items-start mb-1">
|
<div className="flex items-start gap-2">
|
||||||
<div className={`text-sm font-bold ${currentTemplateId === tpl.id ? 'text-accent' : 'text-text-main'}`}>
|
<input
|
||||||
{tpl.name}
|
type="checkbox"
|
||||||
|
checked={selectedIds.includes(tpl.id)}
|
||||||
|
onChange={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setSelectedIds(prev => e.target.checked ? [...prev, tpl.id] : prev.filter(id => id !== tpl.id));
|
||||||
|
}}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
className="mt-1 shrink-0"
|
||||||
|
/>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex justify-between items-start mb-1">
|
||||||
|
<div className={`text-sm font-bold ${currentTemplateId === tpl.id ? 'text-accent' : 'text-text-main'}`}>
|
||||||
|
{tpl.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] text-text-muted line-clamp-1 mb-2">{tpl.desc || '无描述'}</div>
|
||||||
|
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); handleEditInfo(tpl); }}
|
||||||
|
className="px-2 py-1 rounded-md bg-slate-100 text-slate-600 text-[10px] font-bold hover:bg-slate-200 transition-colors"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); handleExportTemplate(tpl); }}
|
||||||
|
className="px-2 py-1 rounded-md bg-blue-50 text-blue-600 text-[10px] font-bold hover:bg-blue-100 transition-colors"
|
||||||
|
>
|
||||||
|
导出
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); handleDeleteTemplate(tpl.id); }}
|
||||||
|
className="px-2 py-1 rounded-md bg-red-50 text-red-600 text-[10px] font-bold hover:bg-red-100 transition-colors"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-[10px] text-text-muted line-clamp-1 mb-2">{tpl.desc || '无描述'}</div>
|
|
||||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
||||||
<button
|
|
||||||
onClick={(e) => { e.stopPropagation(); handleEditInfo(tpl); }}
|
|
||||||
className="px-2 py-1 rounded-md bg-slate-100 text-slate-600 text-[10px] font-bold hover:bg-slate-200 transition-colors"
|
|
||||||
>
|
|
||||||
编辑
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={(e) => { e.stopPropagation(); handleExportTemplate(tpl); }}
|
|
||||||
className="px-2 py-1 rounded-md bg-blue-50 text-blue-600 text-[10px] font-bold hover:bg-blue-100 transition-colors"
|
|
||||||
>
|
|
||||||
导出
|
|
||||||
</button>
|
|
||||||
{templates.length > 1 && (
|
|
||||||
<button
|
|
||||||
onClick={(e) => { e.stopPropagation(); handleDeleteTemplate(tpl.id); }}
|
|
||||||
className="px-2 py-1 rounded-md bg-red-50 text-red-600 text-[10px] font-bold hover:bg-red-100 transition-colors"
|
|
||||||
>
|
|
||||||
删除
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
{templates.length === 0 && (
|
{templates.length === 0 && (
|
||||||
@@ -1314,7 +1386,7 @@ export default function TemplateManage() {
|
|||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const ts = new Date().toISOString().replace(/[:.]/g, '-');
|
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||||
const name = currentTemplate?.name || '模板';
|
const name = currentTemplate?.name || '模板';
|
||||||
printDocument(editorRef.current?.innerHTML || '', `${name}-${ts}`);
|
printDocument(editorRef.current?.innerHTML || '', `${name}-${ts}`);
|
||||||
setExportModalOpen(false);
|
setExportModalOpen(false);
|
||||||
@@ -1323,7 +1395,7 @@ export default function TemplateManage() {
|
|||||||
>导出 PDF</button>
|
>导出 PDF</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const ts = new Date().toISOString().replace(/[:.]/g, '-');
|
const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16);
|
||||||
const name = currentTemplate?.name || '模板';
|
const name = currentTemplate?.name || '模板';
|
||||||
const data = currentTemplate ? { ...currentTemplate, content: editorRef.current?.innerHTML } : { content: editorRef.current?.innerHTML };
|
const data = currentTemplate ? { ...currentTemplate, content: editorRef.current?.innerHTML } : { content: editorRef.current?.innerHTML };
|
||||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||||
|
|||||||
@@ -121,8 +121,8 @@ export interface FormField {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const DEFAULT_FORM_FIELDS: FormField[] = [
|
export const DEFAULT_FORM_FIELDS: FormField[] = [
|
||||||
{ key: 'patientName', label: '患者姓名', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: true },
|
{ key: 'patientName', label: '患者姓名', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: false },
|
||||||
{ key: 'hospitalId', label: '住院号', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: true },
|
{ key: 'hospitalId', label: '住院号', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: true, hasUnderline: false },
|
||||||
{ key: 'title', label: '手术名称', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
{ key: 'title', label: '手术名称', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
||||||
{ key: 'patientGender', label: '患者性别', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['男', '女'] },
|
{ key: 'patientGender', label: '患者性别', category: '单选', type: 'single_select', visibleInForm: true, isSystemLocked: false, options: ['男', '女'] },
|
||||||
{ key: 'patientAge', label: '患者年龄', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
{ key: 'patientAge', label: '患者年龄', category: '填空', type: 'text', visibleInForm: true, isSystemLocked: false },
|
||||||
|
|||||||
@@ -1,20 +1,20 @@
|
|||||||
const smartField = (key: string) => {
|
const smartField = (key: string) => {
|
||||||
return `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value no-underline" data-bind="${key}" contenteditable="true" style="min-width:32px;padding:0 4px;margin:0 2px;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:1.2;font-size:inherit;vertical-align:text-bottom;box-sizing:border-box;min-height:1.2em;outline:none;"> </span><span class="delete-btn" contenteditable="false">×</span></span>​`;
|
return `<span class="smart-field-wrapper" contenteditable="false" style="white-space:nowrap;position:relative;"><span class="field-value no-underline" data-bind="${key}" contenteditable="true" style="min-width:24px;padding:0 2px;margin:0;border:1px solid #cbd5e1;border-radius:2px;display:inline-block;background:#f8fafc;color:#0f172a;line-height:inherit;font-size:inherit;vertical-align:baseline;box-sizing:border-box;outline:none;text-align:center;"> </span><span class="delete-btn" contenteditable="false">×</span></span>​`;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defaultReportContent = `
|
export const defaultReportContent = `
|
||||||
<div style="display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 4px;">
|
<div style="display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 4px;">
|
||||||
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:65px;height:65px;line-height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;">
|
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:65px;height:65px;line-height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;transform:translate(-5px,-5px);">
|
||||||
<span class="delete-btn" contenteditable="false">×</span>
|
<span class="delete-btn" contenteditable="false">×</span>
|
||||||
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">LOGO</span>
|
<span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">LOGO</span>
|
||||||
</span>
|
</span>
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 0; margin-bottom: 8px; display: inline-block; line-height: 1;">西 安 交 通 大 学 第 一 附 属 医 院</div>
|
<div style="font-size: 14pt; font-family: SimSun; border-bottom: 1px solid #000; padding-bottom: 1px; margin-bottom: 2px; display: inline-block; line-height: 1;">西 安 交 通 大 学 第 一 附 属 医 院</div>
|
||||||
<div style="font-size: 16pt; font-family: SimSun;">手术记录</div>
|
<div style="font-size: 16pt; font-family: SimSun;">手术记录</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; padding: 0 0 1px 0; line-height: 1.2; border-bottom: 1px solid #000;">
|
<p style="font-family: SimSun; font-size: 11pt; font-weight: normal; margin: 0; padding: 0; line-height: 1; border-bottom: 1px solid #000;">
|
||||||
姓名:${smartField('patientName')}
|
姓名:${smartField('patientName')}
|
||||||
性别:${smartField('patientGender')}
|
性别:${smartField('patientGender')}
|
||||||
年龄:${smartField('patientAge')}
|
年龄:${smartField('patientAge')}
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
export const printDocument = (htmlContent: string, docTitle: string = '图文报告') => {
|
export const printDocument = (htmlContent: string, docTitle: string = '图文报告') => {
|
||||||
|
const originalTitle = document.title;
|
||||||
|
document.title = docTitle;
|
||||||
const iframe = document.createElement('iframe');
|
const iframe = document.createElement('iframe');
|
||||||
iframe.style.position = 'fixed';
|
iframe.style.position = 'fixed';
|
||||||
iframe.style.right = '0';
|
iframe.style.right = '0';
|
||||||
@@ -17,6 +19,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<title>${docTitle}</title>
|
||||||
<style>
|
<style>
|
||||||
@page { size: A4; margin: 15mm 10mm; }
|
@page { size: A4; margin: 15mm 10mm; }
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
@@ -34,12 +37,12 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
|
|||||||
.delete-btn { display: none !important; }
|
.delete-btn { display: none !important; }
|
||||||
.image-placeholder:not(.has-image) { display: none !important; }
|
.image-placeholder:not(.has-image) { display: none !important; }
|
||||||
.template-info-section { position: relative; margin-bottom: 16px; }
|
.template-info-section { position: relative; margin-bottom: 16px; }
|
||||||
.smart-field-wrapper { display: inline-flex; align-items: center; margin: 0 2px; vertical-align: text-bottom; }
|
.smart-field-wrapper { display: inline-flex; align-items: baseline; margin: 0; vertical-align: baseline; }
|
||||||
.smart-field-wrapper .field-label { color: #64748b; user-select: none; }
|
.smart-field-wrapper .field-label { color: #64748b; user-select: none; }
|
||||||
.smart-field-wrapper .field-value { min-width: 32px; padding: 0 4px; margin: 0 2px; border: 1px solid #cbd5e1; border-radius: 2px; display: inline-block; background: #f8fafc; color: #0f172a; line-height: 1.2; font-size: inherit; vertical-align: text-bottom; box-sizing: border-box; min-height: 1.2em; outline: none; }
|
.smart-field-wrapper .field-value { min-width: 24px; padding: 0 2px; margin: 0; border: 1px solid #cbd5e1; border-radius: 2px; display: inline-block; background: #f8fafc; color: #0f172a; line-height: inherit; font-size: inherit; vertical-align: baseline; box-sizing: border-box; outline: none; text-align: center; }
|
||||||
.report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
|
.report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
|
||||||
@media print {
|
@media print {
|
||||||
.smart-field-wrapper .field-value { border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px !important; }
|
.smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; line-height: 1 !important; }
|
||||||
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
|
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -53,6 +56,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
|
|||||||
win.focus();
|
win.focus();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
win.print();
|
win.print();
|
||||||
|
document.title = originalTitle;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (iframe.parentNode) document.body.removeChild(iframe);
|
if (iframe.parentNode) document.body.removeChild(iframe);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|||||||
90
工程分析/实现方案-2026-04-18-23-19-44.md
Normal file
90
工程分析/实现方案-2026-04-18-23-19-44.md
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
# 实现方案 —— 2026-04-18-23-19-44
|
||||||
|
|
||||||
|
## 方案目标
|
||||||
|
修复排版对齐问题,优化导出文件名,实现模板批量操作。
|
||||||
|
|
||||||
|
## 需求 1:修复 field-value 输入内容往上飘
|
||||||
|
|
||||||
|
### 修改文件
|
||||||
|
`src/utils/defaultContent.ts`、`src/utils/print.ts`
|
||||||
|
|
||||||
|
### 修改内容
|
||||||
|
- `defaultContent.ts` 中 `smartField()`:
|
||||||
|
- `vertical-align:text-bottom` → `vertical-align:baseline`
|
||||||
|
- `line-height:1.2;min-height:1.2em;` → `line-height:inherit;`
|
||||||
|
- `print.ts` 中 `.field-value` 打印样式同步修改 `vertical-align:baseline; line-height:inherit;`
|
||||||
|
- 打印时下划线 `padding-bottom` 改为 `1px` 以紧贴文字
|
||||||
|
|
||||||
|
## 需求 2、3、4:微调排版间距和 Logo 位置
|
||||||
|
|
||||||
|
### 修改文件
|
||||||
|
`src/utils/defaultContent.ts`
|
||||||
|
|
||||||
|
### 修改内容
|
||||||
|
- 姓名栏横线:`padding-bottom: 1px;`(原来是 `padding: 0 0 1px 0`,可能需要调整)
|
||||||
|
- 手术记录标题:`margin-top: 2px;`(原来是 `margin-bottom: 8px` 等,需要精确调整)
|
||||||
|
- Logo:使用 `position:absolute` 向左上偏移 5px,或调整父容器 `gap`/`margin`
|
||||||
|
|
||||||
|
## 需求 5:导出 PDF 文件名修正
|
||||||
|
|
||||||
|
### 修改文件
|
||||||
|
`src/utils/print.ts`
|
||||||
|
|
||||||
|
### 修改内容
|
||||||
|
在 `printDocument` 函数中:
|
||||||
|
1. 保存原始 `document.title`
|
||||||
|
2. 设置 `document.title = docTitle`
|
||||||
|
3. 打印完成后恢复 `document.title = originalTitle`
|
||||||
|
|
||||||
|
这样浏览器在 `window.print()` 时会使用正确的文件名。
|
||||||
|
|
||||||
|
## 需求 6:导出 JSON 时间使用北京时间
|
||||||
|
|
||||||
|
### 修改文件
|
||||||
|
`src/pages/ReportEditor.tsx`、`src/pages/ReportManage.tsx`、`src/pages/TemplateManage.tsx`
|
||||||
|
|
||||||
|
### 修改内容
|
||||||
|
定义一个全局格式化函数 `getBeijingTimeStr()`:
|
||||||
|
```ts
|
||||||
|
const getBeijingTimeStr = () => {
|
||||||
|
const d = new Date();
|
||||||
|
const bjTime = new Date(d.getTime() + (8 * 60 * 60 * 1000));
|
||||||
|
return bjTime.toISOString().replace(/T/, '-').replace(/:/g, '-').slice(0, 16);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
替换所有 `new Date().toISOString().replace(/[:.]/g, '-')` 的调用。
|
||||||
|
|
||||||
|
## 需求 7:模板管理批量操作
|
||||||
|
|
||||||
|
### 修改文件
|
||||||
|
`src/pages/TemplateManage.tsx`
|
||||||
|
|
||||||
|
### 修改内容
|
||||||
|
1. **新增状态**:`const [selectedIds, setSelectedIds] = useState<string[]>([]);`
|
||||||
|
2. **批量删除**:`handleBatchDelete()` 过滤掉选中 ID,清空 `selectedIds`
|
||||||
|
3. **批量导出**:`handleBatchExport()` 将选中模板打包为 JSON 数组下载
|
||||||
|
4. **UI 调整**:
|
||||||
|
- 模板列表每行前增加复选框
|
||||||
|
- 当有选中项时,显示批量操作工具栏(批量删除 + 批量导出)
|
||||||
|
5. **允许空列表**:移除 `templates.length > 1` 对删除按钮的限制(改为只在批量删除时确认)
|
||||||
|
|
||||||
|
### 冲突检查
|
||||||
|
- 现有 `handleDeleteTemplate` 单个删除逻辑可复用
|
||||||
|
- `Login.tsx` 中的默认模板初始化逻辑需要检查:如果用户删除了所有模板,系统是否会在登录时强制创建默认模板
|
||||||
|
|
||||||
|
## 涉及文件及修改点
|
||||||
|
| 文件 | 修改点 |
|
||||||
|
|------|--------|
|
||||||
|
| `src/utils/defaultContent.ts` | smartField 基线对齐;姓名栏间距;手术记录间距;Logo 位置 |
|
||||||
|
| `src/utils/print.ts` | field-value 打印样式;document.title 动态设置 |
|
||||||
|
| `src/pages/ReportEditor.tsx` | 导出文件名使用北京时间 |
|
||||||
|
| `src/pages/ReportManage.tsx` | 导出文件名使用北京时间 |
|
||||||
|
| `src/pages/TemplateManage.tsx` | 导出文件名使用北京时间;批量操作状态和 UI |
|
||||||
|
|
||||||
|
## 风险与注意事项
|
||||||
|
1. `vertical-align:baseline` 后,需要验证不同字号混合时(如 11pt 正文 + 12pt 字段)的对齐效果。
|
||||||
|
2. Logo 使用 `position:absolute` 时需要确保父容器有 `position:relative`,且不会遮挡其他元素。
|
||||||
|
3. 修改 `document.title` 后需确保在打印失败或用户取消时也能恢复。
|
||||||
|
4. 批量删除后如果 `currentTemplateId` 被删除,需要重置为 `null` 或自动选中其他模板。
|
||||||
|
5. 北京时间计算 `new Date(d.getTime() + (8 * 60 * 60 * 1000))` 在夏令时转换时可能有 1 小时偏差,但中国大陆不使用夏令时,所以安全。
|
||||||
108
工程分析/实现方案-2026-04-18-23-39-35.md
Normal file
108
工程分析/实现方案-2026-04-18-23-39-35.md
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
# 实现方案 —— 2026-04-18-23-39-35
|
||||||
|
|
||||||
|
## 方案目标
|
||||||
|
修复下划线功能、统一导出文件名、缩紧输入框间距、实现表单逆向联动。
|
||||||
|
|
||||||
|
## 需求 1:修复下划线勾选状态异常及打印失效
|
||||||
|
|
||||||
|
### 修改文件 1:`src/types.ts`
|
||||||
|
在 `DEFAULT_FORM_FIELDS` 数组中,为所有字段显式设置 `hasUnderline: false`(如果当前为 `true` 或未指定)。
|
||||||
|
|
||||||
|
### 修改文件 2:`src/pages/TemplateManage.tsx`
|
||||||
|
在编辑字段的回显逻辑中:
|
||||||
|
```ts
|
||||||
|
setEditFieldHasUnderline(field.hasUnderline === true);
|
||||||
|
```
|
||||||
|
确保 `undefined` 时默认不勾选。
|
||||||
|
|
||||||
|
### 修改文件 3:`src/utils/print.ts`
|
||||||
|
恢复默认显示下划线的白名单机制:
|
||||||
|
```css
|
||||||
|
@media print {
|
||||||
|
.smart-field-wrapper .field-value {
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid #000 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 0 2px 0px 2px !important;
|
||||||
|
}
|
||||||
|
.smart-field-wrapper .field-value.no-underline {
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 需求 2:统一 PDF 和 JSON 导出文件名
|
||||||
|
|
||||||
|
### 修改文件:`src/utils/print.ts`
|
||||||
|
确保 `printDocument` 中:
|
||||||
|
1. 保存原始 `document.title`
|
||||||
|
2. 设置 `document.title = docTitle`
|
||||||
|
3. iframe HTML 中也写入 `<title>${docTitle}</title>`
|
||||||
|
4. 打印完成后恢复 `document.title`
|
||||||
|
|
||||||
|
同时检查 `ReportEditor.tsx` 和 `ReportManage.tsx` 中调用 `printDocument` 时传入的 `docTitle` 是否与 JSON 文件名一致。
|
||||||
|
|
||||||
|
## 需求 3:缩紧 field-value 内文字间距
|
||||||
|
|
||||||
|
### 修改文件 1:`src/utils/defaultContent.ts`
|
||||||
|
```ts
|
||||||
|
// padding:0 4px → padding:0 2px
|
||||||
|
// margin:0 2px → margin:0
|
||||||
|
// min-width:32px → min-width:24px
|
||||||
|
// 增加 text-align:center 让文字居中
|
||||||
|
```
|
||||||
|
|
||||||
|
### 修改文件 2:`src/utils/print.ts`
|
||||||
|
同步修改打印样式中的 `.field-value`:
|
||||||
|
```css
|
||||||
|
.smart-field-wrapper .field-value {
|
||||||
|
min-width: 24px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 需求 4:ReportEditor 表单逆向联动
|
||||||
|
|
||||||
|
### 修改文件:`src/pages/ReportEditor.tsx`
|
||||||
|
|
||||||
|
1. **新增 useEffect 监听 activeFieldKey**:
|
||||||
|
```ts
|
||||||
|
useEffect(() => {
|
||||||
|
if (!editorRef.current) return;
|
||||||
|
const allFields = editorRef.current.querySelectorAll('.field-value');
|
||||||
|
allFields.forEach(el => {
|
||||||
|
(el as HTMLElement).style.backgroundColor = '#f8fafc';
|
||||||
|
(el as HTMLElement).style.boxShadow = 'none';
|
||||||
|
});
|
||||||
|
if (activeFieldKey) {
|
||||||
|
const targetEl = editorRef.current.querySelector(`.field-value[data-bind="${activeFieldKey}"]`) as HTMLElement;
|
||||||
|
if (targetEl) {
|
||||||
|
targetEl.style.backgroundColor = '#eff6ff';
|
||||||
|
targetEl.style.boxShadow = '0 0 0 2px #3b82f6';
|
||||||
|
targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [activeFieldKey]);
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **右侧表单添加 onFocus/onClick**:
|
||||||
|
在右侧表单字段容器的 `onClick` 中增加 `setActiveFieldKey(field.key)`,在 input/select 的 `onFocus` 中也增加 `setActiveFieldKey(field.key)`。
|
||||||
|
|
||||||
|
## 涉及文件及修改点
|
||||||
|
| 文件 | 修改点 |
|
||||||
|
|------|--------|
|
||||||
|
| `src/types.ts` | DEFAULT_FORM_FIELDS 中 hasUnderline 设为 false |
|
||||||
|
| `src/pages/TemplateManage.tsx` | 编辑字段回显逻辑 |
|
||||||
|
| `src/utils/print.ts` | 打印下划线白名单机制;document.title 设置;field-value 间距 |
|
||||||
|
| `src/utils/defaultContent.ts` | smartField padding/margin 缩小;text-align:center |
|
||||||
|
| `src/pages/ReportEditor.tsx` | activeFieldKey useEffect 高亮滚动;表单 onFocus 联动 |
|
||||||
|
| `src/pages/ReportManage.tsx` | 检查导出文件名一致性 |
|
||||||
|
|
||||||
|
## 风险与注意事项
|
||||||
|
1. `DEFAULT_FORM_FIELDS` 修改后,现有用户的 localStorage 中已保存的字段配置不会自动更新,需要手动编辑或清除 `formFieldsConfig` 才能看到效果。
|
||||||
|
2. `activeFieldKey` 的 useEffect 直接操作 DOM style,需要确保在组件卸载或切换 tab 时清除高亮。
|
||||||
|
3. 缩小 padding/margin 后,需要验证在表格单元格(td)内的显示是否正常。
|
||||||
|
4. 打印样式中 `.field-value.no-underline` 的优先级必须高于基础 `.field-value` 规则。
|
||||||
65
工程分析/实现方案-2026-04-19-00-01-50.md
Normal file
65
工程分析/实现方案-2026-04-19-00-01-50.md
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
# 实现方案 —— 2026-04-19-00-01-50
|
||||||
|
|
||||||
|
## 方案目标
|
||||||
|
修复高亮样式、实现点击空白取消、阻断打印高亮、同步字段下划线配置到已插入的 DOM。
|
||||||
|
|
||||||
|
## 需求 1 & 2:优化高亮样式、点击空白取消、阻断打印
|
||||||
|
|
||||||
|
### 修改文件 1:`src/pages/ReportEditor.tsx`
|
||||||
|
|
||||||
|
1. **点击空白取消高亮**:在 `handleEditorClick` 中,如果点击目标不是 `.field-value`,则设置 `setActiveFieldKey(null)`。
|
||||||
|
|
||||||
|
2. **柔和高亮样式**:修改 `activeFieldKey` 的 `useEffect`:
|
||||||
|
- 清除样式时:恢复为 `''`(空字符串)而非硬编码颜色,让 CSS 类重新接管
|
||||||
|
- 高亮时:`backgroundColor: '#f1f5f9'`(浅灰)、`outline: '1px solid #94a3b8'`(细灰边框)、`outlineOffset: '1px'`
|
||||||
|
- 不再使用 `box-shadow`
|
||||||
|
|
||||||
|
### 修改文件 2:`src/utils/print.ts`
|
||||||
|
|
||||||
|
在 `@media print` 中强制抹除 `outline` 和 `box-shadow`:
|
||||||
|
```css
|
||||||
|
@media print {
|
||||||
|
.smart-field-wrapper .field-value {
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid #000 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 0 2px 1px 2px !important;
|
||||||
|
}
|
||||||
|
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 需求 3:修复下划线勾选无效
|
||||||
|
|
||||||
|
### 修改文件:`src/pages/TemplateManage.tsx`
|
||||||
|
|
||||||
|
在 `saveFieldEdit` 函数中,保存字段配置后,扫描编辑器中所有 `data-bind` 匹配的 `.field-value`,根据新的 `hasUnderline` 值动态添加/移除 `.no-underline` 类:
|
||||||
|
```ts
|
||||||
|
if (editorRef.current) {
|
||||||
|
const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${editingFieldId}"]`);
|
||||||
|
els.forEach(el => {
|
||||||
|
if (editFieldHasUnderline) {
|
||||||
|
el.classList.remove('no-underline');
|
||||||
|
} else {
|
||||||
|
el.classList.add('no-underline');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
saveTemplateContent();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 涉及文件及修改点
|
||||||
|
| 文件 | 修改点 |
|
||||||
|
|------|--------|
|
||||||
|
| `src/pages/ReportEditor.tsx` | handleEditorClick 点击空白取消高亮;useEffect 柔和高亮样式 |
|
||||||
|
| `src/utils/print.ts` | @media print 强制抹除 outline/box-shadow |
|
||||||
|
| `src/pages/TemplateManage.tsx` | saveFieldEdit 同步更新已插入字段的 classList |
|
||||||
|
|
||||||
|
## 风险与注意事项
|
||||||
|
1. `handleEditorClick` 中增加 `setActiveFieldKey(null)` 时,需确保不会影响 `.image-placeholder` 的点击处理逻辑(placeholder 点击在 field-value 判断之后)。
|
||||||
|
2. `useEffect` 中清除样式时使用 `style.backgroundColor = ''` 而非 `= '#f8fafc'`,这样可以让元素的 CSS 类样式重新生效,避免硬编码颜色与 CSS 类冲突。
|
||||||
|
3. `saveFieldEdit` 中扫描 DOM 并修改 classList 后,必须调用 `saveTemplateContent()` 将变更持久化到 localStorage。
|
||||||
|
4. 打印样式中 `outline: none !important` 和 `box-shadow: none !important` 的优先级需确保高于任何内联样式。
|
||||||
37
工程分析/实现方案-2026-04-19-00-13-20.md
Normal file
37
工程分析/实现方案-2026-04-19-00-13-20.md
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
# 实现方案 —— 2026-04-19-00-13-20
|
||||||
|
|
||||||
|
## 方案目标
|
||||||
|
使打印/PDF导出时 `.field-value` 的下划线紧贴文字底部。
|
||||||
|
|
||||||
|
## 修改点
|
||||||
|
|
||||||
|
### 修改文件:`src/utils/print.ts`
|
||||||
|
|
||||||
|
在 `@media print` 的 `.smart-field-wrapper .field-value` 样式中增加 `line-height: 1 !important;`。
|
||||||
|
|
||||||
|
**原因**:即使 `padding-bottom` 已设为 `0px`,父级文档的 `line-height: 1.5` 仍会在文字下方保留不可见的行高留白。通过强制压缩行高到 `1`,可以消除底部留白,使 `border-bottom` 紧贴文字。
|
||||||
|
|
||||||
|
```css
|
||||||
|
@media print {
|
||||||
|
.smart-field-wrapper .field-value {
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid #000 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 0 2px 0px 2px !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
}
|
||||||
|
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 涉及文件及修改点
|
||||||
|
| 文件 | 修改点 |
|
||||||
|
|------|--------|
|
||||||
|
| `src/utils/print.ts` | @media print 中 .field-value 增加 line-height: 1 !important |
|
||||||
|
|
||||||
|
## 风险与注意事项
|
||||||
|
1. `line-height: 1` 会显著压缩行高,但由于 `.field-value` 在打印时已经是 `inline-block` 且独立显示,不会影响周围段落的整体行距。
|
||||||
|
2. `!important` 确保优先级高于任何内联样式。
|
||||||
41
工程分析/实现方案-2026-04-19-00-24-02.md
Normal file
41
工程分析/实现方案-2026-04-19-00-24-02.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# 实现方案 —— 2026-04-19-00-24-02
|
||||||
|
|
||||||
|
## 方案目标
|
||||||
|
完善 Dashboard 数据概览:新增全部报告卡片、修复图表重叠、增加时间维度切换。
|
||||||
|
|
||||||
|
## 需求 1:新增"全部报告总数"卡片
|
||||||
|
|
||||||
|
### 修改文件:`src/pages/Dashboard.tsx`
|
||||||
|
|
||||||
|
1. **扩展 stats 结构**:增加 `totalCount` 字段,表示全部报告总数(原 `reportCount` 改为仅统计本月)。
|
||||||
|
2. **更新计算逻辑**:在 useEffect 中计算 `userReports.length` 作为 `totalCount`,原 `reportCount` 保留为当月数量。
|
||||||
|
3. **调整卡片布局**:将原来的 4 卡片网格改为包含 5 个统计项,或保持 4 卡片但替换/调整内容。根据用户要求,在"本月报告总数"左侧插入"全部报告总数",并将网格列数从 4 改为 5(`lg:grid-cols-5`)或保持 4 列但替换其中一个卡片。
|
||||||
|
|
||||||
|
## 需求 2:修复图表日期文字与 X 轴重叠
|
||||||
|
|
||||||
|
### 修改文件:`src/pages/Dashboard.tsx`
|
||||||
|
|
||||||
|
1. **增大底部留白**:将 Canvas 的 `padding` 或图表绘制区域的高度计算中加入更大的底部偏移(如 `bottomPadding = 30` 而非原来的 10)。
|
||||||
|
2. **调整文字 Y 坐标**:将 `ctx.fillText(label, x, h - 10)` 改为 `ctx.fillText(label, x, h - 5)` 或更下方,确保文字不会与 X 轴线(通常在 `h - padding` 位置绘制)重叠。
|
||||||
|
3. **调整字体大小**:30 天模式下缩小字体到 9px,避免文字过密。
|
||||||
|
|
||||||
|
## 需求 3:时间维度切换
|
||||||
|
|
||||||
|
### 修改文件:`src/pages/Dashboard.tsx`
|
||||||
|
|
||||||
|
1. **增加状态**:`const [timeRange, setTimeRange] = useState<'7days' | '1month'>('7days');`
|
||||||
|
2. **响应式计算**:将 `useEffect` 的依赖数组增加 `timeRange`,当切换时重新计算 `trend` 和 `trendLabels`。
|
||||||
|
3. **标签格式化**:
|
||||||
|
- 7 天模式:显示 `MM-DD`(如 04-13)
|
||||||
|
- 30 天模式:显示 `DD`(如 13),避免过密
|
||||||
|
4. **UI 控件**:在图表标题右侧增加切换按钮组(最近 7 天 / 最近 30 天)。
|
||||||
|
|
||||||
|
## 涉及文件及修改点
|
||||||
|
| 文件 | 修改点 |
|
||||||
|
|------|--------|
|
||||||
|
| `src/pages/Dashboard.tsx` | stats 结构扩展、totalCount 计算、卡片布局调整、timeRange 状态、趋势数据响应式计算、Canvas 绘制坐标修复、时间切换 UI |
|
||||||
|
|
||||||
|
## 风险与注意事项
|
||||||
|
1. 原代码中 `reportCount` 可能表示的是全部报告数,需要确认其原意。如果原意是全部报告数,则需要新增 `monthCount` 而非修改 `reportCount`。根据用户方案,将 `reportCount` 改为当月数,`totalCount` 为全部数。
|
||||||
|
2. Canvas 绘制中 `padding`、`chartH` 的计算需要同步调整,确保数据线不会画到文字区域。
|
||||||
|
3. 30 天模式下数据点密集,需要考虑是否跳点显示标签(如只显示奇数天)。
|
||||||
34
工程分析/实现方案-2026-04-19-00-33-44.md
Normal file
34
工程分析/实现方案-2026-04-19-00-33-44.md
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
# 实现方案 —— 2026-04-19-00-33-44
|
||||||
|
|
||||||
|
## 方案目标
|
||||||
|
解决 30 天趋势图表过密问题,通过稀疏化标签 + Tooltip 提升可读性。
|
||||||
|
|
||||||
|
## 修改点
|
||||||
|
|
||||||
|
### 修改文件:`src/pages/Dashboard.tsx`
|
||||||
|
|
||||||
|
1. **条件渲染数据点和数值**:在 SVG 的 `points.map()` 中,对圆点和数值文本增加条件判断:
|
||||||
|
- 7 天模式:正常显示圆点和数值
|
||||||
|
- 30 天模式:不显示圆点和数值文本(仅保留折线和面积图)
|
||||||
|
|
||||||
|
2. **稀疏化 X 轴标签**:
|
||||||
|
- 7 天模式:每天显示标签
|
||||||
|
- 30 天模式:每隔 5 天显示一次标签(`i % 5 === 0`)
|
||||||
|
|
||||||
|
3. **SVG 鼠标事件与 Tooltip**:
|
||||||
|
- 在图表容器上绑定 `onMouseMove` 和 `onMouseLeave`
|
||||||
|
- 计算鼠标在 SVG 坐标系中的相对位置,映射到最近的数据点索引
|
||||||
|
- 用 React state 管理 `tooltipData: { index, x, y, visible }`
|
||||||
|
- 用绝对定位的 div 渲染 Tooltip,显示日期和数值
|
||||||
|
|
||||||
|
4. **透明捕获层**:在 SVG 中增加一个覆盖整个图表区域的透明 `<rect>`,确保鼠标在空白区域也能触发事件。
|
||||||
|
|
||||||
|
## 涉及文件及修改点
|
||||||
|
| 文件 | 修改点 |
|
||||||
|
|------|--------|
|
||||||
|
| `src/pages/Dashboard.tsx` | 条件渲染 circle/text、标签稀疏化、Tooltip state、SVG 鼠标事件、透明捕获层 |
|
||||||
|
|
||||||
|
## 风险与注意事项
|
||||||
|
1. Tooltip 坐标计算需考虑 SVG 的 viewBox 到屏幕像素的映射比例。
|
||||||
|
2. 鼠标移出 SVG 区域时必须隐藏 Tooltip。
|
||||||
|
3. 7 天模式的显示效果必须保持完全不变。
|
||||||
73
工程分析/测试方案-2026-04-18-23-19-44.md
Normal file
73
工程分析/测试方案-2026-04-18-23-19-44.md
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
# 测试方案 —— 2026-04-18-23-19-44
|
||||||
|
|
||||||
|
## 测试目标
|
||||||
|
验证排版修复、导出文件名优化和模板批量操作的正确性。
|
||||||
|
|
||||||
|
## 测试用例
|
||||||
|
|
||||||
|
### TC-1:field-value 文字与正文齐平
|
||||||
|
**前置条件**:新建报告,加载默认模板。
|
||||||
|
**步骤**:
|
||||||
|
1. 在「姓名」字段中输入文字。
|
||||||
|
2. 观察文字与「姓名:」的基线对齐情况。
|
||||||
|
**预期结果**:字段中的文字与周围正文在同一水平线上,无明显上浮。
|
||||||
|
|
||||||
|
### TC-2:打印时下划线紧贴文字
|
||||||
|
**前置条件**:模板中有带下划线的字段。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击打印预览。
|
||||||
|
2. 观察下划线与文字的距离。
|
||||||
|
**预期结果**:下划线与文字底部距离约 1px,不悬空。
|
||||||
|
|
||||||
|
### TC-3:排版间距微调
|
||||||
|
**前置条件**:默认模板已加载。
|
||||||
|
**步骤**:
|
||||||
|
1. 观察「姓名:」与下方横线的距离。
|
||||||
|
2. 观察「手术记录」与上方横线的距离。
|
||||||
|
3. 观察 Logo 与医院名称的相对位置。
|
||||||
|
**预期结果**:
|
||||||
|
- 姓名栏横线紧贴文字下方(约 1px)
|
||||||
|
- 手术记录距上方横线约 2px
|
||||||
|
- Logo 比原来偏左上约 5px
|
||||||
|
|
||||||
|
### TC-4:导出 PDF 文件名正确
|
||||||
|
**前置条件**:报告已填写完整信息。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击「导出报告」→「导出 PDF」。
|
||||||
|
**预期结果**:浏览器保存对话框中的默认文件名为 `图文报告-{title}-{patient}-{hid}-{time}.pdf`,而非「My Google AI Studio App.pdf」。
|
||||||
|
|
||||||
|
### TC-5:导出 JSON 时间使用北京时间
|
||||||
|
**前置条件**:任意可导出 JSON 的页面。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击导出 JSON。
|
||||||
|
2. 查看文件名中的时间戳。
|
||||||
|
**预期结果**:时间戳为北京时间(如当前是北京时间 23:19,文件名中应显示 23-19 而非 15-19)。
|
||||||
|
|
||||||
|
### TC-6:模板批量删除
|
||||||
|
**前置条件**:模板列表中有多个模板。
|
||||||
|
**步骤**:
|
||||||
|
1. 选中 2 个模板的复选框。
|
||||||
|
2. 点击「批量删除」。
|
||||||
|
3. 确认删除。
|
||||||
|
**预期结果**:选中的模板被删除,列表中不再显示。未选中的模板保留。
|
||||||
|
|
||||||
|
### TC-7:模板批量导出
|
||||||
|
**前置条件**:模板列表中有多个模板。
|
||||||
|
**步骤**:
|
||||||
|
1. 选中 2 个模板的复选框。
|
||||||
|
2. 点击「批量导出」。
|
||||||
|
**预期结果**:下载的 JSON 文件包含 2 个模板的完整数据(名称、描述、内容、字段配置)。
|
||||||
|
|
||||||
|
### TC-8:允许空模板列表
|
||||||
|
**前置条件**:模板列表中有模板。
|
||||||
|
**步骤**:
|
||||||
|
1. 选中所有模板并批量删除。
|
||||||
|
**预期结果**:列表显示为空,无报错。
|
||||||
|
|
||||||
|
## 回归测试
|
||||||
|
- 确保打印功能正常,样式无异常。
|
||||||
|
- 确保单个模板导出/导入功能正常。
|
||||||
|
- 确保报告编辑、保存、加载功能正常。
|
||||||
|
|
||||||
|
## 测试通过标准
|
||||||
|
所有用例均通过,无控制台报错,排版对齐准确,文件名正确。
|
||||||
64
工程分析/测试方案-2026-04-18-23-39-35.md
Normal file
64
工程分析/测试方案-2026-04-18-23-39-35.md
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
# 测试方案 —— 2026-04-18-23-39-35
|
||||||
|
|
||||||
|
## 测试目标
|
||||||
|
验证下划线修复、文件名统一、间距缩紧和双向联动的正确性。
|
||||||
|
|
||||||
|
## 测试用例
|
||||||
|
|
||||||
|
### TC-1:基础字段默认不勾选下划线
|
||||||
|
**前置条件**:进入模板管理 → 字段管理。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击「患者姓名」或「住院号」的编辑按钮。
|
||||||
|
**预期结果**:「打印时显示下划线」复选框默认未勾选。
|
||||||
|
|
||||||
|
### TC-2:勾选下划线后打印生效
|
||||||
|
**前置条件**:某个字段已勾选「打印时显示下划线」。
|
||||||
|
**步骤**:
|
||||||
|
1. 在编辑器中插入该字段。
|
||||||
|
2. 点击打印预览。
|
||||||
|
**预期结果**:该字段显示下划线,且下划线紧贴文字底部。
|
||||||
|
|
||||||
|
### TC-3:未勾选下划线打印不显示
|
||||||
|
**前置条件**:某个字段未勾选下划线。
|
||||||
|
**步骤**:
|
||||||
|
1. 在编辑器中插入该字段。
|
||||||
|
2. 点击打印预览。
|
||||||
|
**预期结果**:该字段不显示下划线。
|
||||||
|
|
||||||
|
### TC-4:PDF 与 JSON 文件名一致
|
||||||
|
**前置条件**:报告已填写完整信息。
|
||||||
|
**步骤**:
|
||||||
|
1. 分别点击「导出 PDF」和「导出 JSON」。
|
||||||
|
**预期结果**:两个文件的文件名前缀完全一致(如 `图文报告-腹腔镜胆囊切除术报告-未知-无号-2026-04-18T23-28`)。
|
||||||
|
|
||||||
|
### TC-5:field-value 间距缩紧
|
||||||
|
**前置条件**:模板中有 field-value 字段。
|
||||||
|
**步骤**:
|
||||||
|
1. 观察字段框内文字与边框的距离。
|
||||||
|
2. 打印预览中观察间距。
|
||||||
|
**预期结果**:文字紧贴边框,左右无明显空白。
|
||||||
|
|
||||||
|
### TC-6:表单逆向联动
|
||||||
|
**前置条件**:ReportEditor 已加载默认模板。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击右侧「基本信息」中「手术名称」输入框。
|
||||||
|
2. 观察中间模板区域。
|
||||||
|
**预期结果**:
|
||||||
|
- 中间模板中「手术名称」字段高亮显示(蓝色背景 + 蓝色描边)。
|
||||||
|
- 页面平滑滚动到该字段位置(视野中央)。
|
||||||
|
|
||||||
|
### TC-7:正向联动仍正常
|
||||||
|
**前置条件**:ReportEditor 已加载默认模板。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击中间模板中的「患者姓名」字段。
|
||||||
|
**预期结果**:
|
||||||
|
- 右侧表单中高亮「患者姓名」输入框。
|
||||||
|
- 右侧滚动到该输入框位置。
|
||||||
|
|
||||||
|
## 回归测试
|
||||||
|
- 确保字段插入、编辑、删除功能正常。
|
||||||
|
- 确保打印样式正常,所有字段类型显示正确。
|
||||||
|
- 确保视频分析、图片占位符功能正常。
|
||||||
|
|
||||||
|
## 测试通过标准
|
||||||
|
所有用例均通过,无控制台报错,下划线逻辑正确,双向联动流畅。
|
||||||
48
工程分析/测试方案-2026-04-19-00-01-50.md
Normal file
48
工程分析/测试方案-2026-04-19-00-01-50.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# 测试方案 —— 2026-04-19-00-01-50
|
||||||
|
|
||||||
|
## 测试目标
|
||||||
|
验证高亮样式修复、点击空白取消、打印纯净度、下划线同步的有效性。
|
||||||
|
|
||||||
|
## 测试用例
|
||||||
|
|
||||||
|
### TC-1:高亮样式柔和
|
||||||
|
**前置条件**:ReportEditor 已加载默认模板。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击中间模板中的任意字段。
|
||||||
|
**预期结果**:字段显示浅灰色背景和细灰边框(不再是刺眼的蓝色)。
|
||||||
|
|
||||||
|
### TC-2:点击空白取消高亮
|
||||||
|
**前置条件**:ReportEditor 中某个字段已被高亮。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击模板中的空白区域(非字段、非占位符)。
|
||||||
|
**预期结果**:字段高亮样式消失,恢复为默认状态。
|
||||||
|
|
||||||
|
### TC-3:打印不带高亮框
|
||||||
|
**前置条件**:ReportEditor 中某个字段处于高亮状态。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击打印预览。
|
||||||
|
**预期结果**:打印内容中不显示任何高亮框、outline 或 box-shadow,字段显示正常。
|
||||||
|
|
||||||
|
### TC-4:勾选下划线后打印生效
|
||||||
|
**前置条件**:TemplateManage 中某字段已插入模板,且未勾选下划线。
|
||||||
|
**步骤**:
|
||||||
|
1. 在字段管理中勾选该字段的「打印时显示下划线」。
|
||||||
|
2. 保存字段编辑。
|
||||||
|
3. 在 ReportEditor 中打印预览。
|
||||||
|
**预期结果**:该字段显示下划线。
|
||||||
|
|
||||||
|
### TC-5:取消下划线后打印不显示
|
||||||
|
**前置条件**:TemplateManage 中某字段已勾选下划线并保存。
|
||||||
|
**步骤**:
|
||||||
|
1. 取消勾选该字段的「打印时显示下划线」。
|
||||||
|
2. 保存字段编辑。
|
||||||
|
3. 在 ReportEditor 中打印预览。
|
||||||
|
**预期结果**:该字段不显示下划线。
|
||||||
|
|
||||||
|
## 回归测试
|
||||||
|
- 确保字段插入、编辑、删除功能正常。
|
||||||
|
- 确保双向联动(中间点击→右侧高亮、右侧点击→中间高亮)正常。
|
||||||
|
- 确保打印样式整体正常。
|
||||||
|
|
||||||
|
## 测试通过标准
|
||||||
|
所有用例均通过,无控制台报错,打印内容纯净无高亮残留。
|
||||||
26
工程分析/测试方案-2026-04-19-00-13-20.md
Normal file
26
工程分析/测试方案-2026-04-19-00-13-20.md
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
# 测试方案 —— 2026-04-19-00-13-20
|
||||||
|
|
||||||
|
## 测试目标
|
||||||
|
验证打印时下划线是否紧贴文字底部。
|
||||||
|
|
||||||
|
## 测试用例
|
||||||
|
|
||||||
|
### TC-1:有下划线字段紧贴文字
|
||||||
|
**前置条件**:ReportEditor 中某字段(如术前诊断)已勾选「打印时显示下划线」。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击打印预览。
|
||||||
|
**预期结果**:该字段的下划线(黑线)紧贴文字底部,无明显间距。
|
||||||
|
|
||||||
|
### TC-2:无下划线字段不受影响
|
||||||
|
**前置条件**:某字段带有 `.no-underline` 类。
|
||||||
|
**步骤**:
|
||||||
|
1. 点击打印预览。
|
||||||
|
**预期结果**:该字段不显示下划线,排版正常。
|
||||||
|
|
||||||
|
### TC-3:屏幕编辑态不受影响
|
||||||
|
**步骤**:
|
||||||
|
1. 在 ReportEditor 中查看字段。
|
||||||
|
**预期结果**:屏幕上的 `.field-value` 行高保持原样,未被压缩。
|
||||||
|
|
||||||
|
## 测试通过标准
|
||||||
|
打印内容中下划线紧贴文字,无多余留白,屏幕编辑态正常。
|
||||||
38
工程分析/测试方案-2026-04-19-00-24-02.md
Normal file
38
工程分析/测试方案-2026-04-19-00-24-02.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
# 测试方案 —— 2026-04-19-00-24-02
|
||||||
|
|
||||||
|
## 测试目标
|
||||||
|
验证 Dashboard 新增卡片、图表修复、时间切换功能的正确性。
|
||||||
|
|
||||||
|
## 测试用例
|
||||||
|
|
||||||
|
### TC-1:全部报告总数卡片显示正确
|
||||||
|
**步骤**:
|
||||||
|
1. 登录后进入 Dashboard。
|
||||||
|
**预期结果**:顶部统计卡片区域显示"全部报告总数",数值等于当前用户可见的所有报告数量。
|
||||||
|
|
||||||
|
### TC-2:本月报告总数不受全部报告卡片影响
|
||||||
|
**步骤**:
|
||||||
|
1. 查看"本月报告总数"卡片。
|
||||||
|
**预期结果**:数值仅统计当月(YYYY-MM)创建的报告,非全部报告。
|
||||||
|
|
||||||
|
### TC-3:7 天趋势图表正常
|
||||||
|
**步骤**:
|
||||||
|
1. 默认进入 Dashboard,图表显示"最近 7 天"。
|
||||||
|
**预期结果**:X 轴显示 7 个日期标签(MM-DD 格式),无重叠,数据点与折线正确对应。
|
||||||
|
|
||||||
|
### TC-4:30 天趋势图表正常
|
||||||
|
**步骤**:
|
||||||
|
1. 点击"最近 30 天"按钮。
|
||||||
|
**预期结果**:图表重新渲染,X 轴显示 30 个日期标签(DD 格式),无重叠,趋势数据正确。
|
||||||
|
|
||||||
|
### TC-5:日期文字不与轴线重叠
|
||||||
|
**步骤**:
|
||||||
|
1. 在 7 天和 30 天两种模式下查看图表底部。
|
||||||
|
**预期结果**:日期文字清晰可见,不与 X 轴线或数据点重叠。
|
||||||
|
|
||||||
|
## 回归测试
|
||||||
|
- 确保今日新增报告、模板数、用户/部门数等其他统计卡片正常显示。
|
||||||
|
- 确保页面无控制台报错。
|
||||||
|
|
||||||
|
## 测试通过标准
|
||||||
|
所有用例通过,图表在不同时间维度下均正常渲染,无文字重叠。
|
||||||
29
工程分析/测试方案-2026-04-19-00-33-44.md
Normal file
29
工程分析/测试方案-2026-04-19-00-33-44.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# 测试方案 —— 2026-04-19-00-33-44
|
||||||
|
|
||||||
|
## 测试目标
|
||||||
|
验证 30 天趋势图表稀疏化显示和 Tooltip 交互的正确性。
|
||||||
|
|
||||||
|
## 测试用例
|
||||||
|
|
||||||
|
### TC-1:30 天模式不显示圆点和数值
|
||||||
|
**步骤**:
|
||||||
|
1. 进入 Dashboard,点击"最近 30 天"。
|
||||||
|
**预期结果**:图表中仅显示面积图和折线,无蓝色圆点和数字 0/1/2... 等数值文本。
|
||||||
|
|
||||||
|
### TC-2:30 天模式标签稀疏化
|
||||||
|
**步骤**:
|
||||||
|
1. 查看 30 天模式 X 轴。
|
||||||
|
**预期结果**:仅显示约 6 个日期标签(每隔 5 天一个),标签不重叠。
|
||||||
|
|
||||||
|
### TC-3:Tooltip 悬停显示
|
||||||
|
**步骤**:
|
||||||
|
1. 在 30 天模式图表上移动鼠标。
|
||||||
|
**预期结果**:鼠标旁出现 Tooltip,显示当前位置的日期和报告数量;移出图表区域后 Tooltip 消失。
|
||||||
|
|
||||||
|
### TC-4:7 天模式不受影响
|
||||||
|
**步骤**:
|
||||||
|
1. 点击"最近 7 天"。
|
||||||
|
**预期结果**:每天显示圆点、数值和标签,无 Tooltip 行为(或 Tooltip 可选),与修改前完全一致。
|
||||||
|
|
||||||
|
## 测试通过标准
|
||||||
|
30 天模式图表清爽可读,Tooltip 交互流畅,7 天模式无变化。
|
||||||
237
工程分析/经验记录.md
237
工程分析/经验记录.md
@@ -1075,3 +1075,240 @@ if ((settings.autoInsertDelay || 0) > 0) {
|
|||||||
- 当扩展数据类型(如 Template 接口)时,应评估是否需要同步修改所有使用该类型的持久化/序列化逻辑(如 storage 读写、导入/导出)。
|
- 当扩展数据类型(如 Template 接口)时,应评估是否需要同步修改所有使用该类型的持久化/序列化逻辑(如 storage 读写、导入/导出)。
|
||||||
- 默认模板中的占位符结构必须与运行时插入逻辑保持完全一致(`display`、居中方式、`data-mode` 等),任何差异都可能导致交互体验不一致。
|
- 默认模板中的占位符结构必须与运行时插入逻辑保持完全一致(`display`、居中方式、`data-mode` 等),任何差异都可能导致交互体验不一致。
|
||||||
- 新增文件上传/导入功能时,必须在 onChange 事件末尾清空 `e.target.value = ''`,否则同一文件无法重复选择。
|
- 新增文件上传/导入功能时,必须在 onChange 事件末尾清空 `e.target.value = ''`,否则同一文件无法重复选择。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 记录 35:字段默认不下划线与占位符文字居中修复
|
||||||
|
|
||||||
|
**A. 具体问题**
|
||||||
|
1. 模板管理中新增字段时,「打印时显示下划线」复选框默认勾选,用户希望改为默认不勾选。
|
||||||
|
2. 删除图片占位符中的图片后,提示文字(如「插入/点击放置图片」)在虚线框内偏左,未真正居中。
|
||||||
|
|
||||||
|
**B. 产生问题原因**
|
||||||
|
1. `newFieldHasUnderline` 和 `editFieldHasUnderline` 的 `useState` 默认值为 `true`;`insertSmartField` 中的判断逻辑是 `field.hasUnderline === false ? ' no-underline' : ''`,导致只有显式关闭时才无下划线。
|
||||||
|
2. 虽然给 `.placeholder-text` 使用了 `position:absolute + transform:translate(-50%, -50%)` 实现居中,但元素本身设置了 `display:block; width:100%`,其内部文本流默认 `text-align:left`,导致文字靠左。
|
||||||
|
3. 上一轮对 `TemplateManage.tsx` 中 `handleEditorClick` 删除恢复逻辑的修改未完全生效,该文件中的删除恢复逻辑仍使用旧代码(无 absolute 定位、无尺寸恢复)。
|
||||||
|
|
||||||
|
**C. 解决问题方案**
|
||||||
|
1. **字段默认不下划线**:
|
||||||
|
- `src/pages/TemplateManage.tsx`:`newFieldHasUnderline` 和 `editFieldHasUnderline` 默认值从 `true` 改为 `false`
|
||||||
|
- `src/pages/TemplateManage.tsx`:`insertSmartField` 中判断改为 `field.hasUnderline !== true ? ' no-underline' : ''`
|
||||||
|
- `src/pages/TemplateManage.tsx`:编辑字段回显改为 `field.hasUnderline ?? false`
|
||||||
|
- `src/utils/defaultContent.ts`:移除 `noUnderlineKeys` 数组,`smartField()` 直接给所有字段加 `.no-underline`
|
||||||
|
2. **占位符文字居中**:
|
||||||
|
- 在所有 `.placeholder-text` 的 style 中追加 `text-align:center;`
|
||||||
|
- 修改范围覆盖 `src/utils/defaultContent.ts`(8 个占位符)、`src/pages/ReportEditor.tsx`(3 处)、`src/pages/TemplateManage.tsx`(3 处)
|
||||||
|
- 补全 `TemplateManage.tsx` 中 `handleEditorClick` 删除恢复逻辑的旧代码,添加 absolute 居中、尺寸恢复、`text-align:center`
|
||||||
|
|
||||||
|
**D. 后续如何避免问题**
|
||||||
|
- 当修改默认值(如 `useState(true)` → `useState(false)`)时,应同时检查所有回显/回退逻辑(如 `field.hasUnderline !== false` → `field.hasUnderline ?? false`),确保数据兼容性。
|
||||||
|
- 使用 `display:block; width:100%` 的绝对居中元素,必须显式设置 `text-align:center;` 以控制内部文本流的对齐方向。
|
||||||
|
- 批量替换字符串时,应通过 grep 验证所有匹配位置是否都已更新,避免遗漏(如此次 `TemplateManage.tsx` 中 handleEditorClick 的旧代码)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 记录 36:七项排版与功能优化集中实施
|
||||||
|
|
||||||
|
**A. 具体问题**
|
||||||
|
1. `.field-value` 输入框中的文字与正文不在同一基线上,视觉上向上偏移。
|
||||||
|
2. 「姓名:」下方横线与文字之间距离过大。
|
||||||
|
3. 「手术记录」标题与上方医院名称横线之间距离过大。
|
||||||
|
4. Logo 占位符相对于医院名称文字整体偏右下。
|
||||||
|
5. 导出 PDF 时浏览器默认文件名为「My Google AI Studio App.pdf」,而非自定义名称。
|
||||||
|
6. 导出 JSON 文件名中的时间戳使用 UTC 时间,不符合国内用户习惯。
|
||||||
|
7. 模板管理模块缺乏批量操作能力,只能逐个删除/导出。
|
||||||
|
|
||||||
|
**B. 产生问题原因**
|
||||||
|
1. `smartField()` 中使用了 `vertical-align:text-bottom` 和 `line-height:1.2;min-height:1.2em`,导致内联块元素基线计算偏移。
|
||||||
|
2. 姓名栏 `<p>` 的 `padding-bottom:1px` 叠加 `line-height:1.2`,导致 border-bottom 距文字约 2-3px。
|
||||||
|
3. 医院名称的 `margin-bottom:8px` 过大。
|
||||||
|
4. Logo 位于 flex 容器中,使用默认的 `gap:12px` 和 `align-items:center`,位置不够精确。
|
||||||
|
5. `printDocument()` 虽接受 `docTitle` 参数并写入 iframe 的 `<title>`,但浏览器打印时优先使用父窗口的 `document.title`。
|
||||||
|
6. `new Date().toISOString()` 返回 UTC 时间字符串。
|
||||||
|
7. 模板列表 UI 仅设计了单条操作按钮,未设计复选框和批量操作状态。
|
||||||
|
|
||||||
|
**C. 解决问题方案**
|
||||||
|
1. **基线对齐修复**:
|
||||||
|
- `defaultContent.ts`:`vertical-align:text-bottom` → `vertical-align:baseline`;`line-height:1.2;min-height:1.2em` → `line-height:inherit;`
|
||||||
|
- `print.ts`:同步修改 `.smart-field-wrapper` 和 `.field-value` 的 `vertical-align:baseline` 和 `line-height:inherit`
|
||||||
|
2. **姓名栏间距**:`<p>` 的 `padding:0 0 1px 0` → `padding:0`;`line-height:1.2` → `line-height:1`,使 border-bottom 紧贴文字
|
||||||
|
3. **手术记录间距**:医院名称 `margin-bottom:8px` → `margin-bottom:2px`;`padding-bottom:0` → `padding-bottom:1px`
|
||||||
|
4. **Logo 微调**:给 Logo 的 `<span>` 添加 `transform:translate(-5px,-5px)`
|
||||||
|
5. **PDF 文件名**:在 `printDocument()` 中保存并临时设置 `document.title = docTitle`,打印完成后恢复
|
||||||
|
6. **北京时间**:统一替换所有 `new Date().toISOString()` 为 `new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().slice(0, 16)`,并保留原有的 `replace(/[:.]/g, '-')`
|
||||||
|
7. **模板批量操作**:
|
||||||
|
- 新增 `selectedIds` 状态
|
||||||
|
- 新增 `handleBatchDelete` 和 `handleBatchExport`
|
||||||
|
- 模板卡片内增加复选框(阻止冒泡避免触发选中)
|
||||||
|
- 选中时显示批量操作浮动工具栏
|
||||||
|
- 移除 `templates.length <= 1` 的单条删除限制,允许列表为空
|
||||||
|
- 删除后自动同步 `currentTemplateId` 和 `selectedIds`
|
||||||
|
|
||||||
|
**D. 后续如何避免问题**
|
||||||
|
- 排版微调时,应同时检查编辑器显示、打印预览两处的表现,因为 `print.ts` 中有独立的样式覆盖。
|
||||||
|
- `vertical-align` 属性对内联块元素的基线影响显著,混合使用 `text-bottom`、`middle`、`baseline` 时需谨慎测试。
|
||||||
|
- 浏览器打印的文件名行为不一致(有的用 iframe title,有的用父窗口 title),最稳妥的方案是在打印前后动态修改 `document.title`。
|
||||||
|
- 批量操作 UI 中,复选框的点击事件必须 `stopPropagation()`,否则会触发卡片点击导致状态混乱。
|
||||||
|
- 批量删除后必须同步清理 `selectedIds` 和 `currentTemplateId`,避免出现「选中已删除项」或「当前模板不存在」的异常状态。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 记录 37:下划线默认修复、PDF 文件名、间距缩紧、表单逆向联动
|
||||||
|
|
||||||
|
**A. 具体问题**
|
||||||
|
1. 模板管理中「患者姓名」「住院号」的「打印时显示下划线」默认仍为勾选状态,且勾选与否在打印时都失去下划线效果。
|
||||||
|
2. 导出 PDF 时浏览器默认文件名为「My Google AI Studio App.pdf」,与 JSON 文件名不一致。
|
||||||
|
3. `.field-value` 内文字偏右,打印时左右间距过大。
|
||||||
|
4. ReportEditor 中点击右侧表单输入框时,中间模板内的对应字段不会高亮,也不会滚动定位。
|
||||||
|
|
||||||
|
**B. 产生问题原因**
|
||||||
|
1. `DEFAULT_FORM_FIELDS` 中 `patientName` 和 `hospitalId` 硬编码了 `hasUnderline: true`;`defaultContent.ts` 中 `smartField()` 直接给所有字段加 `.no-underline`;`print.ts` 中 `@media print` 的 `.field-value` 默认显示下划线、`.no-underline` 时隐藏,逻辑正确但默认模板中的字段全部带有 `.no-underline`。
|
||||||
|
2. `printDocument()` 虽设置了 `document.title = docTitle`,但 iframe 内部的 HTML 缺少 `<title>` 标签,某些浏览器优先使用父窗口的原始 title。
|
||||||
|
3. `smartField()` 中 `padding:0 4px; margin:0 2px` 撑开了左右间距。
|
||||||
|
4. 之前只实现了「点击中间模板 → 右侧表单高亮滚动」的单向联动,右侧表单缺少触发 `activeFieldKey` 的事件绑定。
|
||||||
|
|
||||||
|
**C. 解决问题方案**
|
||||||
|
1. **下划线修复**:
|
||||||
|
- `src/types.ts`:`DEFAULT_FORM_FIELDS` 中 `patientName` 和 `hospitalId` 的 `hasUnderline: true` → `false`
|
||||||
|
- `src/utils/print.ts`:`@media print` 下 `.field-value` 的 `padding-bottom:1px` → `0px`,使下划线紧贴文字
|
||||||
|
2. **PDF 文件名**:在 iframe HTML 的 `<head>` 中注入 `<title>${docTitle}</title>`,确保浏览器打印对话框识别正确的默认文件名
|
||||||
|
3. **间距缩紧**:
|
||||||
|
- `src/utils/defaultContent.ts`:`padding:0 4px;margin:0 2px;min-width:32px` → `padding:0 2px;margin:0;min-width:24px;text-align:center`
|
||||||
|
- `src/utils/print.ts`:同步缩小非打印和打印样式中的 padding/margin
|
||||||
|
4. **表单逆向联动**:
|
||||||
|
- `src/pages/ReportEditor.tsx`:新增 `useEffect` 监听 `activeFieldKey`,实时修改中间模板中对应 `.field-value` 的 `backgroundColor` 和 `boxShadow`,并调用 `scrollIntoView({ block: 'center' })`
|
||||||
|
- 给右侧所有字段类型(text/date/single_select/multi_select/time)的容器 `div` 添加 `onClick={() => setActiveFieldKey(field.key)}`
|
||||||
|
- 给之前缺少高亮样式的通用 time 字段容器补充了 `activeFieldKey` 高亮类名
|
||||||
|
|
||||||
|
**D. 后续如何避免问题**
|
||||||
|
- 当修改 `DEFAULT_FORM_FIELDS` 的默认值时,需意识到已有用户的 `localStorage` 中保存的旧配置不会自动更新。如果默认值变更影响核心功能,应考虑在应用启动时做配置迁移或版本校验。
|
||||||
|
- iframe 打印的文件名行为在不同浏览器间存在差异(Chrome 用父窗口 title,Safari 可能用 iframe title),最稳妥的方案是同时设置父窗口 `document.title` 和 iframe 内部 `<title>` 标签。
|
||||||
|
- 双向联动时,`useEffect` 中的 DOM style 操作需要在组件卸载或 `activeFieldKey` 清空时清除,避免残留高亮。当前实现中 `activeFieldKey` 为 `null` 时会遍历清除所有高亮,逻辑已覆盖。
|
||||||
|
- 给容器 div 添加 `onClick` 时需注意事件冒泡:容器内的子元素(如 input、button)的点击事件会自然冒泡到容器,如果子元素有自己的 onClick 处理(如 dropdown 选项),需确保已调用 `stopPropagation()`。
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 记录 38:高亮样式柔化、点击空白取消、打印高亮隔离、下划线配置同步
|
||||||
|
|
||||||
|
**A. 具体问题**
|
||||||
|
1. ReportEditor 中 `.field-value` 激活高亮使用蓝色 box-shadow(`0 0 0 2px #3b82f6`)+ `#eff6ff` 背景,视觉过于刺眼。
|
||||||
|
2. 点击编辑器空白区域时,高亮样式不会自动清除,用户必须点击另一个字段才能切换高亮。
|
||||||
|
3. 打印/PDF 导出时,高亮的内联样式(box-shadow、backgroundColor)会带入打印件,导致打印内容出现蓝框。
|
||||||
|
4. TemplateManage 中编辑字段的「打印时显示下划线」勾选后,已插入到模板中的 `.field-value` 仍然保留旧的 `.no-underline` 类,打印时不显示下划线。
|
||||||
|
|
||||||
|
**B. 产生问题原因**
|
||||||
|
1. `activeFieldKey` 的 `useEffect` 中使用了高对比度的蓝色阴影和背景色,未考虑柔和视觉体验。
|
||||||
|
2. `handleEditorClick` 的 capture 事件处理器仅在点击 `.field-value` 时设置 `activeFieldKey`,没有处理「点击非字段区域时清空」的逻辑。
|
||||||
|
3. `print.ts` 的 `@media print` 中只重置了 `border` 和 `background`,遗漏了 `outline` 和 `box-shadow`。
|
||||||
|
4. `saveFieldEdit` 仅更新了 JSON state 和 `localStorage` 中的字段配置,没有同步扫描 `editorRef.current` 中已存在的 DOM 元素并更新其 `classList`。
|
||||||
|
|
||||||
|
**C. 解决问题方案**
|
||||||
|
1. **柔和高亮**:将 `useEffect` 中的高亮样式改为 `backgroundColor: '#f1f5f9'`(浅灰背景)、`outline: '1px solid #94a3b8'`(细灰边框)、`outlineOffset: '1px'`;清除样式时用 `''` 而非硬编码颜色,让 CSS 类重新接管。
|
||||||
|
2. **点击空白取消高亮**:在 `handleEditorClick` 中,`.field-value` 判断分支结束后增加 `setActiveFieldKey(null)`,使点击任何非字段区域都会清除高亮。
|
||||||
|
3. **打印隔离高亮**:`print.ts` 的 `@media print` 中强制添加 `outline: none !important; box-shadow: none !important;`,确保打印输出不受任何高亮内联样式影响。
|
||||||
|
4. **下划线配置同步**:`saveFieldEdit` 末尾增加 DOM 扫描逻辑:
|
||||||
|
```ts
|
||||||
|
if (editorRef.current) {
|
||||||
|
const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`);
|
||||||
|
els.forEach(el => {
|
||||||
|
if (editFieldHasUnderline) el.classList.remove('no-underline');
|
||||||
|
else el.classList.add('no-underline');
|
||||||
|
});
|
||||||
|
saveTemplateContent();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**D. 后续如何避免问题**
|
||||||
|
- 任何通过 JS 直接操作 DOM 添加的内联样式(如高亮),都必须在 `@media print` 中通过 `!important` 强制抹除,防止打印件被屏幕交互样式污染。
|
||||||
|
- 当字段配置(如 `hasUnderline`)同时影响「未来插入的元素」和「已存在的 DOM 元素」时,保存逻辑必须包含对已插入 DOM 的同步更新,不能只更新 state。
|
||||||
|
- `contentEditable` 中的 capture 阶段点击事件是处理全局点击行为(如点击空白取消)的理想位置,但需注意不要阻断其他正常交互路径(如 placeholder 点击)。
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 记录 39:打印下划线紧贴文字——行高压缩
|
||||||
|
|
||||||
|
**A. 具体问题**
|
||||||
|
打印/PDF 导出时,`.field-value` 的文字与下方 `border-bottom`(下划线)之间存在明显间距,视觉上不够紧凑。
|
||||||
|
|
||||||
|
**B. 产生问题原因**
|
||||||
|
即使 `padding-bottom` 已设为 `0px`,父级文档设置了 `line-height: 1.5`(第 29 行),`inline-block` 元素内部仍保留了行高带来的底部留白空间。`border-bottom` 渲染在元素的盒模型底部边界,而非文字字形的实际基线/降部底部,因此出现了「文字与横线之间有间隙」的视觉效果。
|
||||||
|
|
||||||
|
**C. 解决问题方案**
|
||||||
|
在 `src/utils/print.ts` 的 `@media print` 中,为 `.smart-field-wrapper .field-value` 增加 `line-height: 1 !important;`。将行高压缩到文字本身的绝对高度,彻底消除底部行高留白,使 `border-bottom` 紧贴文字正下方。
|
||||||
|
|
||||||
|
```css
|
||||||
|
@media print {
|
||||||
|
.smart-field-wrapper .field-value {
|
||||||
|
/* ... 其他属性 ... */
|
||||||
|
line-height: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**D. 后续如何避免问题**
|
||||||
|
- 当调整 `border-bottom` 与文字的距离时,如果 `padding-bottom` 已归零仍有间隙,应优先检查 `line-height` 的影响。
|
||||||
|
- `inline-block` 元素的 `border-bottom` 位置受其内部行高影响显著,打印样式中可考虑显式设置 `line-height: 1` 以获得最紧凑的下划线效果。
|
||||||
|
- 修改打印样式后,务必同时检查「有下划线」和「无下划线」两种字段的打印效果,避免 `line-height` 压缩导致其他排版异常。
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 记录 40:Dashboard 统计卡片扩展、图表时间切换与 X 轴重叠修复
|
||||||
|
|
||||||
|
**A. 具体问题**
|
||||||
|
1. Dashboard 首页缺少"全部报告总数"统计卡片,用户无法一眼看到系统内所有报告数量。
|
||||||
|
2. 报告增长趋势图表中 X 轴日期文字与数据点/轴线发生重叠,影响可读性。
|
||||||
|
3. 趋势图表仅支持固定 7 天数据,用户希望增加 30 天维度查看更长周期趋势。
|
||||||
|
|
||||||
|
**B. 产生问题原因**
|
||||||
|
1. `stats` 数据结构中只有 `reportCount`(实际表示全部报告数),没有区分"全部"和"本月"两个维度。
|
||||||
|
2. SVG 的 viewBox 高度为 120,X 轴标签绘制在 `y=118`,文字底部超出 viewBox 并与数据点(count=0 时 y=112)只有 6px 间距,导致视觉重叠。
|
||||||
|
3. 趋势计算逻辑固定为 `for (let i = 6; i >= 0; i--)` 的 7 天硬编码,缺少动态时间范围控制。
|
||||||
|
|
||||||
|
**C. 解决问题方案**
|
||||||
|
1. **扩展 stats 结构**:增加 `totalCount`(全部报告)和 `monthCount`(本月报告),将原 `reportCount` 拆分为两个维度。
|
||||||
|
2. **新增统计卡片**:将顶部网格从 3 列改为 4 列(`lg:grid-cols-4`),在"本月报告总数"左侧新增"全部报告总数"卡片。
|
||||||
|
3. **时间维度切换**:引入 `timeRange` 状态(`'7days' | '1month'`),useEffect 依赖中加入 `timeRange`,动态计算 7 天或 30 天的趋势数据和标签。
|
||||||
|
4. **修复 X 轴重叠**:
|
||||||
|
- 将 SVG viewBox 从 `0 0 300 120` 扩展为 `0 0 300 135`,增加底部 15px 空间。
|
||||||
|
- 将日期标签的 y 坐标从 `120 - 2 = 118` 下移到 `128`,与数据点保持 16px 安全间距。
|
||||||
|
- 30 天模式下字体缩小到 7px,避免过密。
|
||||||
|
5. **标签格式化**:7 天模式显示 `M/D`(如 4/13),30 天模式显示 `DD`(如 13),减少 30 天模式下的文字宽度。
|
||||||
|
|
||||||
|
**D. 后续如何避免问题**
|
||||||
|
- 在使用 SVG 绘制图表时,务必为 X 轴标签预留足够的底部空间(至少文字高度 + 安全间距),不能仅依赖 `overflow-visible`。
|
||||||
|
- 当图表需要支持多时间维度时,应在数据计算层(useEffect)统一处理,而非在渲染层做条件分支,确保数据与标签同步。
|
||||||
|
- 增加 grid 列数时,需同步检查响应式断点(`md:`、`lg:`),避免在小屏幕上卡片过度挤压。
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 记录 41:Dashboard 30 天趋势图表稀疏化与 Tooltip 交互
|
||||||
|
|
||||||
|
**A. 具体问题**
|
||||||
|
Dashboard 中"最近 30 天"模式的趋势图表过于密集:30 个蓝色圆点、30 个数值文本、30 个日期标签全部挤在底部,完全无法阅读。
|
||||||
|
|
||||||
|
**B. 产生问题原因**
|
||||||
|
1. SVG 图表对 7 天和 30 天采用完全相同的渲染策略,每天都绘制圆点、数值和标签。
|
||||||
|
2. 30 天模式下数据点密度是 7 天的 4 倍以上,在固定宽度的 SVG 中必然导致严重重叠。
|
||||||
|
3. 缺少悬停交互机制,用户无法在不显示所有数值的情况下查看具体某天的数据。
|
||||||
|
|
||||||
|
**C. 解决问题方案**
|
||||||
|
1. **条件渲染圆点和数值**:在 `points.map()` 中增加判断:`stats.trend.length <= 10` 时显示圆点和数值,否则隐藏。7 天模式(7 个点)正常显示,30 天模式(30 个点)只保留折线和面积图。
|
||||||
|
2. **稀疏化 X 轴标签**:`stats.trend.length <= 10 || i % 5 === 0`,30 天模式每隔 5 天显示一个标签,从 30 个减少到约 6 个。
|
||||||
|
3. **SVG 鼠标事件与 Tooltip**:
|
||||||
|
- 在 `<svg>` 上绑定 `onMouseMove` 和 `onMouseLeave`
|
||||||
|
- 通过 `getBoundingClientRect()` 将鼠标屏幕坐标映射到 SVG viewBox 坐标
|
||||||
|
- 计算最近的数据点索引:`idx = Math.round(((mouseX - paddingX) / chartW) * (n - 1))`
|
||||||
|
- 用 React state 管理 tooltip 的 `visible/x/y/date/count`
|
||||||
|
- 用绝对定位的 `div` 渲染 Tooltip,显示完整日期和报告数
|
||||||
|
4. **透明捕获层**:在 SVG 中增加覆盖全区域的 `<rect fill="transparent" />`,确保鼠标在空白区域也能触发事件。
|
||||||
|
5. **完整日期存储**:`stats` 中新增 `trendFullDates` 数组,存储 `YYYY-MM-DD` 格式完整日期,供 Tooltip 显示使用。
|
||||||
|
|
||||||
|
**D. 后续如何避免问题**
|
||||||
|
- 当图表需要支持多时间维度时,必须考虑不同密度下的渲染策略差异,不能对所有维度一视同仁。
|
||||||
|
- SVG 的鼠标事件坐标映射需要注意 `viewBox` 与实际显示尺寸的缩放比例,通过 `getBoundingClientRect()` 做比例换算是可靠方案。
|
||||||
|
- Tooltip 等浮动层应使用 `pointer-events-none` 避免干扰下层交互,同时确保在容器 `relative` 定位下正确计算偏移。
|
||||||
|
- 透明捕获层是解决 SVG 内部元素间隙导致事件丢失的有效手段,特别是在只有线条/路径的图表中。
|
||||||
|
|||||||
43
工程分析/需求分析-2026-04-18-23-19-44.md
Normal file
43
工程分析/需求分析-2026-04-18-23-19-44.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# 需求分析 —— 2026-04-18-23-19-44
|
||||||
|
|
||||||
|
## 需求来源
|
||||||
|
用户在实际使用和打印预览中发现多项排版和功能优化点。
|
||||||
|
|
||||||
|
## 需求概述
|
||||||
|
|
||||||
|
### 需求 1:修复 field-value 输入内容往上飘
|
||||||
|
`.field-value` 输入框中的文字与模板正文不在同一基线上,总是向上偏移。即使去掉下划线,也希望文字内容与周围正文齐平。
|
||||||
|
|
||||||
|
### 需求 2:姓名栏下方横线距离过远
|
||||||
|
「姓名:」下方的横线(`border-bottom`)与「姓名:」文字之间的距离太远,希望缩小到约 1px。
|
||||||
|
|
||||||
|
### 需求 3:手术记录标题距上方横线过远
|
||||||
|
「手术记录」标题与上方医院名称的横线之间距离过大,希望缩小到约 2px。
|
||||||
|
|
||||||
|
### 需求 4:Logo 插图位置微调
|
||||||
|
Logo 占位符相对于「西安交通大学第一附属医院 手术记录」的文字整体偏右下,希望向左移动 5px,向上移动 5px。
|
||||||
|
|
||||||
|
### 需求 5:导出 PDF 文件名修正
|
||||||
|
点击「导出报告」导出 PDF 时,浏览器默认文件名为「My Google AI Studio App.pdf」,希望改为与报告内容相关的自定义文件名(如 `图文报告-{title}-{patient}-{hid}-{time}.pdf`)。
|
||||||
|
|
||||||
|
### 需求 6:导出 JSON 文件名时间使用北京时间
|
||||||
|
导出 JSON 时文件名中的时间戳使用 `new Date().toISOString()`(UTC 时间),希望改为北京时间(UTC+8)。
|
||||||
|
|
||||||
|
### 需求 7:模板管理批量操作
|
||||||
|
在模板列表中为每个模板增加复选框,支持:
|
||||||
|
- 批量导出(将选中的多个模板打包为一个 JSON 文件)
|
||||||
|
- 批量删除(删除选中的多个模板)
|
||||||
|
- 允许列表中不留任何模板
|
||||||
|
|
||||||
|
## 涉及文件
|
||||||
|
- `src/utils/defaultContent.ts`(需求 1、2、3、4)
|
||||||
|
- `src/utils/print.ts`(需求 1、5)
|
||||||
|
- `src/pages/ReportEditor.tsx`(需求 5、6)
|
||||||
|
- `src/pages/ReportManage.tsx`(需求 6)
|
||||||
|
- `src/pages/TemplateManage.tsx`(需求 6、7)
|
||||||
|
|
||||||
|
## 需求影响范围
|
||||||
|
- 默认模板排版细节(基线对齐、间距、Logo 位置)
|
||||||
|
- 打印样式(下划线紧贴文字)
|
||||||
|
- 导出文件名生成逻辑
|
||||||
|
- 模板列表交互(复选框、批量操作)
|
||||||
34
工程分析/需求分析-2026-04-18-23-39-35.md
Normal file
34
工程分析/需求分析-2026-04-18-23-39-35.md
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
# 需求分析 —— 2026-04-18-23-39-35
|
||||||
|
|
||||||
|
## 需求来源
|
||||||
|
用户在实际使用中发现下划线功能异常、导出文件名不一致、输入框间距过大、以及表单缺乏逆向联动等问题。
|
||||||
|
|
||||||
|
## 需求概述
|
||||||
|
|
||||||
|
### 需求 1:修复下划线勾选状态异常及打印失效
|
||||||
|
1. **默认勾选未取消**:`DEFAULT_FORM_FIELDS` 中的基础字段(如患者姓名、住院号)默认 `hasUnderline` 仍为 `true` 或未指定,导致编辑弹窗中仍显示为勾选状态。
|
||||||
|
2. **打印失效**:`print.ts` 中 `@media print` 的样式逻辑有问题,导致无论是否勾选「打印时显示下划线」,打印时都不显示下划线。
|
||||||
|
3. **下划线紧贴文字**:用户希望勾选后的下划线紧贴文字底部。
|
||||||
|
|
||||||
|
### 需求 2:统一 PDF 和 JSON 导出文件名
|
||||||
|
当前 PDF 导出文件名与 JSON 不一致(缺少时间后缀或格式不同),希望两者完全一致。
|
||||||
|
|
||||||
|
### 需求 3:缩紧 field-value 内文字间距
|
||||||
|
`.field-value` 当前有 `padding:0 4px; margin:0 2px`,导致框内文字偏右,打印时左右间距过大。希望缩小 padding 和 margin。
|
||||||
|
|
||||||
|
### 需求 4:ReportEditor 表单逆向联动
|
||||||
|
当前实现了「点击中间模板字段 → 右侧表单高亮滚动」,但反向逻辑缺失:点击右侧表单输入框时,中间模板内的对应 `.field-value` 不会高亮,也不会滚动到对应位置。
|
||||||
|
|
||||||
|
## 涉及文件
|
||||||
|
- `src/types.ts`(需求 1)
|
||||||
|
- `src/pages/TemplateManage.tsx`(需求 1)
|
||||||
|
- `src/utils/print.ts`(需求 1、2、3)
|
||||||
|
- `src/utils/defaultContent.ts`(需求 3)
|
||||||
|
- `src/pages/ReportEditor.tsx`(需求 2、4)
|
||||||
|
- `src/pages/ReportManage.tsx`(需求 2)
|
||||||
|
|
||||||
|
## 需求影响范围
|
||||||
|
- 字段默认配置数据
|
||||||
|
- 打印样式逻辑
|
||||||
|
- 输入框内边距/外边距
|
||||||
|
- 编辑器双向联动交互
|
||||||
26
工程分析/需求分析-2026-04-19-00-01-50.md
Normal file
26
工程分析/需求分析-2026-04-19-00-01-50.md
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
# 需求分析 —— 2026-04-19-00-01-50
|
||||||
|
|
||||||
|
## 需求来源
|
||||||
|
用户在实际使用中发现高亮样式刺眼、点击空白不取消高亮、以及下划线勾选无效的问题。
|
||||||
|
|
||||||
|
## 需求概述
|
||||||
|
|
||||||
|
### 需求 1:高亮蓝框太明显
|
||||||
|
ReportEditor 中 `.field-value` 激活时的蓝框(`box-shadow: 0 0 0 2px #3b82f6` + `#eff6ff` 背景)过于刺眼,希望改为更柔和的选中效果(类似 TemplateManage 中的淡色高亮)。
|
||||||
|
|
||||||
|
### 需求 2:点击空白处高亮不消失 + 打印带蓝框
|
||||||
|
1. 点击模板空白区域时,`.field-value` 的高亮样式不会自动清除。
|
||||||
|
2. 打印/PDF 导出时,高亮的内联样式(box-shadow、backgroundColor)会带入打印件,导致打印内容出现蓝框。
|
||||||
|
|
||||||
|
### 需求 3:下划线勾选无效
|
||||||
|
在 TemplateManage 的字段管理中勾选「打印时显示下划线」并保存后,已插入到模板中的 `.field-value` 仍然带有 `.no-underline` 类,导致打印时不显示下划线。
|
||||||
|
|
||||||
|
## 涉及文件
|
||||||
|
- `src/pages/ReportEditor.tsx`(需求 1、2)
|
||||||
|
- `src/utils/print.ts`(需求 2)
|
||||||
|
- `src/pages/TemplateManage.tsx`(需求 3)
|
||||||
|
|
||||||
|
## 需求影响范围
|
||||||
|
- 编辑器高亮交互体验
|
||||||
|
- 打印样式纯净度
|
||||||
|
- 字段配置与 DOM 的同步机制
|
||||||
13
工程分析/需求分析-2026-04-19-00-13-20.md
Normal file
13
工程分析/需求分析-2026-04-19-00-13-20.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
# 需求分析 —— 2026-04-19-00-13-20
|
||||||
|
|
||||||
|
## 需求来源
|
||||||
|
用户反馈打印时字段下划线与文字之间距离过大,视觉上不够紧凑。
|
||||||
|
|
||||||
|
## 需求概述
|
||||||
|
在打印/PDF导出时,`.field-value` 的 `border-bottom`(下划线)与文字之间存在行高留白,导致横线没有紧贴文字底部。需要压缩行高以消除底部留白。
|
||||||
|
|
||||||
|
## 涉及文件
|
||||||
|
- `src/utils/print.ts`
|
||||||
|
|
||||||
|
## 需求影响范围
|
||||||
|
仅影响打印/导出PDF时的下划线视觉效果,不影响屏幕编辑态。
|
||||||
23
工程分析/需求分析-2026-04-19-00-24-02.md
Normal file
23
工程分析/需求分析-2026-04-19-00-24-02.md
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
# 需求分析 —— 2026-04-19-00-24-02
|
||||||
|
|
||||||
|
## 需求来源
|
||||||
|
用户在使用 Dashboard 首页时发现统计卡片缺失全部报告数,且图表存在日期文字与轴线重叠的视觉问题,同时希望增加时间维度切换能力。
|
||||||
|
|
||||||
|
## 需求概述
|
||||||
|
|
||||||
|
### 需求 1:新增"全部报告总数"卡片
|
||||||
|
在 Dashboard 统计卡片区域,紧邻"本月报告总数"左侧,新增一个"全部报告总数"数据卡片,显示当前用户可见的所有报告数量。
|
||||||
|
|
||||||
|
### 需求 2:修复图表 X 轴日期文字与轴线重叠
|
||||||
|
报告增长趋势图表中,底部 X 轴日期文字(如 4/13、4/14 等)与轴线/数据线发生重叠,影响可读性。需要调整 Canvas 绘制坐标,增大底部留白并下移文字。
|
||||||
|
|
||||||
|
### 需求 3:图表时间维度切换
|
||||||
|
为报告增长趋势图表增加"最近 7 天"和"最近 30 天"的切换按钮,动态重新计算趋势数据和标签。
|
||||||
|
|
||||||
|
## 涉及文件
|
||||||
|
- `src/pages/Dashboard.tsx`
|
||||||
|
|
||||||
|
## 需求影响范围
|
||||||
|
- Dashboard 首页统计卡片布局
|
||||||
|
- Canvas 趋势图表绘制逻辑
|
||||||
|
- 统计数据计算逻辑
|
||||||
22
工程分析/需求分析-2026-04-19-00-33-44.md
Normal file
22
工程分析/需求分析-2026-04-19-00-33-44.md
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
# 需求分析 —— 2026-04-19-00-33-44
|
||||||
|
|
||||||
|
## 需求来源
|
||||||
|
用户发现 Dashboard 中"最近 30 天"模式下的趋势图表过于密集:30 个数据圆点、30 个数值文本、30 个日期标签挤在一起,完全无法阅读。
|
||||||
|
|
||||||
|
## 需求概述
|
||||||
|
|
||||||
|
### 需求 1:30 天模式稀疏化显示
|
||||||
|
在"最近 30 天"模式下:
|
||||||
|
- 不绘制每一天的数据圆点 `<circle>` 和数值文本 `<text>`
|
||||||
|
- 仅保留平滑的面积图轮廓和折线
|
||||||
|
- X 轴日期标签每隔 5 天显示一次(稀疏化)
|
||||||
|
|
||||||
|
### 需求 2:Tooltip 悬停交互
|
||||||
|
- 平时隐藏具体数值
|
||||||
|
- 鼠标悬停在曲线区域时,显示浮动 Tooltip,展示该位置对应的日期和报告数量
|
||||||
|
|
||||||
|
## 涉及文件
|
||||||
|
- `src/pages/Dashboard.tsx`
|
||||||
|
|
||||||
|
## 需求影响范围
|
||||||
|
仅影响 Dashboard 趋势图表的 SVG 渲染和交互逻辑,7 天模式保持不变。
|
||||||
Reference in New Issue
Block a user