From d05029838f2f856346e1903ca82ff53207884f82 Mon Sep 17 00:00:00 2001 From: admin <572701190@qq.com> Date: Fri, 17 Apr 2026 23:44:03 +0800 Subject: [PATCH] =?UTF-8?q?2026-04-17-23-38-34=20-=20=E6=97=B6=E9=97=B4?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=8B=E6=8B=89?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E3=80=81=E8=A1=A8=E6=A0=BC=E5=86=85=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E5=8D=A0=E4=BD=8D=E7=AC=A6=E8=87=AA=E9=80=82=E5=BA=94?= =?UTF-8?q?=E3=80=81=E6=89=93=E5=8D=B0=E5=A4=9A=E9=A1=B5=E9=A1=B5=E8=BE=B9?= =?UTF-8?q?=E8=B7=9D=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ReportEditor.tsx | 59 ++++-- src/pages/TemplateManage.tsx | 223 +++++++++++++++-------- src/utils/print.ts | 6 +- 工程分析/实现方案-2026-04-17-23-38-34.md | 196 ++++++++++++++++++++ 工程分析/测试方案-2026-04-17-23-38-34.md | 86 +++++++++ 工程分析/经验记录.md | 34 ++++ 工程分析/需求分析-2026-04-17-23-38-34.md | 35 ++++ 7 files changed, 536 insertions(+), 103 deletions(-) create mode 100644 工程分析/实现方案-2026-04-17-23-38-34.md create mode 100644 工程分析/测试方案-2026-04-17-23-38-34.md create mode 100644 工程分析/需求分析-2026-04-17-23-38-34.md diff --git a/src/pages/ReportEditor.tsx b/src/pages/ReportEditor.tsx index f0a8bbd..6c12365 100644 --- a/src/pages/ReportEditor.tsx +++ b/src/pages/ReportEditor.tsx @@ -501,31 +501,52 @@ export default function ReportEditor() { const insertImage = () => { editorRef.current?.focus(); - let width = 200; - let height = 200; - while (true) { - const input = prompt('请输入占位符的最大宽度和高度(px)，用*号分隔（如: 100*50）。留空则默认宽高为 200*200。(提示: 正文一行文字高度约为 20 像素左右)', ''); - if (input === null) return; - const trimmed = input.trim(); - if (trimmed === '') break; - const parts = trimmed.split('*').map(s => s.trim()); - if (parts.length === 2 && /^\d+$/.test(parts[0]) && /^\d+$/.test(parts[1])) { - width = parseInt(parts[0]) || 0; - height = parseInt(parts[1]) || 0; + + const sel = window.getSelection(); + let node: Node | null = sel?.anchorNode ?? null; + let inTable = false; + while (node) { + if ((node as Element).nodeName === 'TD' || (node as Element).nodeName === 'TH') { + inTable = true; break; } - alert('格式错误，请确保使用 * 分隔两个数字，例如 100*50'); + node = node.parentNode; } - let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;'; - if (width > 0) styleStr += `width:${width}px;`; - if (height > 0) styleStr += `height:${height}px;`; - - const showShortText = width > 0 && width < 80; - const hintText = showShortText ? '插入图片' : '插入/点击放置图片'; + let width = 200; + let height = 200; + if (!inTable) { + while (true) { + const input = prompt('请输入占位符的最大宽度和高度(px)，用*号分隔（如: 100*50）。留空则默认宽高为 200*200。(提示: 正文一行文字高度约为 20 像素左右)', ''); + if (input === null) return; + const trimmed = input.trim(); + if (trimmed === '') break; + const parts = trimmed.split('*').map(s => s.trim()); + if (parts.length === 2 && /^\d+$/.test(parts[0]) && /^\d+$/.test(parts[1])) { + width = parseInt(parts[0]) || 0; + height = parseInt(parts[1]) || 0; + break; + } + alert('格式错误，请确保使用 * 分隔两个数字，例如 100*50'); + } + } + const hintText = '插入/点击放置图片'; const id = 'ph_' + Date.now(); - const html = `×${hintText}​`; + + let html: string; + if (inTable) { + const styleStr = 'display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;cursor:pointer;width:100%;height:100%;max-width:200px;max-height:200px;min-height:60px;margin:0 auto;'; + html = `
×${hintText}
`; + } else { + let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;'; + if (width > 0) styleStr += `width:${width}px;`; + if (height > 0) styleStr += `height:${height}px;`; + const showShortText = width > 0 && width < 80; + const text = showShortText ? '插入图片' : hintText; + html = `×${text}​`; + } + execCmd('insertHTML', html); }; diff --git a/src/pages/TemplateManage.tsx b/src/pages/TemplateManage.tsx index 5d0366c..ee9a17d 100644 --- a/src/pages/TemplateManage.tsx +++ b/src/pages/TemplateManage.tsx @@ -38,6 +38,8 @@ export default function TemplateManage() { const [newFieldTimeDefault, setNewFieldTimeDefault] = useState<'current' | 'specific'>('specific'); const [newFieldFixedTimeValue, setNewFieldFixedTimeValue] = useState(''); const [customTimeFormats, setCustomTimeFormats] = useState([]); + const [formatDropdownOpen, setFormatDropdownOpen] = useState(false); + const [newFormatDropdownOpen, setNewFormatDropdownOpen] = useState(false); const [imageAssets, setImageAssets] = useState<{ id: string; name: string; dataUrl: string }[]>([]); const updatePageHeight = () => { @@ -515,31 +517,52 @@ export default function TemplateManage() { const insertImage = () => { editorRef.current?.focus(); restoreSelection(); - let width = 200; - let height = 200; - while (true) { - const input = prompt('请输入占位符的最大宽度和高度(px)，用 * 分隔（如: 100*50）。留空则默认宽高为 200*200。(提示: 正文一行文字高度约为 20 像素左右)', ''); - if (input === null) return; - const trimmed = input.trim(); - if (trimmed === '') break; - const parts = trimmed.split('*').map(s => s.trim()); - if (parts.length === 2 && /^\d+$/.test(parts[0]) && /^\d+$/.test(parts[1])) { - width = parseInt(parts[0]) || 0; - height = parseInt(parts[1]) || 0; + + const sel = window.getSelection(); + let node: Node | null = sel?.anchorNode ?? null; + let inTable = false; + while (node) { + if ((node as Element).nodeName === 'TD' || (node as Element).nodeName === 'TH') { + inTable = true; break; } - alert('格式错误，请确保使用 * 分隔两个数字，例如 100*50'); + node = node.parentNode; } - let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;'; - if (width > 0) styleStr += `width:${width}px;`; - if (height > 0) styleStr += `height:${height}px;`; - - const showShortText = width > 0 && width < 80; - const hintText = showShortText ? '插图' : '插入/点击放置图片'; + let width = 200; + let height = 200; + if (!inTable) { + while (true) { + const input = prompt('请输入占位符的最大宽度和高度(px)，用 * 分隔（如: 100*50）。留空则默认宽高为 200*200。(提示: 正文一行文字高度约为 20 像素左右)', ''); + if (input === null) return; + const trimmed = input.trim(); + if (trimmed === '') break; + const parts = trimmed.split('*').map(s => s.trim()); + if (parts.length === 2 && /^\d+$/.test(parts[0]) && /^\d+$/.test(parts[1])) { + width = parseInt(parts[0]) || 0; + height = parseInt(parts[1]) || 0; + break; + } + alert('格式错误，请确保使用 * 分隔两个数字，例如 100*50'); + } + } + const hintText = '插入/点击放置图片'; const id = 'ph_' + Date.now(); - const html = `×${hintText}​`; + + let html: string; + if (inTable) { + const styleStr = 'display:flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;cursor:pointer;width:100%;height:100%;max-width:200px;max-height:200px;min-height:60px;margin:0 auto;'; + html = `
×${hintText}
`; + } else { + let styleStr = 'display:inline-flex;align-items:center;justify-content:center;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;'; + if (width > 0) styleStr += `width:${width}px;`; + if (height > 0) styleStr += `height:${height}px;`; + const showShortText = width > 0 && width < 80; + const text = showShortText ? '插图' : hintText; + html = `×${text}​`; + } + pushHistory(); execCmd('insertHTML', html); }; @@ -933,42 +956,61 @@ export default function TemplateManage() { className="w-full px-1.5 py-1 text-xs border border-border rounded" /> )} - setEditFieldTimeFormat(e.target.value)} - onBlur={(e) => { - const val = e.target.value.trim(); - if (val && !customTimeFormats.includes(val)) { - const next = [...customTimeFormats, val]; - setCustomTimeFormats(next); - storage.set('customTimeFormats', next); - } - }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - const val = (e.target as HTMLInputElement).value.trim(); +
+ setEditFieldTimeFormat(e.target.value)} + onFocus={() => setFormatDropdownOpen(true)} + onBlur={() => { + setTimeout(() => setFormatDropdownOpen(false), 200); + const val = editFieldTimeFormat.trim(); if (val && !customTimeFormats.includes(val)) { const next = [...customTimeFormats, val]; setCustomTimeFormats(next); storage.set('customTimeFormats', next); } - } - }} - className="w-full px-1.5 py-1 text-xs border border-border rounded" - placeholder="输入格式，如 YYYY-MM-DD" - /> - - {customTimeFormats - .filter(fmt => { - const isDateFormat = /YYYY|MM|DD/.test(fmt); - const isTimeFormat = /HH|hh|mm|A/.test(fmt); - if (field.type === 'date') return isDateFormat; - if (field.type === 'time') return isTimeFormat; - return true; - }) - .map(fmt => + }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + const val = editFieldTimeFormat.trim(); + if (val && !customTimeFormats.includes(val)) { + const next = [...customTimeFormats, val]; + setCustomTimeFormats(next); + storage.set('customTimeFormats', next); + } + setFormatDropdownOpen(false); + } + }} + className="w-full px-1.5 py-1 text-xs border border-border rounded" + placeholder="输入格式或下拉选择" + /> + {formatDropdownOpen && ( +
+ {customTimeFormats + .filter(fmt => { + const isDateFormat = /YYYY|MM|DD/.test(fmt); + const isTimeFormat = /HH|hh|mm|A/.test(fmt); + if (field.type === 'date') return isDateFormat; + if (field.type === 'time') return isTimeFormat; + return true; + }) + .map(fmt => ( +
{ + e.preventDefault(); + setEditFieldTimeFormat(fmt); + setFormatDropdownOpen(false); + }} + > + {fmt} +
+ ))} +
+ )} +
)}
@@ -1101,42 +1143,61 @@ export default function TemplateManage() { className="w-full px-2 py-1.5 text-xs border border-border rounded" /> )} - setNewFieldTimeFormat(e.target.value)} - onBlur={(e) => { - const val = e.target.value.trim(); - if (val && !customTimeFormats.includes(val)) { - const next = [...customTimeFormats, val]; - setCustomTimeFormats(next); - storage.set('customTimeFormats', next); - } - }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - const val = (e.target as HTMLInputElement).value.trim(); +
+ setNewFieldTimeFormat(e.target.value)} + onFocus={() => setNewFormatDropdownOpen(true)} + onBlur={() => { + setTimeout(() => setNewFormatDropdownOpen(false), 200); + const val = newFieldTimeFormat.trim(); if (val && !customTimeFormats.includes(val)) { const next = [...customTimeFormats, val]; setCustomTimeFormats(next); storage.set('customTimeFormats', next); } - } - }} - className="w-full px-2 py-1.5 text-xs border border-border rounded" - placeholder="输入格式，如 YYYY-MM-DD" - /> - - {customTimeFormats - .filter(fmt => { - const isDateFormat = /YYYY|MM|DD/.test(fmt); - const isTimeFormat = /HH|hh|mm|A/.test(fmt); - if (newFieldForm.type === 'date') return isDateFormat; - if (newFieldForm.type === 'time') return isTimeFormat; - return true; - }) - .map(fmt => + }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + const val = newFieldTimeFormat.trim(); + if (val && !customTimeFormats.includes(val)) { + const next = [...customTimeFormats, val]; + setCustomTimeFormats(next); + storage.set('customTimeFormats', next); + } + setNewFormatDropdownOpen(false); + } + }} + className="w-full px-2 py-1.5 text-xs border border-border rounded" + placeholder="输入格式或下拉选择" + /> + {newFormatDropdownOpen && ( +
+ {customTimeFormats + .filter(fmt => { + const isDateFormat = /YYYY|MM|DD/.test(fmt); + const isTimeFormat = /HH|hh|mm|A/.test(fmt); + if (newFieldForm.type === 'date') return isDateFormat; + if (newFieldForm.type === 'time') return isTimeFormat; + return true; + }) + .map(fmt => ( +
{ + e.preventDefault(); + setNewFieldTimeFormat(fmt); + setNewFormatDropdownOpen(false); + }} + > + {fmt} +
+ ))} +
+ )} +
)} {['单选', '多选'].includes(newFieldForm.category) && ( diff --git a/src/utils/print.ts b/src/utils/print.ts index cae0db5..85e1363 100644 --- a/src/utils/print.ts +++ b/src/utils/print.ts @@ -18,10 +18,10 @@ export const printDocument = (htmlContent: string) => {