Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
89bf60b4e1 | ||
|
|
888255ae6f |
@@ -2101,7 +2101,7 @@ export default function ReportEditor() {
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
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 patient = reportData.patientName || '未知';
|
||||
const hid = reportData.hospitalId || '无号';
|
||||
@@ -2112,7 +2112,7 @@ export default function ReportEditor() {
|
||||
>导出 PDF</button>
|
||||
<button
|
||||
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 patient = reportData.patientName || '未知';
|
||||
const hid = reportData.hospitalId || '无号';
|
||||
|
||||
@@ -178,7 +178,7 @@ export default function ReportManage() {
|
||||
const exportBulkJSON = () => {
|
||||
const selectedReports = reports.filter(r => selectedIds.includes(r.id));
|
||||
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`);
|
||||
};
|
||||
|
||||
|
||||
@@ -52,6 +52,7 @@ export default function TemplateManage() {
|
||||
isOpen: false, rows: '2', cols: '3'
|
||||
});
|
||||
const [imageAssets, setImageAssets] = useState<{ id: string; name: string; dataUrl: string }[]>([]);
|
||||
const [selectedIds, setSelectedIds] = useState<string[]>([]);
|
||||
|
||||
const updatePageHeight = () => {
|
||||
if (!editorRef.current) return;
|
||||
@@ -588,22 +589,49 @@ export default function TemplateManage() {
|
||||
};
|
||||
|
||||
const handleDeleteTemplate = (id: string) => {
|
||||
if (templates.length <= 1) {
|
||||
alert('至少需要保留一个模板');
|
||||
return;
|
||||
}
|
||||
if (window.confirm('确定要删除此模板吗?')) {
|
||||
const allTemplates = storage.get<Template[]>('templates', []);
|
||||
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);
|
||||
if (currentTemplateId === id) {
|
||||
const visible = updated.filter(t => templates.some(x => x.id === t.id));
|
||||
setCurrentTemplateId(visible[0]?.id || null);
|
||||
setCurrentTemplateId(updated[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 file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
@@ -738,45 +766,76 @@ export default function TemplateManage() {
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
</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">
|
||||
{templates.map(tpl => (
|
||||
<div
|
||||
key={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
|
||||
? 'bg-white border-accent shadow-sm'
|
||||
: 'bg-transparent border-transparent hover:bg-white hover:border-border'
|
||||
}`}
|
||||
>
|
||||
<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 className="flex items-start gap-2">
|
||||
<input
|
||||
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 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>
|
||||
))}
|
||||
{templates.length === 0 && (
|
||||
@@ -1314,7 +1373,7 @@ export default function TemplateManage() {
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
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 || '模板';
|
||||
printDocument(editorRef.current?.innerHTML || '', `${name}-${ts}`);
|
||||
setExportModalOpen(false);
|
||||
@@ -1323,7 +1382,7 @@ export default function TemplateManage() {
|
||||
>导出 PDF</button>
|
||||
<button
|
||||
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 data = currentTemplate ? { ...currentTemplate, content: editorRef.current?.innerHTML } : { content: editorRef.current?.innerHTML };
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
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:32px;padding:0 4px;margin:0 2px;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;"> </span><span class="delete-btn" contenteditable="false">×</span></span>​`;
|
||||
};
|
||||
|
||||
export const defaultReportContent = `
|
||||
<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="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>
|
||||
<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>
|
||||
</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('patientGender')}
|
||||
年龄:${smartField('patientAge')}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
export const printDocument = (htmlContent: string, docTitle: string = '图文报告') => {
|
||||
const originalTitle = document.title;
|
||||
document.title = docTitle;
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.style.position = 'fixed';
|
||||
iframe.style.right = '0';
|
||||
@@ -34,12 +36,12 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
|
||||
.delete-btn { display: none !important; }
|
||||
.image-placeholder:not(.has-image) { display: none !important; }
|
||||
.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 2px; vertical-align: baseline; }
|
||||
.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: 32px; padding: 0 4px; margin: 0 2px; 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; }
|
||||
.report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
|
||||
@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 { 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; }
|
||||
}
|
||||
</style>
|
||||
@@ -53,6 +55,7 @@ export const printDocument = (htmlContent: string, docTitle: string = '图文报
|
||||
win.focus();
|
||||
setTimeout(() => {
|
||||
win.print();
|
||||
document.title = originalTitle;
|
||||
setTimeout(() => {
|
||||
if (iframe.parentNode) document.body.removeChild(iframe);
|
||||
}, 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 小时偏差,但中国大陆不使用夏令时,所以安全。
|
||||
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. 选中所有模板并批量删除。
|
||||
**预期结果**:列表显示为空,无报错。
|
||||
|
||||
## 回归测试
|
||||
- 确保打印功能正常,样式无异常。
|
||||
- 确保单个模板导出/导入功能正常。
|
||||
- 确保报告编辑、保存、加载功能正常。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例均通过,无控制台报错,排版对齐准确,文件名正确。
|
||||
29
工程分析/经验记录.md
29
工程分析/经验记录.md
@@ -1075,3 +1075,32 @@ if ((settings.autoInsertDelay || 0) > 0) {
|
||||
- 当扩展数据类型(如 Template 接口)时,应评估是否需要同步修改所有使用该类型的持久化/序列化逻辑(如 storage 读写、导入/导出)。
|
||||
- 默认模板中的占位符结构必须与运行时插入逻辑保持完全一致(`display`、居中方式、`data-mode` 等),任何差异都可能导致交互体验不一致。
|
||||
- 新增文件上传/导入功能时,必须在 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 的旧代码)。
|
||||
|
||||
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 位置)
|
||||
- 打印样式(下划线紧贴文字)
|
||||
- 导出文件名生成逻辑
|
||||
- 模板列表交互(复选框、批量操作)
|
||||
Reference in New Issue
Block a user