# 功能变更实现方案文档（20260419_2344）

## 实现方案 A：切换模板时重置 AI 对话

### 变更点
`ReportEditor.tsx` line 1240-1251（模板应用 useEffect 中）。

### 具体实现
在 `setCapturedFrames([])` 之后、`updatePageHeight()` 之前，添加：
```tsx
setChatMessages([]);
setChatInput('');
setAiUploadedImages([]);
setAiSelectedFrames([]);
stateRef.current = {
  ...stateRef.current,
  chatMessages: [],
  chatInput: '',
  videos: [],
  capturedFrames: []
};
```

同时更新 `stateRef.current`，确保草稿保存时不会残留旧 AI 数据。

---

## 实现方案 B：修复 diff modal 段落间距

### 变更点
`ReportEditor.tsx` line 835-838 的 `stripHtml` 函数。

### 具体实现
从：
```ts
tmp.innerHTML = html.replace(/<\/p>/gi, '</p>\n').replace(/<br\s*\/?>/gi, '\n');
```

改为：
```ts
tmp.innerHTML = html.replace(/<br\s*\/?>/gi, '\n');
```

`innerText` 本身会在块级 `<p>` 元素之间自动插入换行，无需手动添加。去掉手动插入后，段落间距恢复正常。

---

## 实现方案 C：API 密钥 DOM 暴露修复

### 变更点
`src/pages/SystemSettings.tsx` line 362-377 的 API Key input。

### 具体实现
1. 导入 `useRef`
2. 创建 `apiKeyInputRef = useRef<HTMLInputElement>(null)`
3. 使用 `useEffect` 在 apiKey 变化时通过 ref 设置 DOM value：
```tsx
const apiKeyInputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  if (apiKeyInputRef.current) {
    const targetValue = settings.aiProviders[settings.activeAiProvider]?.apiKey || '';
    if (apiKeyInputRef.current.value !== targetValue) {
      apiKeyInputRef.current.value = targetValue;
    }
  }
}, [settings.aiProviders[settings.activeAiProvider]?.apiKey]);
```
4. input 标签移除 `value` prop：
```tsx
<input 
  ref={apiKeyInputRef}
  type="password" 
  onChange={...}
  onCopy={(e) => e.preventDefault()}
  onCut={(e) => e.preventDefault()}
  placeholder="sk-xxxxxxxxxxxxxxxx"
  className="input-minimal"
/>
```

DOM 中不再出现 `value="sk-..."` HTML 属性。

---

## 实现方案 D：默认模型名切换

### 变更点
- `src/types.ts` line 92：`modelName: 'moonshot-v1-32k-vision-preview'`
- `src/pages/SystemSettings.tsx` migration fallback line 41：同步修改
- `src/pages/ReportEditor.tsx` fallback line 901：同步修改

---

## 依赖与兼容性
- 无新增 npm 依赖
- API Key input 改为非受控后，不影响现有 onChange 保存逻辑
- stripHtml 修改仅影响 diff modal 渲染，不影响编辑器本身