# 实现方案 —— 2026-04-18-20-03-44

## 方案目标
实现模板的导入/导出迁移能力，统一默认模板 Logo 的交互行为。

## 需求 1：模板导出功能

### 修改文件
`src/pages/TemplateManage.tsx`

### 修改内容
在模板列表的每个模板行操作列中增加「导出」按钮（使用 Download 图标）。点击时：
```ts
const handleExportTemplate = (template: Template) => {
  const exportData = {
    version: '1.0',
    type: 'surclaw_template_package',
    title: template.title,
    description: template.description,
    content: template.content,
    fields: template.fields || []
  };
  const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `模板导出-${template.title}.json`;
  a.click();
  URL.revokeObjectURL(url);
};
```

## 需求 2：模板导入功能

### 修改文件
`src/pages/TemplateManage.tsx`

### 修改内容
1. **新增状态**：
   ```ts
   const [importedContent, setImportedContent] = useState<{content: string, fields: FormField[]} | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   ```

2. **新增导入处理函数**：
   ```ts
   const handleImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
     const reader = new FileReader();
     reader.onload = (event) => {
       try {
         const json = JSON.parse(event.target?.result as string);
         if (json.type !== 'surclaw_template_package') {
           alert('无效的模板包文件');
           return;
         }
         setNewTemplateTitle(json.title || '');
         setNewTemplateDescription(json.description || '');
         setImportedContent({
           content: json.content || '',
           fields: Array.isArray(json.fields) ? json.fields : []
         });
       } catch {
         alert('文件解析失败，请检查 JSON 格式');
       }
     };
     reader.readAsText(file);
   };
   ```

3. **修改创建逻辑**：在 `handleCreateTemplate` 中，如果有 `importedContent`，优先使用导入的内容和字段：
   ```ts
   const newTemplate: Template = {
     id: 'tmpl_' + Date.now(),
     title: newTemplateTitle,
     description: newTemplateDescription,
     content: importedContent?.content || `<div style="font-size:12pt;line-height:1.5;"><p>请输入模板内容...</p></div>`,
     fields: importedContent?.fields || [],
     createdAt: new Date().toISOString()
   };
   ```

4. **UI 调整**：在新增模板 Modal 中标题下方加入导入区域：
   ```tsx
   <div className="flex items-center gap-3 mb-4 p-3 bg-slate-50 rounded-xl border border-dashed border-slate-200">
     <div className="text-xs text-text-muted flex-1">已有模板文件？点击右侧图标导入</div>
     <button
       onClick={() => fileInputRef.current?.click()}
       className="w-8 h-8 bg-accent text-white rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors shadow-sm"
     >
       <Upload size={16} />
     </button>
     <input ref={fileInputRef} type="file" accept=".json" className="hidden" onChange={handleImportFile} />
   </div>
   ```

5. **关闭 Modal 时重置**：`setImportedContent(null)`

## 需求 3：Logo 替换为可交互占位符

### 修改文件
`src/utils/defaultContent.ts`

### 修改内容
将默认模板顶部的 Logo HTML 替换为标准 `image-placeholder`：
```html
<span class="image-placeholder" data-placeholder="true" contenteditable="false" data-mode="manual" style="display:inline-block;text-align:center;width:65px;height:65px;line-height:65px;border:1px dashed #cbd5e1;background:#f8fafc;vertical-align:middle;margin:0 4px;cursor:pointer;position:relative;">
    <span class="delete-btn" contenteditable="false">×</span>
    <span class="placeholder-text" style="color:#94a3b8;font-size:11px;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">LOGO</span>
</span>
```

关键点：
- `class="image-placeholder"`：触发编辑器中的占位符交互逻辑
- `data-mode="manual"`：标记为静态图片占位，不支持自动帧插入
- `position:relative` + `position:absolute` 居中：确保提示文字绝对居中
- `delete-btn`：支持点击右上方的「×」删除

## 涉及文件及修改点
| 文件 | 修改点 |
|------|--------|
| `src/pages/TemplateManage.tsx` | 新增 `handleExportTemplate`；新增 `importedContent` 状态和 `handleImportFile`；修改 `handleCreateTemplate` 使用导入数据；新增模板 Modal 中增加导入 UI；模板列表操作列增加导出按钮 |
| `src/utils/defaultContent.ts` | 顶部 Logo 替换为标准 `image-placeholder` |

## 风险与注意事项
1. 导入的 JSON 中 `fields` 数组需要与 `FormField` 类型结构兼容。由于 JSON 导入的是纯数据，直接赋值给 `template.fields` 即可（TypeScript 编译时类型校验通过）。
2. 导出文件名中包含模板标题，需注意标题中的特殊字符可能影响文件名（但浏览器通常会自动处理）。
3. Logo 占位符替换后，原有「西安交通大学第一附属医院」的样式应保持不变，仅替换 Logo 部分。
4. 新增模板弹窗关闭时，需同步重置 `importedContent` 为 `null`，避免影响下一次创建。