102 lines
4.4 KiB
Markdown
102 lines
4.4 KiB
Markdown
# 实现方案 —— 2026-04-18-19-37-56
|
||
|
||
## 方案目标
|
||
修复编辑器中的 4 个体验问题，提升视频面板、图片占位符和对齐功能的稳定性。
|
||
|
||
## 需求 1：视频上传按钮位置调整
|
||
|
||
### 修改文件
|
||
`src/pages/ReportEditor.tsx`
|
||
|
||
### 修改内容
|
||
在「视频分析」面板的缩略图滚动容器中，将 `<button>上传视频</button>` 从 `videos.map()` 之前移至之后。保持按钮样式和点击逻辑不变。
|
||
|
||
## 需求 2：图片占位符提示文字绝对居中
|
||
|
||
### 修改文件
|
||
`src/pages/ReportEditor.tsx`、`src/pages/TemplateManage.tsx`、`src/utils/defaultContent.ts`
|
||
|
||
### 修改内容
|
||
将 `.placeholder-text` 的样式改为绝对定位居中：
|
||
```css
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: block;
|
||
width: 100%;
|
||
```
|
||
|
||
需要确保 `.image-placeholder` 父容器带有 `position: relative;`（默认模板和运行时插入逻辑中已具备）。
|
||
|
||
修改位置：
|
||
1. `defaultContent.ts` 中 8 个占位符的 `.placeholder-text` style
|
||
2. `ReportEditor.tsx` 中 `placeholderModal` 确认插入时的 `.placeholder-text` style
|
||
3. `TemplateManage.tsx` 中 `placeholderModal` 确认插入时的 `.placeholder-text` style
|
||
4. `ReportEditor.tsx` 和 `TemplateManage.tsx` 中 `handleEditorClick` 删除图片后重建 `.placeholder-text` 的 innerHTML
|
||
|
||
## 需求 3：删除图片后占位符恢复原始大小
|
||
|
||
### 修改文件
|
||
`src/pages/ReportEditor.tsx`、`src/pages/TemplateManage.tsx`
|
||
|
||
### 修改内容
|
||
在 `handleEditorClick` 中处理 `.delete-btn` 点击、恢复占位符为空的逻辑中，增加尺寸恢复：
|
||
```ts
|
||
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';
|
||
```
|
||
|
||
同时需要恢复其他被修改的样式：
|
||
- `border: 1px dashed #cbd5e1`
|
||
- `background: #f8fafc`
|
||
- `vertical-align: middle`（inline-block 占位符）
|
||
- `justify-content: center; align-items: center`（flex 占位符）
|
||
|
||
由于无法直接区分 flex 和 inline-block，可以通过检查 `placeholder.style.display` 或简单地将 `justifyContent` 和 `alignItems` 重置为 `center`（对 inline-block 无影响）。
|
||
|
||
## 需求 4：对齐按钮改用安全的 DOM 操作
|
||
|
||
### 修改文件
|
||
`src/pages/ReportEditor.tsx`、`src/pages/TemplateManage.tsx`
|
||
|
||
### 修改内容
|
||
1. **新增 `changeAlignment` 方法**：
|
||
```ts
|
||
const changeAlignment = (align: 'left' | 'center' | 'right' | 'justify') => {
|
||
const sel = window.getSelection();
|
||
if (!sel || !sel.rangeCount) return;
|
||
let node = sel.getRangeAt(0).commonAncestorContainer;
|
||
if (node.nodeType === Node.TEXT_NODE) node = node.parentNode as Node;
|
||
const block = (node as HTMLElement).closest('p, div, td, h1, h2, h3, h4, h5, h6, li');
|
||
if (block) {
|
||
(block as HTMLElement).style.textAlign = align;
|
||
if (editorRef.current) {
|
||
contentRef.current = editorRef.current.innerHTML;
|
||
saveDraftToStorage(); // ReportEditor
|
||
// saveTemplateContent(); // TemplateManage
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
2. **替换工具栏按钮**：将三个对齐按钮的 `onClick={() => execCmd('justifyLeft')}` 等替换为 `onClick={() => changeAlignment('left')}` 等。保留 `onMouseDown={(e) => e.preventDefault()}` 以防止编辑器失焦。
|
||
|
||
## 涉及文件及修改点
|
||
| 文件 | 修改点 |
|
||
|------|--------|
|
||
| `src/pages/ReportEditor.tsx` | 视频按钮位置；placeholder-text 样式（3 处：插入、删除恢复、Modal）；删除恢复时尺寸复原；新增 changeAlignment；替换对齐按钮 |
|
||
| `src/pages/TemplateManage.tsx` | placeholder-text 样式（3 处）；删除恢复时尺寸复原；新增 changeAlignment；替换对齐按钮 |
|
||
| `src/utils/defaultContent.ts` | 8 个占位符的 placeholder-text 样式更新为绝对居中 |
|
||
|
||
## 风险与注意事项
|
||
1. `changeAlignment` 中 `closest('p, div, ...')` 如果选中了编辑器根容器（`contenteditable` div），可能会对齐整个文档。但由于工具栏按钮要求编辑器已聚焦，通常选区在正文内部，风险较低。
|
||
2. 占位符删除恢复时，`maxWidth`/`maxHeight` 的回退逻辑需确保在所有场景下（默认模板、运行时插入）都能正确读取。
|
||
3. 绝对居中的 `position:absolute` 需要父容器 `position:relative`，需验证所有占位符均满足。
|