# 知识库新增页面 - 模版选择功能实现总结

## 功能概述
在知识库新增流程的第二步"自定义提示词"中添加了模版选择功能，用户可以选择预设的模版来生成知识库内容。

## 实现的功能点

### 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）

## 总结

知识库新增页面的模版选择功能已完全实现，用户现在可以在创建知识库时灵活选择不同的生成模版，大大提升了知识库生成的灵活性和个性化程度。