2026-04-18-20-03-44 - 追加经验记录34：模板导入导出与Logo占位符

工程分析/经验记录.md

@@ -1047,3 +1047,31 @@ if ((settings.autoInsertDelay || 0) > 0) {
 - 当修改 `image-placeholder` 的创建或恢复逻辑时，必须在所有入口同步更新：`defaultContent.ts`（静态模板）、`ReportEditor.tsx`（运行时插入/填充/删除恢复）、`TemplateManage.tsx`（模板管理）。
 - 任何涉及 `execCommand` 的富文本操作都应评估其安全性，优先使用直接 DOM 样式操作（如 `style.textAlign`、`style.lineHeight`）替代，避免浏览器原生命令对复杂 DOM 结构的不可控修改。
 - 绝对定位的居中方案（`transform: translate(-50%, -50%)`）虽然效果稳定，但要求父容器必须带有 `position: relative`，修改时需同步检查所有父容器的样式。
+
+---
+
+## 记录 34：模板导入导出迁移与 Logo 占位符替换
+
+**A. 具体问题**
+1. 模板管理模块缺乏数据迁移能力：用户无法将配置好的模板（含字段管理配置）导出为文件，也无法在新建模板时通过文件导入已有配置。
+2. 默认模板顶部 Logo 虽然已是 `image-placeholder`，但使用的是 `display:inline-flex` 布局，与运行时插入的占位符（`display:inline-block`）样式不一致，导致交互体验不统一。
+
+**B. 产生问题原因**
+1. 系统设计初期未考虑模板迁移场景，Template 类型缺少 `fields` 属性，字段配置仅保存在全局 `formFieldsConfig` 中。
+2. Logo 占位符在默认模板中独立硬编码，未与运行时插入逻辑保持一致的标准结构。
+
+**C. 解决问题方案**
+1. **Template 类型扩展**：在 `src/types.ts` 的 `Template` 接口中新增 `fields?: FormField[]`。
+2. **模板导出功能**：在 `TemplateManage.tsx` 中新增 `handleExportTemplate` 函数，导出 JSON 结构包含 `version`、`type`、`title`、`description`、`content`、`fields`。
+3. **模板导入功能**：
+   - 新增 `importedContent` 状态（`{content: string; fields: FormField[]}`）和 `fileInputRef`
+   - 新增 `handleImportFile` 函数：解析 JSON，验证 `type === 'surclaw_template_package'`，自动填充名称和描述，暂存内容和字段
+   - 在新增模板 Modal 中增加导入 UI（使用用户指定的 `w-8 h-8 bg-accent...` 样式类名）
+   - 修改 `handleModalSubmit`：新建模板时优先使用 `importedContent.content` 和 `importedContent.fields`，并同步保存到全局 `formFieldsConfig`
+   - 切换模板时（`currentTemplateId` 变化），如果模板有 `fields` 则加载到编辑器并同步保存到全局配置
+4. **Logo 占位符标准化**：将 `defaultContent.ts` 中 Logo 的 `display:inline-flex` 改为 `display:inline-block`，统一使用 `text-align:center` + `line-height:65px` 的垂直居中方式，提示文字改为「LOGO」。
+
+**D. 后续如何避免问题**
+- 当扩展数据类型（如 Template 接口）时，应评估是否需要同步修改所有使用该类型的持久化/序列化逻辑（如 storage 读写、导入/导出）。
+- 默认模板中的占位符结构必须与运行时插入逻辑保持完全一致（`display`、居中方式、`data-mode` 等），任何差异都可能导致交互体验不一致。
+- 新增文件上传/导入功能时，必须在 onChange 事件末尾清空 `e.target.value = ''`，否则同一文件无法重复选择。