From 9562b2aa8f81c72eecf34e99723835948c602d42 Mon Sep 17 00:00:00 2001 From: Administrator Date: Sun, 19 Apr 2026 00:53:14 +0800 Subject: [PATCH] =?UTF-8?q?2026-04-19-00-51-07=20-=20=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E6=8A=BD=E5=B8=A7=E4=BD=8D=E7=BD=AE[1,3,5,7,9,11]=E3=80=81?= =?UTF-8?q?=E5=AF=BC=E5=87=BA=E6=96=87=E4=BB=B6=E5=90=8D=E5=8A=A0=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E6=88=B3=E3=80=81=E5=8D=A0=E4=BD=8D=E7=AC=A6=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E6=81=A2=E5=A4=8D=E5=B1=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Login.tsx | 9 ++--- src/pages/TemplateManage.tsx | 18 ++++++++-- 工程分析/实现方案-2026-04-19-00-51-07.md | 44 ++++++++++++++++++++++++ 工程分析/测试方案-2026-04-19-00-51-07.md | 32 +++++++++++++++++ 工程分析/经验记录.md | 29 ++++++++++++++++ 工程分析/需求分析-2026-04-19-00-51-07.md | 24 +++++++++++++ 6 files changed, 147 insertions(+), 9 deletions(-) create mode 100644 工程分析/实现方案-2026-04-19-00-51-07.md create mode 100644 工程分析/测试方案-2026-04-19-00-51-07.md create mode 100644 工程分析/需求分析-2026-04-19-00-51-07.md diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 53236bb..cf6bc48 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -63,14 +63,9 @@ export default function Login() { const settingsRaw = storage.get('systemSettings', {} as SystemSettings); if (!settingsRaw.frameCount) { - const round1 = (n: number) => Math.round(n * 10) / 10; - const positions: number[] = []; - for (let i = 1; i <= 12; i++) { - positions.push(round1((100 / 13) * i)); - } const defaultSettings = { - frameCount: 12, - framePositions: positions, + frameCount: 6, + framePositions: [1, 3, 5, 7, 9, 11], apiEndpoint: '', apiKey: '', defaultTemplate: savedTemplates[0]?.id || '', diff --git a/src/pages/TemplateManage.tsx b/src/pages/TemplateManage.tsx index 0490086..af3afa2 100644 --- a/src/pages/TemplateManage.tsx +++ b/src/pages/TemplateManage.tsx @@ -220,12 +220,25 @@ export default function TemplateManage() { pushHistory(); if (placeholder.classList.contains('has-image')) { placeholder.classList.remove('has-image'); + const w = parseInt(placeholder.style.maxWidth || placeholder.style.width || '0'); + const text = w > 0 && w < 80 ? '插图' : '插入/点击放置图片'; placeholder.innerHTML = ` × - 插入/点击放置图片 + ${text} `; placeholder.style.border = '1px dashed #cbd5e1'; placeholder.style.background = '#f8fafc'; + const mw = placeholder.style.maxWidth; + const mh = placeholder.style.maxHeight; + if (mw) placeholder.style.width = mw; + if (mh) { + placeholder.style.height = mh; + placeholder.style.lineHeight = mh; + } + placeholder.style.textAlign = 'center'; + placeholder.style.verticalAlign = 'middle'; + placeholder.style.justifyContent = 'center'; + placeholder.style.alignItems = 'center'; } else { const range = document.createRange(); range.selectNode(placeholder); @@ -682,7 +695,8 @@ export default function TemplateManage() { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; - a.download = `模板导出-${template.name}.json`; + const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16); + a.download = `模板导出-${template.name}-${ts}.json`; a.click(); URL.revokeObjectURL(url); }; diff --git a/工程分析/实现方案-2026-04-19-00-51-07.md b/工程分析/实现方案-2026-04-19-00-51-07.md new file mode 100644 index 0000000..5539208 --- /dev/null +++ b/工程分析/实现方案-2026-04-19-00-51-07.md @@ -0,0 +1,44 @@ +# 实现方案 —— 2026-04-19-00-51-07 + +## 方案目标 +修改默认抽帧位置、模板导出文件名加时间戳、修复 TemplateManage 占位符删除恢复样式。 + +## 需求 1：默认抽帧位置改为 [1,3,5,7,9,11] + +### 修改文件：`src/pages/Login.tsx` + +在 `initData()` 的 `defaultSettings` 中，将 `framePositions` 从当前值改为 `[1, 3, 5, 7, 9, 11]`。 + +如果存在 `SystemSettings` 类型的默认值定义（如在其他文件中），也需要同步修改。 + +## 需求 2：模板导出 JSON 文件名加时间戳 + +### 修改文件：`src/pages/TemplateManage.tsx` + +在 `handleExportTemplate` 函数中，生成 `a.download` 时，在模板名称后追加北京时间戳（格式与批量导出一致）。 + +```ts +const ts = new Date(Date.now() + 8 * 60 * 60 * 1000).toISOString().replace(/[:.]/g, '-').slice(0, 16); +a.download = `模板导出-${template.name}-${ts}.json`; +``` + +## 需求 3：TemplateManage 占位符删除恢复样式 + +### 修改文件：`src/pages/TemplateManage.tsx` + +对比 ReportEditor.tsx 和 TemplateManage.tsx 中 `.image-placeholder` 删除后的恢复逻辑。 + +ReportEditor 中的恢复逻辑包含：`text-align:center`、`vertical-align:middle`、`justify-content:center`、`align-items:center`，使文字居中。 + +TemplateManage 中的恢复逻辑可能缺少这些居中样式，导致文字靠左。需要在 TemplateManage 的 `handleEditorClick` 删除恢复分支中补齐这些样式。 + +## 涉及文件及修改点 +| 文件 | 修改点 | +|------|--------| +| `src/pages/Login.tsx` | `defaultSettings.framePositions` 改为 `[1,3,5,7,9,11]` | +| `src/pages/TemplateManage.tsx` | `handleExportTemplate` 文件名加时间戳；`handleEditorClick` 删除恢复补齐居中样式 | + +## 风险与注意事项 +1. 修改 `defaultSettings` 只影响新用户或重置后的系统，已有用户的 localStorage 中的旧设置不会被覆盖。 +2. 导出文件名中模板名称可能包含特殊字符，但时间戳追加在末尾不影响。 +3. 居中样式需要确认 TemplateManage 中 placeholder 的 `display` 属性是否为 `inline-flex` 或 `inline-block`，以选择合适的居中方式。 diff --git a/工程分析/测试方案-2026-04-19-00-51-07.md b/工程分析/测试方案-2026-04-19-00-51-07.md new file mode 100644 index 0000000..66b7296 --- /dev/null +++ b/工程分析/测试方案-2026-04-19-00-51-07.md @@ -0,0 +1,32 @@ +# 测试方案 —— 2026-04-19-00-51-07 + +## 测试目标 +验证默认抽帧位置、导出文件名、占位符删除恢复的正确性。 + +## 测试用例 + +### TC-1：默认抽帧位置正确 +**步骤**： +1. 清空 localStorage 或重置系统，重新登录。 +2. 进入系统设置查看"抽帧位置百分比"。 +**预期结果**：默认值为 1、3、5、7、9、11。 + +### TC-2：模板导出文件名带时间戳 +**步骤**： +1. 进入 TemplateManage，点击任意模板的"导出"按钮。 +**预期结果**：下载的文件名为 `模板导出-模板名称-YYYY-MM-DD-HH-mm.json` 格式。 + +### TC-3：TemplateManage 占位符删除后文字居中 +**步骤**： +1. 进入 TemplateManage，插入图片占位符。 +2. 点击占位符上传图片。 +3. 点击删除按钮（×）删除图片。 +**预期结果**：占位符恢复为虚线框，提示文字"插入/点击放置图片"在框内居中显示。 + +### TC-4：ReportEditor 占位符不受影响 +**步骤**： +1. 进入 ReportEditor，重复 TC-3 的操作。 +**预期结果**：文字仍然居中，无变化。 + +## 测试通过标准 +所有用例通过，无控制台报错，两端编辑器行为一致。 diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index cdf5127..ea2663f 100644 --- a/工程分析/经验记录.md +++ b/工程分析/经验记录.md @@ -1312,3 +1312,32 @@ Dashboard 中"最近 30 天"模式的趋势图表过于密集：30 个蓝色圆 - SVG 的鼠标事件坐标映射需要注意 `viewBox` 与实际显示尺寸的缩放比例，通过 `getBoundingClientRect()` 做比例换算是可靠方案。 - Tooltip 等浮动层应使用 `pointer-events-none` 避免干扰下层交互，同时确保在容器 `relative` 定位下正确计算偏移。 - 透明捕获层是解决 SVG 内部元素间隙导致事件丢失的有效手段，特别是在只有线条/路径的图表中。 + + +--- + +## 记录 42：默认抽帧位置、导出文件名、占位符删除恢复样式修复 + +**A. 具体问题** +1. 系统初始化时默认抽帧位置为 12 个均匀分布点（约 7.7%~92.3%），用户希望改为前 6 个奇数百分比点（1%、3%、5%、7%、9%、11%）。 +2. TemplateManage 单模板导出 JSON 文件名只有模板名称，缺少时间戳，不便于版本管理。 +3. TemplateManage 编辑器中 `.image-placeholder` 删除图片后，提示文字"插入/点击放置图片"偏向左侧，而 ReportEditor 中同样的操作文字是居中的。 + +**B. 产生问题原因** +1. `Login.tsx` 的 `initData()` 中使用 `for (let i = 1; i <= 12; i++)` 循环生成 12 个均匀百分比，不符合临床场景下"前段密集抽帧"的习惯。 +2. `handleExportTemplate` 中直接拼接 `模板导出-${template.name}.json`，未追加时间戳。 +3. TemplateManage 的删除恢复逻辑仅设置了 `border` 和 `background`，缺少 `textAlign`、`verticalAlign`、`justifyContent`、`alignItems` 等居中样式，且未恢复 `width`/`height`/`lineHeight`，也未使用 `absolute` 定位的居中方案。 + +**C. 解决问题方案** +1. **默认抽帧位置**：将 `frameCount` 从 12 改为 6，`framePositions` 从均匀计算改为硬编码 `[1, 3, 5, 7, 9, 11]`。 +2. **导出文件名**：在 `a.download` 前加入北京时间戳生成逻辑，格式为 `模板导出-模板名称-YYYY-MM-DD-HH-mm.json`。 +3. **删除恢复样式**：在 TemplateManage 的删除恢复逻辑中补齐： + - `placeholder-text` 使用 `position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;` 实现绝对居中 + - 恢复 `width`（从 `maxWidth`）、`height`/`lineHeight`（从 `maxHeight`） + - 设置 `textAlign='center'`、`verticalAlign='middle'`、`justifyContent='center'`、`alignItems='center'` + - 根据占位符原始宽度判断显示"插图"（<80px）或"插入/点击放置图片" + +**D. 后续如何避免问题** +- 当两个编辑器（ReportEditor / TemplateManage）共享同一种控件（如 `image-placeholder`）时，任何对创建/填充/删除恢复逻辑的修改都必须在两端同步检查，避免用户体验不一致。 +- 系统默认值（如抽帧位置）的修改应考虑已有用户的数据兼容问题：新默认值只影响 localStorage 中无记录的新用户或重置后的系统。 +- 导出文件名加时间戳时，应统一使用项目内已有的北京时间生成函数或模式，避免不同模块使用不同格式。 diff --git a/工程分析/需求分析-2026-04-19-00-51-07.md b/工程分析/需求分析-2026-04-19-00-51-07.md new file mode 100644 index 0000000..9ee7eb3 --- /dev/null +++ b/工程分析/需求分析-2026-04-19-00-51-07.md @@ -0,0 +1,24 @@ +# 需求分析 —— 2026-04-19-00-51-07 + +## 需求来源 +用户在使用中发现三个问题：默认抽帧位置不符合临床习惯、模板导出文件名缺少时间戳、TemplateManage 图片占位符删除后文字靠左。 + +## 需求概述 + +### 需求 1：默认抽帧位置改为第 1、3、5、7、9、11 帧 +系统初始化或重置数据时，自动关键帧摘取的默认位置百分比应从当前值改为 `[1, 3, 5, 7, 9, 11]`，对应视频的第 1%、3%、5%、7%、9%、11% 位置。 + +### 需求 2：模板导出 JSON 文件名加时间戳 +TemplateManage 中点击单个模板的"导出"按钮时，导出的 JSON 文件名应从 `模板导出-模板名称.json` 改为 `模板导出-模板名称-时间戳.json`。 + +### 需求 3：TemplateManage 图片占位符删除后文字靠左 +TemplateManage 编辑器中，`.image-placeholder` 插入图片后再删除恢复，提示文字"插入/点击放置图片"偏向左侧；而 ReportEditor 中同样的操作文字是居中的。需要统一两者的删除恢复逻辑。 + +## 涉及文件 +- `src/pages/Login.tsx`（或系统设置初始化位置）— 需求 1 +- `src/pages/TemplateManage.tsx` — 需求 2、3 + +## 需求影响范围 +- 系统默认配置 +- 模板导出文件名格式 +- TemplateManage 编辑器占位符删除恢复样式