From 1a777aad85b397a5a216f13c024aea0f2130598b Mon Sep 17 00:00:00 2001 From: Administrator Date: Sun, 19 Apr 2026 01:05:36 +0800 Subject: [PATCH] =?UTF-8?q?2026-04-19-01-03-37=20-=20=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E6=8F=92=E5=85=A5=E5=B8=A7=E9=97=B4=E9=9A=94=E6=8A=BD=E5=8F=96?= =?UTF-8?q?[0,2,4,6,8,10]=E3=80=81=E5=AF=BC=E5=87=BA=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=90=8D=E5=8A=A0=E6=97=B6=E9=97=B4=E6=88=B3=E3=80=81=E5=8D=A0?= =?UTF-8?q?=E4=BD=8D=E7=AC=A6=E5=88=A0=E9=99=A4=E6=81=A2=E5=A4=8D=E5=B1=85?= =?UTF-8?q?=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Login.tsx | 2 +- src/pages/SystemSettings.tsx | 5 ++- src/pages/TemplateManage.tsx | 18 ++++++++-- 工程分析/实现方案-2026-04-19-01-03-37.md | 42 ++++++++++++++++++++++++ 工程分析/测试方案-2026-04-19-01-03-37.md | 36 ++++++++++++++++++++ 工程分析/经验记录.md | 27 +++++++++++++++ 工程分析/需求分析-2026-04-19-01-03-37.md | 26 +++++++++++++++ 7 files changed, 152 insertions(+), 4 deletions(-) create mode 100644 工程分析/实现方案-2026-04-19-01-03-37.md create mode 100644 工程分析/测试方案-2026-04-19-01-03-37.md create mode 100644 工程分析/需求分析-2026-04-19-01-03-37.md diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 53236bb..64fb97e 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -77,7 +77,7 @@ export default function Login() { frameMode: 'uniform', autoInsertFrames: true, autoInsertDelay: 1, - autoInsertFrameIndices: [0, 1, 2, 3, 4, 5] + autoInsertFrameIndices: [0, 2, 4, 6, 8, 10] }; storage.set('systemSettings', defaultSettings); } diff --git a/src/pages/SystemSettings.tsx b/src/pages/SystemSettings.tsx index 0434e44..c708546 100644 --- a/src/pages/SystemSettings.tsx +++ b/src/pages/SystemSettings.tsx @@ -94,7 +94,10 @@ export default function SystemSettings() { apiEndpoint: '', apiKey: '', defaultTemplate: templates[0]?.id || '', - frameMode: 'uniform' + frameMode: 'uniform', + autoInsertFrames: true, + autoInsertDelay: 1, + autoInsertFrameIndices: [0, 2, 4, 6, 8, 10] }; setSettings(defaultSettings); storage.set('systemSettings', defaultSettings); 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-01-03-37.md b/工程分析/实现方案-2026-04-19-01-03-37.md new file mode 100644 index 0000000..5647525 --- /dev/null +++ b/工程分析/实现方案-2026-04-19-01-03-37.md @@ -0,0 +1,42 @@ +# 实现方案 —— 2026-04-19-01-03-37 + +## 方案目标 +调整默认自动插入帧索引为间隔抽取、模板导出文件名加时间戳、修复占位符删除恢复居中。 + +## 需求 1：默认 autoInsertFrameIndices 改为 [0,2,4,6,8,10] + +### 修改文件 1：`src/pages/Login.tsx` +在 `initData()` 的 `defaultSettings` 中，将 `autoInsertFrameIndices` 从 `[0, 1, 2, 3, 4, 5]` 改为 `[0, 2, 4, 6, 8, 10]`。frameCount 保持 12，framePositions 保持原有均匀分布逻辑。 + +### 修改文件 2：`src/pages/SystemSettings.tsx` +在 `resetToDefault` 函数中，补全缺失的 `autoInsertFrames`、`autoInsertDelay`、`autoInsertFrameIndices` 字段，并将 `autoInsertFrameIndices` 设为 `[0, 2, 4, 6, 8, 10]`。 + +## 需求 2：模板导出 JSON 文件名加时间戳 + +### 修改文件：`src/pages/TemplateManage.tsx` +在 `handleExportTemplate` 中，生成下载前追加北京时间戳： +```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` +在 `handleEditorClick` 的删除恢复分支中，补齐与 ReportEditor 一致的逻辑： +1. `.placeholder-text` 使用 `position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;` +2. 恢复 `width`（从 `maxWidth`）、`height`/`lineHeight`（从 `maxHeight`） +3. 设置 `textAlign='center'`、`verticalAlign='middle'`、`justifyContent='center'`、`alignItems='center'` +4. 根据宽度判断显示"插图"（<80px）或"插入/点击放置图片" + +## 涉及文件及修改点 +| 文件 | 修改点 | +|------|--------| +| `src/pages/Login.tsx` | `defaultSettings.autoInsertFrameIndices` 改为 `[0,2,4,6,8,10]` | +| `src/pages/SystemSettings.tsx` | `resetToDefault` 补全 autoInsert 相关字段，索引改为间隔抽取 | +| `src/pages/TemplateManage.tsx` | 导出文件名加时间戳；删除恢复补齐居中样式 | + +## 风险与注意事项 +1. `Login.tsx` 的修改只影响首次初始化（无 systemSettings 时），已有用户的 localStorage 不会被覆盖。 +2. `SystemSettings.tsx` 的 `resetToDefault` 是用户主动触发的重置操作，会覆盖现有设置。 +3. 两端编辑器的占位符删除恢复逻辑需要保持同步，后续修改时应同时检查 ReportEditor 和 TemplateManage。 diff --git a/工程分析/测试方案-2026-04-19-01-03-37.md b/工程分析/测试方案-2026-04-19-01-03-37.md new file mode 100644 index 0000000..862b309 --- /dev/null +++ b/工程分析/测试方案-2026-04-19-01-03-37.md @@ -0,0 +1,36 @@ +# 测试方案 —— 2026-04-19-01-03-37 + +## 测试目标 +验证默认帧索引、导出文件名、占位符删除恢复的正确性。 + +## 测试用例 + +### TC-1：默认自动插入帧为间隔抽取 +**步骤**： +1. 清空 localStorage 或重置系统，重新登录。 +2. 上传视频并自动摘取关键帧，观察自动插入的帧。 +**预期结果**：自动插入的是第 1、3、5、7、9、11 帧（索引 0、2、4、6、8、10）。 + +### TC-2：系统设置重置后帧索引正确 +**步骤**： +1. 进入系统设置，点击"恢复默认设置"。 +2. 上传视频测试自动插入。 +**预期结果**：同样插入间隔帧（第 1、3、5、7、9、11 帧）。 + +### TC-3：模板导出文件名带时间戳 +**步骤**： +1. 进入 TemplateManage，点击任意模板的"导出"按钮。 +**预期结果**：文件名为 `模板导出-模板名称-YYYY-MM-DD-HH-mm.json`。 + +### TC-4：TemplateManage 占位符删除后文字居中 +**步骤**： +1. 进入 TemplateManage，插入图片占位符，上传图片，再点击删除。 +**预期结果**：提示文字在虚线框内居中显示，不偏向左侧。 + +### TC-5：ReportEditor 占位符不受影响 +**步骤**： +1. 进入 ReportEditor，重复 TC-4 操作。 +**预期结果**：文字仍然居中，无变化。 + +## 测试通过标准 +所有用例通过，无控制台报错，两端编辑器行为一致。 diff --git a/工程分析/经验记录.md b/工程分析/经验记录.md index cdf5127..df47f4c 100644 --- a/工程分析/经验记录.md +++ b/工程分析/经验记录.md @@ -1312,3 +1312,30 @@ Dashboard 中"最近 30 天"模式的趋势图表过于密集：30 个蓝色圆 - SVG 的鼠标事件坐标映射需要注意 `viewBox` 与实际显示尺寸的缩放比例，通过 `getBoundingClientRect()` 做比例换算是可靠方案。 - Tooltip 等浮动层应使用 `pointer-events-none` 避免干扰下层交互，同时确保在容器 `relative` 定位下正确计算偏移。 - 透明捕获层是解决 SVG 内部元素间隙导致事件丢失的有效手段，特别是在只有线条/路径的图表中。 + + +--- + +## 记录 43：默认自动插入帧间隔抽取、导出文件名加时间戳、占位符删除恢复居中（修正版） + +**A. 具体问题** +1. 系统初始化时默认自动插入的帧为连续前 6 帧（索引 0~5），用户希望改为间隔抽取（第 1、3、5、7、9、11 帧，对应索引 0、2、4、6、8、10），同时保持 frameCount 为 12 不变。 +2. TemplateManage 单模板导出 JSON 文件名缺少时间戳。 +3. TemplateManage 编辑器中 `.image-placeholder` 删除图片后提示文字靠左，与 ReportEditor 不一致。 + +**B. 产生问题原因** +1. `Login.tsx` 的 `defaultSettings.autoInsertFrameIndices` 为 `[0, 1, 2, 3, 4, 5]`；`SystemSettings.tsx` 的 `resetToDefault` 完全缺失 `autoInsertFrames`、`autoInsertDelay`、`autoInsertFrameIndices` 字段。 +2. `handleExportTemplate` 直接拼接固定文件名，未加入时间戳。 +3. TemplateManage 的删除恢复逻辑缺少 `absolute` 居中样式和容器尺寸恢复。 + +**C. 解决问题方案** +1. **Login.tsx**：`autoInsertFrameIndices` 从 `[0, 1, 2, 3, 4, 5]` 改为 `[0, 2, 4, 6, 8, 10]`，frameCount 保持 12，framePositions 保持均匀分布。 +2. **SystemSettings.tsx**：`resetToDefault` 中补全 `autoInsertFrames: true`、`autoInsertDelay: 1`、`autoInsertFrameIndices: [0, 2, 4, 6, 8, 10]`。 +3. **TemplateManage.tsx**： + - 导出文件名加入北京时间戳：`模板导出-模板名称-YYYY-MM-DD-HH-mm.json` + - 删除恢复逻辑补齐 `absolute` 居中样式、尺寸恢复、`textAlign/verticalAlign/justifyContent/alignItems` + +**D. 后续如何避免问题** +- `resetToDefault` 函数中必须包含所有 `SystemSettings` 字段，不能遗漏任何新增配置项，否则重置后功能异常。 +- 两端编辑器共享控件时，应建立统一的"创建/填充/删除恢复"工具函数，避免在各自文件中维护重复且容易 diverge 的逻辑。 +- `autoInsertFrameIndices` 的默认值变更不影响已有用户数据，但重置操作会覆盖用户自定义的索引选择，需在重置提示中明确告知。 diff --git a/工程分析/需求分析-2026-04-19-01-03-37.md b/工程分析/需求分析-2026-04-19-01-03-37.md new file mode 100644 index 0000000..3d3c5fd --- /dev/null +++ b/工程分析/需求分析-2026-04-19-01-03-37.md @@ -0,0 +1,26 @@ +# 需求分析 —— 2026-04-19-01-03-37 + +## 需求来源 +用户在上次回退后重新提出三个优化需求，并明确要求 frameCount 保持 12 不变，仅调整 autoInsertFrameIndices 为间隔抽取。 + +## 需求概述 + +### 需求 1：默认自动插入帧改为间隔抽取（第1、3、5、7、9、11帧） +系统初始化或重置时，frameCount 保持 12 不变，但 autoInsertFrameIndices（自动插入的帧索引）从 `[0,1,2,3,4,5]`（连续前6帧）改为 `[0,2,4,6,8,10]`（间隔抽取，对应第1、3、5、7、9、11帧）。 + +### 需求 2：模板导出 JSON 文件名加时间戳 +TemplateManage 单模板导出时，文件名从 `模板导出-模板名称.json` 改为 `模板导出-模板名称-时间戳.json`。 + +### 需求 3：TemplateManage 占位符删除后文字居中 +对齐 ReportEditor 和 TemplateManage 的 `.image-placeholder` 删除恢复逻辑，补齐居中样式和尺寸恢复。 + +## 涉及文件 +- `src/pages/Login.tsx` — 需求 1 +- `src/pages/SystemSettings.tsx` — 需求 1（resetToDefault 补全） +- `src/pages/TemplateManage.tsx` — 需求 2、3 + +## 需求影响范围 +- 系统默认配置（新用户/重置后） +- 系统设置重置功能 +- 模板导出文件名格式 +- TemplateManage 编辑器占位符交互体验