mula
/
imetting_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
imetting_frontend/KB_TEMPLATE_SELECTION_IMPLE...

6.6 KiB
Raw Blame History

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

功能概述

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

实现的功能点

1. 添加状态管理 ✅

文件: frontend/src/pages/KnowledgeBasePage.jsx

添加了两个新的 state：

const [availablePrompts, setAvailablePrompts] = useState([]); // 可用的提示词模版列表
const [selectedPromptId, setSelectedPromptId] = useState(null); // 选中的提示词模版ID

2. 获取模版列表 ✅

文件: frontend/src/pages/KnowledgeBasePage.jsx

新增方法 fetchAvailablePrompts()：

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）中添加模版选择下拉框：

{/* 模版选择 */}
{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 传递给后端：

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 端点配置：

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

添加模版选择器的样式：

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

总结

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