877 lines
31 KiB
React
877 lines
31 KiB
React
|
import React, { useState, useEffect } from 'react';
|
|||
|
|
import { Database, ChevronLeft, ChevronRight, Plus, Calendar, Trash2, Edit, FileText, Image, X } from 'lucide-react';
|
|||
|
|
import { useNavigate } from 'react-router-dom';
|
|||
|
|
import apiClient from '../utils/apiClient';
|
|||
|
|
import { buildApiUrl, API_ENDPOINTS } from '../config/api';
|
|||
|
|
import ContentViewer from '../components/ContentViewer';
|
|||
|
|
import TagDisplay from '../components/TagDisplay';
|
|||
|
|
import Toast from '../components/Toast';
|
|||
|
|
import ConfirmDialog from '../components/ConfirmDialog';
|
|||
|
|
import FormModal from '../components/FormModal';
|
|||
|
|
import StepIndicator from '../components/StepIndicator';
|
|||
|
|
import SimpleSearchInput from '../components/SimpleSearchInput';
|
|||
|
|
import Breadcrumb from '../components/Breadcrumb';
|
|||
|
|
import remarkGfm from 'remark-gfm';
|
|||
|
|
import rehypeRaw from 'rehype-raw';
|
|||
|
|
import rehypeSanitize from 'rehype-sanitize';
|
|||
|
|
import exportService from '../services/exportService';
|
|||
|
|
import tools from '../utils/tools';
|
|||
|
|
import PageLoading from '../components/PageLoading';
|
|||
|
|
import meetingCacheService from '../services/meetingCacheService';
|
|||
|
|
import './KnowledgeBasePage.css';
|
|||
|
|
|
|||
|
|
const KnowledgeBasePage = ({ user }) => {
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
const [kbs, setKbs] = useState([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [selectedKb, setSelectedKb] = useState(null);
|
|||
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|||
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|||
|
|
const [meetings, setMeetings] = useState([]);
|
|||
|
|
const [selectedMeetings, setSelectedMeetings] = useState([]);
|
|||
|
|
const [userPrompt, setUserPrompt] = useState('');
|
|||
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|||
|
|
const [selectedTags, setSelectedTags] = useState([]);
|
|||
|
|
const [availableTags, setAvailableTags] = useState([]);
|
|||
|
|
const [generating, setGenerating] = useState(false);
|
|||
|
|
const [taskId, setTaskId] = useState(null);
|
|||
|
|
const [progress, setProgress] = useState(0);
|
|||
|
|
const [deleteConfirmInfo, setDeleteConfirmInfo] = useState(null);
|
|||
|
|
const [toasts, setToasts] = useState([]);
|
|||
|
|
const [createStep, setCreateStep] = useState(1); // 1: 选择会议, 2: 输入提示词
|
|||
|
|
const [meetingsPagination, setMeetingsPagination] = useState({ page: 1, total: 0, has_more: false });
|
|||
|
|
const [loadingMeetings, setLoadingMeetings] = useState(false);
|
|||
|
|
const [availablePrompts, setAvailablePrompts] = useState([]); // 可用的提示词模版列表
|
|||
|
|
const [selectedPromptId, setSelectedPromptId] = useState(null); // 选中的提示词模版ID
|
|||
|
|
|
|||
|
|
// Toast helper functions
|
|||
|
|
const showToast = (message, type = 'info') => {
|
|||
|
|
const id = Date.now();
|
|||
|
|
setToasts(prev => [...prev, { id, message, type }]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeToast = (id) => {
|
|||
|
|
setToasts(prev => prev.filter(toast => toast.id !== id));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchAllKbs();
|
|||
|
|
fetchAllTagsForFilter(); // 获取标签云数据
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
// 当搜索或标签过滤变化时，重新加载第一页
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (showCreateForm) {
|
|||
|
|
fetchMeetings(1);
|
|||
|
|
}
|
|||
|
|
}, [searchQuery, selectedTags, showCreateForm]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (taskId) {
|
|||
|
|
const interval = setInterval(() => {
|
|||
|
|
apiClient.get(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.TASK_STATUS(taskId)))
|
|||
|
|
.then(response => {
|
|||
|
|
const { status, progress } = response.data;
|
|||
|
|
setProgress(progress || 0);
|
|||
|
|
if (status === 'completed') {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
setTaskId(null);
|
|||
|
|
setGenerating(false);
|
|||
|
|
setProgress(0);
|
|||
|
|
setUserPrompt('');
|
|||
|
|
setSelectedMeetings([]);
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
setCreateStep(1); // 重置步骤
|
|||
|
|
setSearchQuery('');
|
|||
|
|
setSelectedTags([]);
|
|||
|
|
fetchAllKbs();
|
|||
|
|
} else if (status === 'failed') {
|
|||
|
|
clearInterval(interval);
|
|||
|
|
setTaskId(null);
|
|||
|
|
setGenerating(false);
|
|||
|
|
setProgress(0);
|
|||
|
|
showToast('知识库生成失败，请稍后重试', 'error');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error("Error fetching task status:", error);
|
|||
|
|
clearInterval(interval);
|
|||
|
|
setTaskId(null);
|
|||
|
|
setGenerating(false);
|
|||
|
|
setProgress(0);
|
|||
|
|
});
|
|||
|
|
}, 2000);
|
|||
|
|
return () => clearInterval(interval);
|
|||
|
|
}
|
|||
|
|
}, [taskId]);
|
|||
|
|
|
|||
|
|
const fetchAllKbs = () => {
|
|||
|
|
setLoading(true);
|
|||
|
|
// 获取所有知识库（个人和共享）
|
|||
|
|
apiClient.get(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.LIST))
|
|||
|
|
.then(response => {
|
|||
|
|
// 按创建时间倒序排序
|
|||
|
|
const sortedKbs = response.data.kbs.sort((a, b) =>
|
|||
|
|
new Date(b.created_at) - new Date(a.created_at)
|
|||
|
|
);
|
|||
|
|
setKbs(sortedKbs);
|
|||
|
|
// 如果有知识库且没有选中，默认选中第一个
|
|||
|
|
if (sortedKbs.length > 0 && !selectedKb) {
|
|||
|
|
loadKbDetail(sortedKbs[0].kb_id);
|
|||
|
|
}
|
|||
|
|
setLoading(false);
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error("Error fetching knowledge bases:", error);
|
|||
|
|
setLoading(false);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const fetchMeetings = async (page = 1) => {
|
|||
|
|
try {
|
|||
|
|
// 生成当前过滤器的键（不包含filterType，因为知识库这里不需要）
|
|||
|
|
const filterKey = meetingCacheService.generateFilterKey('all', searchQuery, selectedTags);
|
|||
|
|
|
|||
|
|
// 先检查缓存
|
|||
|
|
const cachedPage = meetingCacheService.getPage(filterKey, page);
|
|||
|
|
if (cachedPage) {
|
|||
|
|
console.log('Using cached page:', page, 'for filter:', filterKey);
|
|||
|
|
setMeetings(cachedPage.meetings);
|
|||
|
|
setMeetingsPagination(cachedPage.pagination);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 没有缓存，从服务器获取
|
|||
|
|
setLoadingMeetings(true);
|
|||
|
|
|
|||
|
|
const params = {
|
|||
|
|
user_id: user.user_id,
|
|||
|
|
page: page,
|
|||
|
|
search: searchQuery || undefined,
|
|||
|
|
tags: selectedTags.length > 0 ? selectedTags.join(',') : undefined
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.MEETINGS.LIST), { params });
|
|||
|
|
|
|||
|
|
const newMeetings = response.data.meetings || [];
|
|||
|
|
const newPagination = {
|
|||
|
|
page: response.data.page,
|
|||
|
|
total: response.data.total,
|
|||
|
|
has_more: response.data.has_more
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 缓存当前页数据
|
|||
|
|
meetingCacheService.setPage(filterKey, page, newMeetings, newPagination);
|
|||
|
|
|
|||
|
|
setMeetings(newMeetings);
|
|||
|
|
setMeetingsPagination(newPagination);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("Error fetching meetings:", error);
|
|||
|
|
setMeetings([]);
|
|||
|
|
} finally {
|
|||
|
|
setLoadingMeetings(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取所有标签用于过滤器
|
|||
|
|
const fetchAllTagsForFilter = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.TAGS.LIST));
|
|||
|
|
const allTags = response.data || [];
|
|||
|
|
// 取前6个热门标签
|
|||
|
|
const topSixTags = allTags.slice(0, 6).map(tag => tag.name);
|
|||
|
|
setAvailableTags(topSixTags);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("Error fetching tags:", error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 获取知识库任务的启用提示词模版列表
|
|||
|
|
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([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadKbDetail = async (kbId) => {
|
|||
|
|
try {
|
|||
|
|
const response = await apiClient.get(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.DETAIL(kbId)));
|
|||
|
|
setSelectedKb(response.data);
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("Error loading knowledge base detail:", error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleKbSelect = (kb) => {
|
|||
|
|
loadKbDetail(kb.kb_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);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const toggleMeetingSelection = (meetingId) => {
|
|||
|
|
setSelectedMeetings(prev =>
|
|||
|
|
prev.includes(meetingId)
|
|||
|
|
? prev.filter(id => id !== meetingId)
|
|||
|
|
: [...prev, meetingId]
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePageChange = (newPage) => {
|
|||
|
|
fetchMeetings(newPage);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleTagToggle = (tag) => {
|
|||
|
|
setSelectedTags(prev =>
|
|||
|
|
prev.includes(tag)
|
|||
|
|
? prev.filter(t => t !== tag)
|
|||
|
|
: [...prev, tag]
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const clearFilters = () => {
|
|||
|
|
setSearchQuery('');
|
|||
|
|
setSelectedTags([]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleOpenCreateModal = () => {
|
|||
|
|
setCreateStep(1);
|
|||
|
|
setSelectedMeetings([]);
|
|||
|
|
setUserPrompt('');
|
|||
|
|
setSearchQuery('');
|
|||
|
|
setSelectedTags([]);
|
|||
|
|
setSelectedPromptId(null);
|
|||
|
|
setShowCreateForm(true);
|
|||
|
|
// 获取可用的提示词模版
|
|||
|
|
fetchAvailablePrompts();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCloseCreateModal = () => {
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
setCreateStep(1);
|
|||
|
|
setSelectedMeetings([]);
|
|||
|
|
setUserPrompt('');
|
|||
|
|
setSearchQuery('');
|
|||
|
|
setSelectedTags([]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleNextStep = () => {
|
|||
|
|
if (selectedMeetings.length === 0) {
|
|||
|
|
showToast('请至少选择一个会议', 'warning');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setCreateStep(2);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handlePrevStep = () => {
|
|||
|
|
setCreateStep(1);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleDelete = async (kb) => {
|
|||
|
|
setDeleteConfirmInfo({ kb_id: kb.kb_id, title: kb.title });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const confirmDelete = async () => {
|
|||
|
|
try {
|
|||
|
|
await apiClient.delete(buildApiUrl(API_ENDPOINTS.KNOWLEDGE_BASE.DELETE(deleteConfirmInfo.kb_id)));
|
|||
|
|
// 如果删除的是当前选中的，清除选中
|
|||
|
|
if (selectedKb && selectedKb.kb_id === deleteConfirmInfo.kb_id) {
|
|||
|
|
setSelectedKb(null);
|
|||
|
|
}
|
|||
|
|
setDeleteConfirmInfo(null);
|
|||
|
|
fetchAllKbs();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error("Error deleting knowledge base:", error);
|
|||
|
|
showToast('删除失败,请稍后重试', 'error');
|
|||
|
|
setDeleteConfirmInfo(null);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const groupKbsByDate = (kbList) => {
|
|||
|
|
const todayKbs = [];
|
|||
|
|
const pastKbs = [];
|
|||
|
|
|
|||
|
|
kbList.forEach(kb => {
|
|||
|
|
if (tools.isToday(kb.created_at)) {
|
|||
|
|
todayKbs.push(kb);
|
|||
|
|
} else {
|
|||
|
|
pastKbs.push(kb);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return { todayKbs, pastKbs };
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 导出知识库内容为图片
|
|||
|
|
const exportSummaryToImage = async () => {
|
|||
|
|
try {
|
|||
|
|
if (!selectedKb?.content) {
|
|||
|
|
showToast('暂无知识库内容，请稍后再试。', 'warning');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const createdAt = tools.formatDate(selectedKb.created_at);
|
|||
|
|
const tags = selectedKb.tags?.join('、') || '';
|
|||
|
|
|
|||
|
|
await exportService.exportKnowledgeBaseToImage({
|
|||
|
|
title: selectedKb.title || '知识库',
|
|||
|
|
content: selectedKb.content,
|
|||
|
|
metadata: {
|
|||
|
|
creator: selectedKb.created_by_name || '未知',
|
|||
|
|
createdTime: createdAt,
|
|||
|
|
tags: tags,
|
|||
|
|
sourceMeetings: selectedKb.source_meetings?.length || 0
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
showToast('内容已成功导出为图片', 'success');
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('图片导出失败:', error);
|
|||
|
|
showToast('图片导出失败，请重试。', 'error');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 导出思维导图为图片
|
|||
|
|
const exportMindMapToImage = async () => {
|
|||
|
|
try {
|
|||
|
|
if (!selectedKb?.content) {
|
|||
|
|
showToast('暂无内容，无法导出思维导图。', 'warning');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
await exportService.exportMindMapToImage({
|
|||
|
|
title: selectedKb.title || '知识库'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
showToast('思维导图已成功导出为图片', 'success');
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('思维导图导出失败:', error);
|
|||
|
|
showToast(error.message || '思维导图导出失败，请重试。', 'error');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const isCreator = selectedKb && user && String(selectedKb.creator_id) === String(user.user_id);
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return <PageLoading message="加载中..." />;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="kb-management-page">
|
|||
|
|
<Breadcrumb currentPage="知识库管理" icon={Database} />
|
|||
|
|
|
|||
|
|
<div className="kb-layout">
|
|||
|
|
{/* 左侧知识库列表 */}
|
|||
|
|
<div className={`kb-sidebar ${sidebarCollapsed ? 'collapsed' : ''}`}>
|
|||
|
|
<div className="sidebar-header">
|
|||
|
|
{!sidebarCollapsed && <h2>知识库列表</h2>}
|
|||
|
|
<div className="sidebar-actions">
|
|||
|
|
{!sidebarCollapsed && (
|
|||
|
|
<button
|
|||
|
|
className="btn-new-kb"
|
|||
|
|
onClick={handleOpenCreateModal}
|
|||
|
|
title="新增知识条目"
|
|||
|
|
>
|
|||
|
|
<Plus size={18} />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
className="btn-toggle-sidebar"
|
|||
|
|
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
|||
|
|
title={sidebarCollapsed ? "展开" : "收起"}
|
|||
|
|
>
|
|||
|
|
{sidebarCollapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{!sidebarCollapsed && (
|
|||
|
|
<div className="kb-list-sidebar">
|
|||
|
|
{kbs.length === 0 ? (
|
|||
|
|
<div className="empty-state">
|
|||
|
|
<p>暂无知识库条目</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
(() => {
|
|||
|
|
const { todayKbs, pastKbs } = groupKbsByDate(kbs);
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
{/* 今天的知识库 */}
|
|||
|
|
{todayKbs.length > 0 && (
|
|||
|
|
<div className="kb-date-group">
|
|||
|
|
<div className="date-group-header">今天</div>
|
|||
|
|
{todayKbs.map(kb => (
|
|||
|
|
<div
|
|||
|
|
key={kb.kb_id}
|
|||
|
|
className={`kb-list-item ${selectedKb && selectedKb.kb_id === kb.kb_id ? 'active' : ''}`}
|
|||
|
|
onClick={() => handleKbSelect(kb)}
|
|||
|
|
>
|
|||
|
|
<div className="kb-list-item-header">
|
|||
|
|
<h3>{kb.title}</h3>
|
|||
|
|
{String(kb.creator_id) === String(user.user_id) && (
|
|||
|
|
<div className="kb-item-actions">
|
|||
|
|
<button
|
|||
|
|
className="btn-edit-kb"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
navigate(`/knowledge-base/edit/${kb.kb_id}`);
|
|||
|
|
}}
|
|||
|
|
title="编辑"
|
|||
|
|
>
|
|||
|
|
<Edit size={14} />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="btn-delete-kb"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
handleDelete(kb);
|
|||
|
|
}}
|
|||
|
|
title="删除"
|
|||
|
|
>
|
|||
|
|
<Trash2 size={14} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="kb-list-item-meta">
|
|||
|
|
<span className="meta-time">{tools.formatTime(kb.created_at)}</span>
|
|||
|
|
<span className="meta-item">
|
|||
|
|
<Database size={12} />
|
|||
|
|
{kb.source_meeting_count || 0} 个数据源
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 之前的知识库 */}
|
|||
|
|
{pastKbs.length > 0 && (
|
|||
|
|
<div className="kb-date-group">
|
|||
|
|
<div className="date-group-header">之前</div>
|
|||
|
|
{pastKbs.map(kb => (
|
|||
|
|
<div
|
|||
|
|
key={kb.kb_id}
|
|||
|
|
className={`kb-list-item ${selectedKb && selectedKb.kb_id === kb.kb_id ? 'active' : ''}`}
|
|||
|
|
onClick={() => handleKbSelect(kb)}
|
|||
|
|
>
|
|||
|
|
<div className="kb-list-item-header">
|
|||
|
|
<h3>{kb.title}</h3>
|
|||
|
|
{String(kb.creator_id) === String(user.user_id) && (
|
|||
|
|
<div className="kb-item-actions">
|
|||
|
|
<button
|
|||
|
|
className="btn-edit-kb"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
navigate(`/knowledge-base/edit/${kb.kb_id}`);
|
|||
|
|
}}
|
|||
|
|
title="编辑"
|
|||
|
|
>
|
|||
|
|
<Edit size={14} />
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className="btn-delete-kb"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
handleDelete(kb);
|
|||
|
|
}}
|
|||
|
|
title="删除"
|
|||
|
|
>
|
|||
|
|
<Trash2 size={14} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="kb-list-item-meta">
|
|||
|
|
<span className="meta-date">{tools.formatShortDate(kb.created_at)}</span>
|
|||
|
|
<span className="meta-item">
|
|||
|
|
<Database size={12} />
|
|||
|
|
{kb.source_meeting_count || 0} 个数据源
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
})()
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 右侧详情区 */}
|
|||
|
|
<div className="kb-detail-area">
|
|||
|
|
{selectedKb ? (
|
|||
|
|
<>
|
|||
|
|
<div className="kb-detail-header">
|
|||
|
|
<div className="kb-header-title">
|
|||
|
|
<h1>
|
|||
|
|
{selectedKb.title}
|
|||
|
|
{selectedKb.tags && selectedKb.tags.length > 0 && (
|
|||
|
|
<TagDisplay
|
|||
|
|
tags={selectedKb.tags.map(tag => tag.name)}
|
|||
|
|
size="medium"
|
|||
|
|
showIcon={true}
|
|||
|
|
className="inline-title-tags"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</h1>
|
|||
|
|
</div>
|
|||
|
|
<div className="kb-detail-meta">
|
|||
|
|
{selectedKb.created_by_name && (
|
|||
|
|
<span className="meta-item">
|
|||
|
|
创建者: {selectedKb.created_by_name}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
<span className="meta-item">
|
|||
|
|
<Calendar size={14} />
|
|||
|
|
{tools.formatDate(selectedKb.created_at)}
|
|||
|
|
</span>
|
|||
|
|
{selectedKb.source_meetings && selectedKb.source_meetings.length > 0 && (
|
|||
|
|
<span className="meta-item">
|
|||
|
|
<Database size={14} />
|
|||
|
|
{selectedKb.source_meetings.length} 个数据源
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 用户提示词 */}
|
|||
|
|
{selectedKb.user_prompt && (
|
|||
|
|
<div className="kb-prompt-section">
|
|||
|
|
<strong>用户提示词:</strong> {selectedKb.user_prompt}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 数据源列表 */}
|
|||
|
|
{selectedKb.source_meetings && selectedKb.source_meetings.length > 0 && (
|
|||
|
|
<div className="kb-sources-section">
|
|||
|
|
<h3>数据源列表</h3>
|
|||
|
|
<div className="source-meetings-list">
|
|||
|
|
{selectedKb.source_meetings.map(meeting => (
|
|||
|
|
<a
|
|||
|
|
key={meeting.meeting_id}
|
|||
|
|
href={`/meetings/${meeting.meeting_id}`}
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
className="source-meeting-link"
|
|||
|
|
>
|
|||
|
|
{meeting.title}
|
|||
|
|
</a>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 内容区域 - Tabs */}
|
|||
|
|
<div className="kb-content-tabs">
|
|||
|
|
<ContentViewer
|
|||
|
|
content={selectedKb.content}
|
|||
|
|
title={selectedKb.title}
|
|||
|
|
emptyMessage="内容生成中..."
|
|||
|
|
summaryActions={
|
|||
|
|
selectedKb.content && (
|
|||
|
|
<button
|
|||
|
|
className="action-btn export-btn"
|
|||
|
|
onClick={exportSummaryToImage}
|
|||
|
|
title="导出图片"
|
|||
|
|
>
|
|||
|
|
<Image size={16} />
|
|||
|
|
<span>导出图片</span>
|
|||
|
|
</button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
mindmapActions={
|
|||
|
|
selectedKb.content && (
|
|||
|
|
<button
|
|||
|
|
className="action-btn export-btn"
|
|||
|
|
onClick={exportMindMapToImage}
|
|||
|
|
title="导出图片"
|
|||
|
|
>
|
|||
|
|
<Image size={16} />
|
|||
|
|
<span>导出图片</span>
|
|||
|
|
</button>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<div className="kb-empty-placeholder">
|
|||
|
|
<FileText size={64} />
|
|||
|
|
<p>请从左侧选择一个知识库查看详情</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 新增知识库表单弹窗 */}
|
|||
|
|
<FormModal
|
|||
|
|
isOpen={showCreateForm}
|
|||
|
|
onClose={handleCloseCreateModal}
|
|||
|
|
title="新增知识库"
|
|||
|
|
size="large"
|
|||
|
|
headerExtra={
|
|||
|
|
<StepIndicator
|
|||
|
|
steps={['选择会议', '自定义提示词']}
|
|||
|
|
currentStep={createStep}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
actions={
|
|||
|
|
<>
|
|||
|
|
{createStep === 1 ? (
|
|||
|
|
<>
|
|||
|
|
<button type="button" className="btn btn-secondary" onClick={handleCloseCreateModal}>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-primary"
|
|||
|
|
onClick={handleNextStep}
|
|||
|
|
disabled={selectedMeetings.length === 0}
|
|||
|
|
>
|
|||
|
|
下一步
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<button type="button" className="btn btn-secondary" onClick={handlePrevStep}>
|
|||
|
|
上一步
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-primary"
|
|||
|
|
onClick={handleGenerate}
|
|||
|
|
disabled={generating}
|
|||
|
|
>
|
|||
|
|
{generating ? `生成中... ${progress}%` : '生成知识库'}
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{/* 步骤 1: 选择会议 */}
|
|||
|
|
{createStep === 1 && (
|
|||
|
|
<div className="form-step">
|
|||
|
|
<div className="form-group">
|
|||
|
|
{/* 紧凑的搜索和过滤区 */}
|
|||
|
|
<div className="search-filter-area">
|
|||
|
|
<SimpleSearchInput
|
|||
|
|
value={searchQuery}
|
|||
|
|
onChange={setSearchQuery}
|
|||
|
|
placeholder="搜索会议名称或创建人..."
|
|||
|
|
realTimeSearch={true}
|
|||
|
|
debounceDelay={500}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{availableTags.length > 0 && (
|
|||
|
|
<div className="tag-filter-section">
|
|||
|
|
<div className="tag-filter-chips">
|
|||
|
|
{availableTags.map(tag => (
|
|||
|
|
<button
|
|||
|
|
key={tag}
|
|||
|
|
type="button"
|
|||
|
|
className={`tag-chip ${selectedTags.includes(tag) ? 'selected' : ''}`}
|
|||
|
|
onClick={() => handleTagToggle(tag)}
|
|||
|
|
>
|
|||
|
|
{tag}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{(searchQuery || selectedTags.length > 0) && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="clear-filters-btn"
|
|||
|
|
onClick={clearFilters}
|
|||
|
|
>
|
|||
|
|
<X size={14} />
|
|||
|
|
清除筛选
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="meeting-list">
|
|||
|
|
{loadingMeetings ? (
|
|||
|
|
<div className="loading-state">
|
|||
|
|
<p>加载中...</p>
|
|||
|
|
</div>
|
|||
|
|
) : meetings.length === 0 ? (
|
|||
|
|
<div className="empty-state">
|
|||
|
|
<p>未找到匹配的会议</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
meetings.map(meeting => (
|
|||
|
|
<div
|
|||
|
|
key={meeting.meeting_id}
|
|||
|
|
className={`meeting-item ${selectedMeetings.includes(meeting.meeting_id) ? 'selected' : ''}`}
|
|||
|
|
onClick={() => toggleMeetingSelection(meeting.meeting_id)}
|
|||
|
|
>
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
checked={selectedMeetings.includes(meeting.meeting_id)}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
toggleMeetingSelection(meeting.meeting_id);
|
|||
|
|
}}
|
|||
|
|
onClick={(e) => e.stopPropagation()}
|
|||
|
|
/>
|
|||
|
|
<div className="meeting-item-content">
|
|||
|
|
<div className="meeting-item-title">{meeting.title}</div>
|
|||
|
|
<div className="meeting-item-meta">
|
|||
|
|
{meeting.creator_username && (
|
|||
|
|
<span className="meeting-item-creator">创建人: {meeting.creator_username}</span>
|
|||
|
|
)}
|
|||
|
|
{meeting.created_at && (
|
|||
|
|
<span className="meeting-item-date">创建时间: {tools.formatMeetingDate(meeting.created_at)}</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 分页按钮 */}
|
|||
|
|
{!loadingMeetings && meetings.length > 0 && (
|
|||
|
|
<div className="pagination-controls">
|
|||
|
|
<button
|
|||
|
|
className="pagination-btn"
|
|||
|
|
onClick={() => handlePageChange(meetingsPagination.page - 1)}
|
|||
|
|
disabled={meetingsPagination.page === 1}
|
|||
|
|
>
|
|||
|
|
<ChevronLeft size={16} />
|
|||
|
|
上一页
|
|||
|
|
</button>
|
|||
|
|
<span className="pagination-info">
|
|||
|
|
第 {meetingsPagination.page} 页 · 共 {meetingsPagination.total} 条
|
|||
|
|
</span>
|
|||
|
|
<button
|
|||
|
|
className="pagination-btn"
|
|||
|
|
onClick={() => handlePageChange(meetingsPagination.page + 1)}
|
|||
|
|
disabled={!meetingsPagination.has_more}
|
|||
|
|
>
|
|||
|
|
下一页
|
|||
|
|
<ChevronRight size={16} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 步骤 2: 输入提示词 */}
|
|||
|
|
{createStep === 2 && (
|
|||
|
|
<div className="form-step">
|
|||
|
|
<div className="step-summary">
|
|||
|
|
<div className="summary-item">
|
|||
|
|
<span className="summary-label">已选择会议：</span>
|
|||
|
|
<span className="summary-value">{selectedMeetings.length} 个</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 模版选择 */}
|
|||
|
|
{availablePrompts.length > 0 && (
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>* 选择生成模版（可选）</label>
|
|||
|
|
<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>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="form-group">
|
|||
|
|
<label>* 用户提示词（可选）</label>
|
|||
|
|
<p className="field-hint">您可以添加额外的要求来定制知识库生成内容，例如重点关注某个主题、提取特定信息等。如不填写，系统将使用默认提示词。</p>
|
|||
|
|
<textarea
|
|||
|
|
placeholder="例如：请重点关注会议中的决策事项和待办任务..."
|
|||
|
|
value={userPrompt}
|
|||
|
|
onChange={(e) => setUserPrompt(e.target.value)}
|
|||
|
|
className="kb-prompt-input"
|
|||
|
|
rows={8}
|
|||
|
|
autoFocus
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</FormModal>
|
|||
|
|
|
|||
|
|
{/* 删除确认对话框 */}
|
|||
|
|
<ConfirmDialog
|
|||
|
|
isOpen={!!deleteConfirmInfo}
|
|||
|
|
onClose={() => setDeleteConfirmInfo(null)}
|
|||
|
|
onConfirm={confirmDelete}
|
|||
|
|
title="删除知识库"
|
|||
|
|
message={`确定要删除知识库条目"${deleteConfirmInfo?.title}"吗？此操作无法撤销。`}
|
|||
|
|
confirmText="确定删除"
|
|||
|
|
cancelText="取消"
|
|||
|
|
type="danger"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Toast notifications */}
|
|||
|
|
{toasts.map(toast => (
|
|||
|
|
<Toast
|
|||
|
|
key={toast.id}
|
|||
|
|
message={toast.message}
|
|||
|
|
type={toast.type}
|
|||
|
|
onClose={() => removeToast(toast.id)}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default KnowledgeBasePage;
|