admin
e549419a4c
- 切换模板时同步清空 chatMessages/chatInput/aiUploadedImages/aiSelectedFrames - 修复stripHtml双换行导致diff modal原始版本段落间距过大 - API密钥input改为ref非受控组件, DOM中不再出现value=sk-xxx属性 - 默认模型名改为 moonshot-v1-32k-vision-preview
99 lines
2.5 KiB
Markdown
99 lines
2.5 KiB
Markdown
# 功能变更实现方案文档（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 渲染，不影响编辑器本身
|