247 lines
6.6 KiB
Markdown
247 lines
6.6 KiB
Markdown
# 知识库新增页面 - 模版选择功能实现总结
|
||
|
||
## 功能概述
|
||
在知识库新增流程的第二步"自定义提示词"中添加了模版选择功能，用户可以选择预设的模版来生成知识库内容。
|
||
|
||
## 实现的功能点
|
||
|
||
### 1. 添加状态管理 ✅
|
||
**文件**: `frontend/src/pages/KnowledgeBasePage.jsx`
|
||
|
||
添加了两个新的 state：
|
||
```javascript
|
||
const [availablePrompts, setAvailablePrompts] = useState([]); // 可用的提示词模版列表
|
||
const [selectedPromptId, setSelectedPromptId] = useState(null); // 选中的提示词模版ID
|
||
```
|
||
|
||
### 2. 获取模版列表 ✅
|
||
**文件**: `frontend/src/pages/KnowledgeBasePage.jsx`
|
||
|
||
新增方法 `fetchAvailablePrompts()`：
|
||
```javascript
|
||
const fetchAvailablePrompts = async () => {
|
||
try {
|
||
const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.PROMPTS.ACTIVE('KNOWLEDGE_TASK')));
|
||
const promptsList = response.data.prompts || [];
|
||
setAvailablePrompts(promptsList);
|
||
|
||
// 自动选中默认模版
|
||
const defaultPrompt = promptsList.find(p => p.is_default);
|
||
if (defaultPrompt) {
|
||
setSelectedPromptId(defaultPrompt.id);
|
||
}
|
||
} catch (error) {
|
||
console.error("Error fetching available prompts:", error);
|
||
setAvailablePrompts([]);
|
||
}
|
||
};
|
||
```
|
||
|
||
**调用时机**：
|
||
- 在 `handleOpenCreateModal()` 中调用，当用户打开新增知识库弹窗时获取模版列表
|
||
- 自动选中默认模版，无需用户手动选择
|
||
|
||
### 3. UI 实现 ✅
|
||
**文件**: `frontend/src/pages/KnowledgeBasePage.jsx`
|
||
|
||
在第二步（`createStep === 2`）中添加模版选择下拉框：
|
||
|
||
```jsx
|
||
{/* 模版选择 */}
|
||
{availablePrompts.length > 0 && (
|
||
<div className="form-group">
|
||
<label>选择生成模版（可选）</label>
|
||
<p className="field-hint">选择一个预设的模版来生成知识库内容，或使用默认模版。</p>
|
||
<select
|
||
value={selectedPromptId || ''}
|
||
onChange={(e) => setSelectedPromptId(e.target.value ? parseInt(e.target.value) : null)}
|
||
className="template-select"
|
||
>
|
||
{availablePrompts.map(prompt => (
|
||
<option key={prompt.id} value={prompt.id}>
|
||
{prompt.name} {prompt.is_default ? '(默认)' : ''}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
)}
|
||
```
|
||
|
||
**UI 特点**：
|
||
- 只在有可用模版时显示
|
||
- 第一个选项为"使用默认模版"（value为空）
|
||
- 每个模版选项显示名称，默认模版标注"(默认)"
|
||
- 支持清空选择（返回默认模版）
|
||
|
||
### 4. 数据传递 ✅
|
||
**文件**: `frontend/src/pages/KnowledgeBasePage.jsx`
|
||
|
||
修改 `handleGenerate()` 方法，将 `prompt_id` 传递给后端：
|
||
|
||
```javascript
|
||
const handleGenerate = async () => {
|
||
if (!selectedMeetings || selectedMeetings.length === 0) {
|
||
showToast('请至少选择一个会议', 'warning');
|
||
return;
|
||
}
|
||
|
||
setGenerating(true);
|
||
try {
|
||
const response = await apiClient.post(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.CREATE), {
|
||
user_prompt: userPrompt,
|
||
source_meeting_ids: selectedMeetings.join(','),
|
||
is_shared: false,
|
||
prompt_id: selectedPromptId // 传递选中的模版ID
|
||
});
|
||
setTaskId(response.data.task_id);
|
||
} catch (error) {
|
||
console.error("Error creating knowledge base:", error);
|
||
setGenerating(false);
|
||
}
|
||
};
|
||
```
|
||
|
||
### 5. API 配置 ✅
|
||
**文件**: `frontend/src/config/api.js`
|
||
|
||
添加新的 API 端点配置：
|
||
|
||
```javascript
|
||
PROMPTS: {
|
||
LIST: '/api/prompts',
|
||
CREATE: '/api/prompts',
|
||
UPDATE: (promptId) => `/api/prompts/${promptId}`,
|
||
DELETE: (promptId) => `/api/prompts/${promptId}`,
|
||
ACTIVE: (taskType) => `/api/prompts/active/${taskType}` // 获取指定任务类型的启用模版
|
||
},
|
||
```
|
||
|
||
### 6. CSS 样式 ✅
|
||
**文件**: `frontend/src/pages/KnowledgeBasePage.css`
|
||
|
||
添加模版选择器的样式：
|
||
|
||
```css
|
||
.field-hint {
|
||
font-size: 0.875rem;
|
||
color: #64748b;
|
||
margin-bottom: 0.5rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.template-select {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 8px;
|
||
font-family: inherit;
|
||
font-size: 0.95rem;
|
||
background-color: white;
|
||
color: #1e293b;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.template-select:hover {
|
||
border-color: #cbd5e1;
|
||
}
|
||
|
||
.template-select:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||
}
|
||
|
||
.template-select option {
|
||
padding: 0.5rem;
|
||
}
|
||
```
|
||
|
||
## 用户流程
|
||
|
||
1. **打开新增知识库弹窗**
|
||
- 点击"新增知识条目"按钮
|
||
- 自动获取 KNOWLEDGE_TASK 类型的启用模版列表
|
||
|
||
2. **第一步：选择会议**
|
||
- 选择一个或多个会议作为数据源
|
||
- 点击"下一步"
|
||
|
||
3. **第二步：自定义提示词**
|
||
- 【新增】选择生成模版（可选）
|
||
- 下拉框显示所有启用的知识库模版
|
||
- 默认选中标记为"默认"的模版
|
||
- 可以选择其他模版或清空选择
|
||
- 输入用户提示词（可选）
|
||
- 点击"生成知识库"
|
||
|
||
4. **生成知识库**
|
||
- 系统将 `prompt_id` 和 `user_prompt` 一起发送到后端
|
||
- 后端根据选择的模版生成知识库内容
|
||
|
||
## 数据流
|
||
|
||
```
|
||
用户打开弹窗
|
||
↓
|
||
fetchAvailablePrompts()
|
||
↓
|
||
GET /api/prompts/active/KNOWLEDGE_TASK
|
||
↓
|
||
获取启用的模版列表
|
||
↓
|
||
自动选中默认模版
|
||
↓
|
||
用户可以选择其他模版
|
||
↓
|
||
用户点击"生成知识库"
|
||
↓
|
||
POST /api/knowledge-bases
|
||
{
|
||
user_prompt: "...",
|
||
source_meeting_ids: "1,2,3",
|
||
is_shared: false,
|
||
prompt_id: 13 // 选中的模版ID
|
||
}
|
||
↓
|
||
后端使用指定模版生成知识库
|
||
```
|
||
|
||
## 兼容性
|
||
|
||
- **向后兼容**：prompt_id 为可选参数，不选择时传 null，后端使用默认模版
|
||
- **容错处理**：如果获取模版列表失败，不影响正常流程，用户仍可生成知识库
|
||
- **智能默认**：自动选中默认模版，减少用户操作
|
||
|
||
## 特点
|
||
|
||
1. **用户友好**
|
||
- 自动选中默认模版，无需手动选择
|
||
- 清晰标注哪个是默认模版
|
||
- 提供"使用默认模版"选项方便重置
|
||
|
||
2. **界面一致**
|
||
- 与会议总结的模版选择保持一致的设计风格
|
||
- 使用相同的 UI 组件和样式
|
||
|
||
3. **灵活性**
|
||
- 支持选择任何启用的 KNOWLEDGE_TASK 模版
|
||
- 可以与用户提示词组合使用
|
||
- 可以随时切换模版
|
||
|
||
## 文件变更列表
|
||
|
||
1. `frontend/src/pages/KnowledgeBasePage.jsx` - 主要逻辑实现
|
||
2. `frontend/src/pages/KnowledgeBasePage.css` - 样式文件
|
||
3. `frontend/src/config/api.js` - API 配置
|
||
|
||
## 后续优化建议
|
||
|
||
1. 可以考虑在模版选择器中显示模版的描述或预览
|
||
2. 可以添加"查看模版详情"的功能
|
||
3. 可以记住用户上次选择的模版（localStorage）
|
||
|
||
## 总结
|
||
|
||
知识库新增页面的模版选择功能已完全实现，用户现在可以在创建知识库时灵活选择不同的生成模版，大大提升了知识库生成的灵活性和个性化程度。
|