- 新增AI助手和知识库菜单项，增加界面入口 - 添加AI聊天相关API接口及数据类型定义 - 实现AI聊天界面，支持多会话管理、消息流式接收及展示 - 支持聊天消息中的参考文档显示和管理 - 实现知识库文档上传、列表展示、删除及重新索引功能 - 完成知识库管理界面，支持项目选择及文件上传过滤 - 路由配置新增aiChat和knowledgeBase模块，确保访问路径正确 - 国际化资源更新，支持AI助手和知识库菜单名称显示
This commit is contained in:
@@ -70,6 +70,8 @@ panel:
|
||||
menus:
|
||||
pureHome: Home
|
||||
pureProject: Project Management
|
||||
aiChat: AI Assistant
|
||||
knowledgeBase: Knowledge Base
|
||||
pureRiskWorkorder: Risk & Workorder
|
||||
pureRiskAssessment: Risk Assessment
|
||||
pureWorkorderManagement: Workorder Management
|
||||
|
||||
@@ -70,6 +70,8 @@ panel:
|
||||
menus:
|
||||
pureHome: 首页
|
||||
pureProject: 项目管理
|
||||
aiChat: AI助手
|
||||
knowledgeBase: 知识库
|
||||
pureRiskWorkorder: 风险与工单
|
||||
pureRiskAssessment: 风险评估
|
||||
pureWorkorderManagement: 工单管理
|
||||
|
||||
231
src/api/ai-chat.ts
Normal file
231
src/api/ai-chat.ts
Normal file
@@ -0,0 +1,231 @@
|
||||
import { http } from "@/utils/http";
|
||||
|
||||
/** 通用响应结果 */
|
||||
type Result<T = any> = {
|
||||
code: number;
|
||||
message: string;
|
||||
data?: T;
|
||||
};
|
||||
|
||||
// ==================== 数据结构定义 ====================
|
||||
|
||||
/** 会话信息 */
|
||||
export interface ChatSessionVO {
|
||||
sessionId: string; // UUID格式
|
||||
sessionTitle: string;
|
||||
projectId: number;
|
||||
projectName: string;
|
||||
timelineNodeId?: number;
|
||||
timelineNodeName?: string;
|
||||
lastMessageTime: string; // ISO 8601格式
|
||||
messageCount: number;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** 引用文档 */
|
||||
export interface ReferencedDocVO {
|
||||
id: number;
|
||||
docId: string;
|
||||
title: string;
|
||||
docType: string;
|
||||
fileType: string;
|
||||
sourceType: string;
|
||||
score: number; // 相似度分数 0-1
|
||||
content: string; // 内容摘要
|
||||
}
|
||||
|
||||
/** 对话消息 */
|
||||
export interface ChatMessageVO {
|
||||
id: number;
|
||||
role: "user" | "assistant" | "system";
|
||||
content: string;
|
||||
referencedDocs?: ReferencedDocVO[];
|
||||
model?: string;
|
||||
tokensUsed?: number;
|
||||
responseTime?: number;
|
||||
messageIndex: number;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** 知识库文档 */
|
||||
export interface KbDocumentVO {
|
||||
id: number;
|
||||
docId: string; // UUID格式
|
||||
title: string;
|
||||
docType: string; // report/document/text/data/other
|
||||
fileType: string; // pdf/doc/txt/md等
|
||||
fileSize: number; // 字节
|
||||
filePath: string;
|
||||
sourceType: string; // upload/project/risk等
|
||||
chunkCount: number; // 分块数量
|
||||
status: "pending" | "processing" | "active" | "error";
|
||||
createByName: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** 文档状态 */
|
||||
export type DocumentStatus = "pending" | "processing" | "active" | "error";
|
||||
|
||||
// ==================== SSE事件数据类型 ====================
|
||||
|
||||
/** SSE start 事件数据 */
|
||||
export interface SSEStartData {
|
||||
sessionId: string;
|
||||
isNewSession: boolean;
|
||||
}
|
||||
|
||||
/** SSE chunk 事件数据 */
|
||||
export interface SSEChunkData {
|
||||
content: string;
|
||||
}
|
||||
|
||||
/** SSE references 事件数据 */
|
||||
export interface SSEReferencesData {
|
||||
docs: ReferencedDocVO[];
|
||||
}
|
||||
|
||||
/** SSE complete 事件数据 */
|
||||
export interface SSECompleteData {
|
||||
messageId: number;
|
||||
tokensUsed: number;
|
||||
}
|
||||
|
||||
/** SSE error 事件数据 */
|
||||
export interface SSEErrorData {
|
||||
message: string;
|
||||
}
|
||||
|
||||
// ==================== 请求参数类型 ====================
|
||||
|
||||
/** 创建会话请求参数 */
|
||||
export interface CreateSessionRequest {
|
||||
projectId: number;
|
||||
timelineNodeId?: number | null;
|
||||
firstMessage?: string;
|
||||
sessionTitle?: string;
|
||||
}
|
||||
|
||||
/** SSE对话请求参数 */
|
||||
export interface SSEChatParams {
|
||||
sessionId?: string; // UUID格式，为空则新建会话
|
||||
projectId: number;
|
||||
timelineNodeId?: number;
|
||||
message: string;
|
||||
useRag?: boolean; // 默认true
|
||||
useTextToSql?: boolean; // 默认false
|
||||
contextWindow?: number; // 默认10
|
||||
}
|
||||
|
||||
/** 上传文件请求参数 */
|
||||
export interface UploadDocumentParams {
|
||||
projectId: number;
|
||||
file: File;
|
||||
}
|
||||
|
||||
// ==================== AI对话接口 ====================
|
||||
|
||||
/** 新建会话 */
|
||||
export const createChatSession = (data: CreateSessionRequest) => {
|
||||
return http.request<Result<ChatSessionVO>>(
|
||||
"post",
|
||||
"/api/v1/ai/chat/session",
|
||||
{
|
||||
data
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/** 获取会话列表 */
|
||||
export const getChatSessions = (projectId: number) => {
|
||||
return http.request<Result<ChatSessionVO[]>>(
|
||||
"get",
|
||||
"/api/v1/ai/chat/sessions",
|
||||
{
|
||||
params: { projectId }
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/** 获取会话历史消息 */
|
||||
export const getSessionMessages = (sessionId: string) => {
|
||||
return http.request<Result<ChatMessageVO[]>>(
|
||||
"get",
|
||||
`/api/v1/ai/chat/session/${sessionId}/messages`
|
||||
);
|
||||
};
|
||||
|
||||
/** 删除会话 */
|
||||
export const deleteChatSession = (sessionId: string) => {
|
||||
return http.request<Result<void>>(
|
||||
"delete",
|
||||
`/api/v1/ai/chat/session/${sessionId}`
|
||||
);
|
||||
};
|
||||
|
||||
/** 构建SSE URL */
|
||||
export const buildSSEUrl = (params: SSEChatParams): string => {
|
||||
const queryParams = new URLSearchParams();
|
||||
|
||||
if (params.sessionId) {
|
||||
queryParams.append("sessionId", params.sessionId);
|
||||
}
|
||||
queryParams.append("projectId", String(params.projectId));
|
||||
if (params.timelineNodeId !== undefined) {
|
||||
queryParams.append("timelineNodeId", String(params.timelineNodeId));
|
||||
}
|
||||
queryParams.append("message", params.message);
|
||||
if (params.useRag !== undefined) {
|
||||
queryParams.append("useRag", String(params.useRag));
|
||||
}
|
||||
if (params.useTextToSql !== undefined) {
|
||||
queryParams.append("useTextToSql", String(params.useTextToSql));
|
||||
}
|
||||
if (params.contextWindow !== undefined) {
|
||||
queryParams.append("contextWindow", String(params.contextWindow));
|
||||
}
|
||||
|
||||
return `/api/v1/ai/chat/sse?${queryParams.toString()}`;
|
||||
};
|
||||
|
||||
// ==================== 知识库接口 ====================
|
||||
|
||||
/** 上传文档 */
|
||||
export const uploadDocument = (params: UploadDocumentParams) => {
|
||||
const formData = new FormData();
|
||||
formData.append("projectId", String(params.projectId));
|
||||
formData.append("file", params.file);
|
||||
|
||||
return http.request<Result<KbDocumentVO>>("post", "/api/v1/ai/kb/upload", {
|
||||
data: formData,
|
||||
headers: {
|
||||
"Content-Type": undefined // 让浏览器自动设置 multipart/form-data
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 获取文档列表 */
|
||||
export const getDocuments = (projectId: number) => {
|
||||
return http.request<Result<KbDocumentVO[]>>(
|
||||
"get",
|
||||
"/api/v1/ai/kb/documents",
|
||||
{
|
||||
params: { projectId }
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/** 删除文档 */
|
||||
export const deleteDocument = (docId: string) => {
|
||||
return http.request<Result<void>>(
|
||||
"delete",
|
||||
`/api/v1/ai/kb/document/${docId}`
|
||||
);
|
||||
};
|
||||
|
||||
/** 重新索引文档 */
|
||||
export const reindexDocument = (docId: string) => {
|
||||
return http.request<Result<void>>(
|
||||
"post",
|
||||
`/api/v1/ai/kb/document/${docId}/reindex`
|
||||
);
|
||||
};
|
||||
@@ -3,38 +3,42 @@
|
||||
const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
|
||||
chatai = 1,
|
||||
project = 2,
|
||||
vueflow = 3,
|
||||
ganttastic = 4,
|
||||
components = 5,
|
||||
able = 6,
|
||||
table = 7,
|
||||
form = 8,
|
||||
list = 9,
|
||||
result = 10,
|
||||
error = 11,
|
||||
frame = 12,
|
||||
nested = 13,
|
||||
permission = 14,
|
||||
monitor = 16,
|
||||
tabs = 17,
|
||||
about = 18,
|
||||
codemirror = 19,
|
||||
markdown = 20,
|
||||
editor = 21,
|
||||
flowchart = 22,
|
||||
formdesign = 23,
|
||||
board = 24,
|
||||
ppt = 25,
|
||||
mind = 26,
|
||||
guide = 27,
|
||||
menuoverflow = 28,
|
||||
riskWorkorder = 29,
|
||||
aiChat = 3,
|
||||
knowledgeBase = 4,
|
||||
vueflow = 5,
|
||||
ganttastic = 6,
|
||||
components = 7,
|
||||
able = 8,
|
||||
table = 9,
|
||||
form = 10,
|
||||
list = 11,
|
||||
result = 12,
|
||||
error = 13,
|
||||
frame = 14,
|
||||
nested = 15,
|
||||
permission = 16,
|
||||
monitor = 17,
|
||||
tabs = 18,
|
||||
about = 19,
|
||||
codemirror = 20,
|
||||
markdown = 21,
|
||||
editor = 22,
|
||||
flowchart = 23,
|
||||
formdesign = 24,
|
||||
board = 25,
|
||||
ppt = 26,
|
||||
mind = 27,
|
||||
guide = 28,
|
||||
menuoverflow = 29,
|
||||
riskWorkorder = 30,
|
||||
system = 99;
|
||||
|
||||
export {
|
||||
home,
|
||||
chatai,
|
||||
project,
|
||||
aiChat,
|
||||
knowledgeBase,
|
||||
vueflow,
|
||||
ganttastic,
|
||||
components,
|
||||
|
||||
@@ -47,6 +47,8 @@ const modules: Record<string, any> = import.meta.glob(
|
||||
"./modules/home.ts",
|
||||
"./modules/risk-assessment.ts",
|
||||
"./modules/workorder-management.ts",
|
||||
"./modules/knowledge-base.ts",
|
||||
"./modules/ai-chat.ts",
|
||||
"!./modules/**/remaining.ts"
|
||||
],
|
||||
{
|
||||
|
||||
22
src/router/modules/ai-chat.ts
Normal file
22
src/router/modules/ai-chat.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { aiChat } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/ai-chat",
|
||||
redirect: "/ai-chat/index",
|
||||
meta: {
|
||||
icon: "ri:robot-line",
|
||||
title: $t("menus.aiChat") || "AI助手",
|
||||
rank: aiChat
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/ai-chat/index",
|
||||
name: "AiChat",
|
||||
component: () => import("@/views/ai-chat/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.aiChat") || "AI助手"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
22
src/router/modules/knowledge-base.ts
Normal file
22
src/router/modules/knowledge-base.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { knowledgeBase } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/knowledge-base",
|
||||
redirect: "/knowledge-base/index",
|
||||
meta: {
|
||||
icon: "ri:database-2-line",
|
||||
title: $t("menus.knowledgeBase") || "知识库",
|
||||
rank: knowledgeBase
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/knowledge-base/index",
|
||||
name: "KnowledgeBase",
|
||||
component: () => import("@/views/knowledge-base/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.knowledgeBase") || "知识库"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
787
src/views/ai-chat/index.vue
Normal file
787
src/views/ai-chat/index.vue
Normal file
@@ -0,0 +1,787 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, onUnmounted, watch } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import {
|
||||
getChatSessions,
|
||||
getSessionMessages,
|
||||
deleteChatSession,
|
||||
createChatSession,
|
||||
buildSSEUrl,
|
||||
type ChatSessionVO,
|
||||
type ChatMessageVO,
|
||||
type ReferencedDocVO,
|
||||
type SSEStartData,
|
||||
type SSEChunkData,
|
||||
type SSEReferencesData,
|
||||
type SSECompleteData,
|
||||
type SSEErrorData
|
||||
} from "@/api/ai-chat";
|
||||
import { getProjectList, type ProjectItem } from "@/api/project";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import SendIcon from "~icons/ri/send-plane-fill";
|
||||
import AddIcon from "~icons/ri/add-line";
|
||||
import DeleteIcon from "~icons/ep/delete";
|
||||
import DocumentIcon from "~icons/ri/file-text-line";
|
||||
import RefreshIcon from "~icons/ri/refresh-line";
|
||||
|
||||
defineOptions({
|
||||
name: "AiChat"
|
||||
});
|
||||
|
||||
// 状态
|
||||
const loading = ref(false);
|
||||
const sessions = ref<ChatSessionVO[]>([]);
|
||||
const currentSession = ref<ChatSessionVO | null>(null);
|
||||
const messages = ref<ChatMessageVO[]>([]);
|
||||
const inputMessage = ref("");
|
||||
const sending = ref(false);
|
||||
const projects = ref<ProjectItem[]>([]);
|
||||
const projectLoading = ref(false);
|
||||
const showProjectSelect = ref(false);
|
||||
|
||||
// SSE连接
|
||||
let eventSource: EventSource | null = null;
|
||||
|
||||
// 消息容器引用
|
||||
const messagesContainer = ref<HTMLElement | null>(null);
|
||||
|
||||
// 会话中的临时消息（用于流式显示）
|
||||
const streamingMessage = ref<string>("");
|
||||
const streamingReferences = ref<ReferencedDocVO[]>([]);
|
||||
|
||||
// 加载项目列表
|
||||
async function loadProjects() {
|
||||
projectLoading.value = true;
|
||||
try {
|
||||
const res = await getProjectList({ pageNum: 1, pageSize: 100 });
|
||||
if (res.code === 200) {
|
||||
projects.value = res.data?.rows || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载项目列表失败:", error);
|
||||
} finally {
|
||||
projectLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载会话列表
|
||||
async function loadSessions(projectId?: number) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getChatSessions(
|
||||
projectId || currentSession.value?.projectId || 0
|
||||
);
|
||||
if (res.code === 200) {
|
||||
sessions.value = res.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载会话列表失败:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择会话
|
||||
async function selectSession(session: ChatSessionVO) {
|
||||
currentSession.value = session;
|
||||
await loadMessages(session.sessionId);
|
||||
}
|
||||
|
||||
// 加载会话消息
|
||||
async function loadMessages(sessionId: string) {
|
||||
try {
|
||||
const res = await getSessionMessages(sessionId);
|
||||
if (res.code === 200) {
|
||||
messages.value = res.data || [];
|
||||
scrollToBottom();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载消息失败:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新会话
|
||||
async function createNewSession() {
|
||||
if (!currentSession.value?.projectId && projects.value.length === 0) {
|
||||
await loadProjects();
|
||||
}
|
||||
showProjectSelect.value = true;
|
||||
}
|
||||
|
||||
// 选择项目后创建会话
|
||||
async function handleProjectSelect(project: ProjectItem) {
|
||||
showProjectSelect.value = false;
|
||||
currentSession.value = {
|
||||
sessionId: "",
|
||||
sessionTitle: "新对话",
|
||||
projectId: Number(project.id),
|
||||
projectName: project.projectName || "",
|
||||
lastMessageTime: new Date().toISOString(),
|
||||
messageCount: 0,
|
||||
createTime: new Date().toISOString()
|
||||
};
|
||||
messages.value = [];
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
}
|
||||
|
||||
// 发送消息
|
||||
async function sendMessage() {
|
||||
if (!inputMessage.value.trim() || sending.value) return;
|
||||
|
||||
const message = inputMessage.value.trim();
|
||||
inputMessage.value = "";
|
||||
|
||||
// 如果没有会话，需要先创建
|
||||
if (!currentSession.value?.projectId) {
|
||||
ElMessage.warning("请先选择项目");
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加用户消息
|
||||
const userMessage: ChatMessageVO = {
|
||||
id: Date.now(),
|
||||
role: "user",
|
||||
content: message,
|
||||
messageIndex: messages.value.length + 1,
|
||||
createTime: new Date().toISOString()
|
||||
};
|
||||
messages.value.push(userMessage);
|
||||
|
||||
sending.value = true;
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
|
||||
// 建立SSE连接
|
||||
const sseUrl = buildSSEUrl({
|
||||
sessionId: currentSession.value.sessionId || undefined,
|
||||
projectId: currentSession.value.projectId,
|
||||
message: message,
|
||||
useRag: true
|
||||
});
|
||||
|
||||
// 关闭之前的连接
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
}
|
||||
|
||||
eventSource = new EventSource(sseUrl);
|
||||
|
||||
eventSource.addEventListener("start", (e: MessageEvent) => {
|
||||
const data: SSEStartData = JSON.parse(e.data);
|
||||
if (data.isNewSession || !currentSession.value.sessionId) {
|
||||
currentSession.value = {
|
||||
...currentSession.value,
|
||||
sessionId: data.sessionId,
|
||||
sessionTitle: message.slice(0, 20)
|
||||
};
|
||||
loadSessions(currentSession.value.projectId);
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.addEventListener("chunk", (e: MessageEvent) => {
|
||||
const data: SSEChunkData = JSON.parse(e.data);
|
||||
streamingMessage.value += data.content;
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
eventSource.addEventListener("references", (e: MessageEvent) => {
|
||||
const data: SSEReferencesData = JSON.parse(e.data);
|
||||
streamingReferences.value = data.docs || [];
|
||||
});
|
||||
|
||||
eventSource.addEventListener("complete", (e: MessageEvent) => {
|
||||
const data: SSECompleteData = JSON.parse(e.data);
|
||||
|
||||
// 添加AI回复消息
|
||||
const assistantMessage: ChatMessageVO = {
|
||||
id: data.messageId,
|
||||
role: "assistant",
|
||||
content: streamingMessage.value,
|
||||
referencedDocs: streamingReferences.value,
|
||||
tokensUsed: data.tokensUsed,
|
||||
messageIndex: messages.value.length + 1,
|
||||
createTime: new Date().toISOString()
|
||||
};
|
||||
messages.value.push(assistantMessage);
|
||||
|
||||
// 重置状态
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
sending.value = false;
|
||||
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
|
||||
loadSessions(currentSession.value?.projectId);
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
eventSource.addEventListener("error", (e: MessageEvent) => {
|
||||
const data: SSEErrorData = JSON.parse(e.data);
|
||||
ElMessage.error(data.message || "对话发生错误");
|
||||
sending.value = false;
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
});
|
||||
|
||||
eventSource.onerror = () => {
|
||||
ElMessage.error("连接服务器失败");
|
||||
sending.value = false;
|
||||
streamingMessage.value = "";
|
||||
streamingReferences.value = [];
|
||||
eventSource?.close();
|
||||
eventSource = null;
|
||||
};
|
||||
}
|
||||
|
||||
// 删除会话
|
||||
async function handleDeleteSession(session: ChatSessionVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm("确定要删除这个会话吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
});
|
||||
|
||||
const res = await deleteChatSession(session.sessionId);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("删除成功");
|
||||
loadSessions(currentSession.value?.projectId);
|
||||
|
||||
if (currentSession.value?.sessionId === session.sessionId) {
|
||||
currentSession.value = null;
|
||||
messages.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== "cancel") {
|
||||
console.error("删除会话失败:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动到底部
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (messagesContainer.value) {
|
||||
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(time: string) {
|
||||
return dayjs(time).format("MM-DD HH:mm");
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
function formatFileSize(bytes: number) {
|
||||
if (bytes < 1024) return bytes + " B";
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
// 组件卸载时关闭SSE连接
|
||||
onUnmounted(() => {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
eventSource = null;
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化加载
|
||||
loadProjects();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ai-chat-container">
|
||||
<!-- 左侧会话列表 -->
|
||||
<div class="session-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3>AI 助手</h3>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(AddIcon)"
|
||||
@click="createNewSession"
|
||||
>
|
||||
新对话
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 项目选择 -->
|
||||
<div v-if="showProjectSelect" class="project-select-panel">
|
||||
<div class="panel-header">
|
||||
<span>选择项目</span>
|
||||
<el-button link @click="showProjectSelect = false">
|
||||
<component :is="useRenderIcon('ri/close-line')" />
|
||||
</el-button>
|
||||
</div>
|
||||
<el-scrollbar height="300px">
|
||||
<div
|
||||
v-for="project in projects"
|
||||
:key="project.id"
|
||||
class="project-item"
|
||||
@click="handleProjectSelect(project)"
|
||||
>
|
||||
<component :is="useRenderIcon('ri/folder-line')" class="mr-2" />
|
||||
{{ project.projectName }}
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 会话列表 -->
|
||||
<el-scrollbar class="session-list">
|
||||
<div v-if="loading" class="loading-placeholder">
|
||||
<el-icon class="is-loading"
|
||||
><component :is="useRenderIcon('ri/loader-4-line')"
|
||||
/></el-icon>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="session in sessions"
|
||||
:key="session.sessionId"
|
||||
:class="[
|
||||
'session-item',
|
||||
{ active: currentSession?.sessionId === session.sessionId }
|
||||
]"
|
||||
@click="selectSession(session)"
|
||||
>
|
||||
<div class="session-info">
|
||||
<div class="session-title">{{ session.sessionTitle }}</div>
|
||||
<div class="session-meta">
|
||||
<span>{{ session.projectName }}</span>
|
||||
<span>{{ formatTime(session.lastMessageTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-button
|
||||
link
|
||||
class="delete-btn"
|
||||
@click.stop="handleDeleteSession(session)"
|
||||
>
|
||||
<component :is="useRenderIcon(DeleteIcon)" />
|
||||
</el-button>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="sessions.length === 0"
|
||||
description="暂无会话"
|
||||
:image-size="80"
|
||||
/>
|
||||
</template>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<!-- 右侧聊天区域 -->
|
||||
<div class="chat-main">
|
||||
<template v-if="currentSession">
|
||||
<!-- 会话头部 -->
|
||||
<div class="chat-header">
|
||||
<div class="header-info">
|
||||
<h4>{{ currentSession.sessionTitle }}</h4>
|
||||
<span class="project-name">{{ currentSession.projectName }}</span>
|
||||
</div>
|
||||
<el-button
|
||||
:icon="useRenderIcon(RefreshIcon)"
|
||||
@click="loadMessages(currentSession.sessionId)"
|
||||
>
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div ref="messagesContainer" class="messages-container">
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:class="['message-item', msg.role]"
|
||||
>
|
||||
<div class="message-avatar">
|
||||
<el-avatar v-if="msg.role === 'user'" :size="32">
|
||||
<component :is="useRenderIcon('ri/user-line')" />
|
||||
</el-avatar>
|
||||
<el-avatar
|
||||
v-else
|
||||
:size="32"
|
||||
style="
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
"
|
||||
>
|
||||
<component :is="useRenderIcon('ri/robot-line')" />
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div
|
||||
class="message-text"
|
||||
v-html="msg.content.replace(/\n/g, '<br>')"
|
||||
/>
|
||||
<!-- 引用文档 -->
|
||||
<div v-if="msg.referencedDocs?.length" class="referenced-docs">
|
||||
<div class="ref-title">
|
||||
<component :is="useRenderIcon(DocumentIcon)" />
|
||||
参考文档
|
||||
</div>
|
||||
<div
|
||||
v-for="doc in msg.referencedDocs"
|
||||
:key="doc.id"
|
||||
class="ref-doc"
|
||||
>
|
||||
<span class="doc-title">{{ doc.title }}</span>
|
||||
<el-tag size="small" type="info"
|
||||
>相关度: {{ (doc.score * 100).toFixed(0) }}%</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-time">{{ formatTime(msg.createTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流式输出中的消息 -->
|
||||
<div v-if="streamingMessage" class="message-item assistant streaming">
|
||||
<div class="message-avatar">
|
||||
<el-avatar
|
||||
:size="32"
|
||||
style="
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
"
|
||||
>
|
||||
<component :is="useRenderIcon('ri/robot-line')" />
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div
|
||||
class="message-text"
|
||||
v-html="streamingMessage.replace(/\n/g, '<br>')"
|
||||
/>
|
||||
<div v-if="streamingReferences.length" class="referenced-docs">
|
||||
<div class="ref-title">
|
||||
<component :is="useRenderIcon(DocumentIcon)" />
|
||||
参考文档
|
||||
</div>
|
||||
<div
|
||||
v-for="doc in streamingReferences"
|
||||
:key="doc.id"
|
||||
class="ref-doc"
|
||||
>
|
||||
<span class="doc-title">{{ doc.title }}</span>
|
||||
<el-tag size="small" type="info"
|
||||
>相关度: {{ (doc.score * 100).toFixed(0) }}%</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="input-area">
|
||||
<el-input
|
||||
v-model="inputMessage"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="输入您的问题..."
|
||||
:disabled="sending"
|
||||
@keydown.enter.ctrl="sendMessage"
|
||||
/>
|
||||
<div class="input-actions">
|
||||
<span class="tip">Ctrl + Enter 发送</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(SendIcon)"
|
||||
:loading="sending"
|
||||
:disabled="!inputMessage.trim()"
|
||||
@click="sendMessage"
|
||||
>
|
||||
发送
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 未选择会话时的提示 -->
|
||||
<div v-else class="empty-chat">
|
||||
<div class="empty-icon">
|
||||
<component
|
||||
:is="useRenderIcon('ri/chat-3-line')"
|
||||
style="font-size: 64px; color: var(--el-color-primary)"
|
||||
/>
|
||||
</div>
|
||||
<h3>开始新的对话</h3>
|
||||
<p class="text-gray-400">选择一个项目开始与AI助手对话</p>
|
||||
<el-button type="primary" class="mt-4" @click="createNewSession">
|
||||
<template #icon>
|
||||
<component :is="useRenderIcon(AddIcon)" />
|
||||
</template>
|
||||
新建对话
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ai-chat-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 100px);
|
||||
overflow: hidden;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.session-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 280px;
|
||||
background: var(--el-fill-color-blank);
|
||||
border-right: 1px solid var(--el-border-color-light);
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-select-panel {
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.session-list {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.loading-placeholder {
|
||||
padding: 20px;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.session-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.session-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
&:hover .delete-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
|
||||
.header-info {
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.user {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
color: #fff;
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.streaming {
|
||||
.message-text {
|
||||
background: var(--el-fill-color);
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
flex-shrink: 0;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 70%;
|
||||
|
||||
.message-text {
|
||||
padding: 12px 16px;
|
||||
line-height: 1.6;
|
||||
overflow-wrap: break-word;
|
||||
background: var(--el-fill-color);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.referenced-docs {
|
||||
padding: 8px 12px;
|
||||
margin-top: 8px;
|
||||
background: var(--el-fill-color-lighter);
|
||||
border-radius: 8px;
|
||||
|
||||
.ref-title {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.ref-doc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
|
||||
.doc-title {
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-time {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-area {
|
||||
padding: 16px 20px;
|
||||
background: var(--el-fill-color-blank);
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
|
||||
.input-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12px;
|
||||
|
||||
.tip {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-chat {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.empty-icon {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
508
src/views/knowledge-base/index.vue
Normal file
508
src/views/knowledge-base/index.vue
Normal file
@@ -0,0 +1,508 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import {
|
||||
getDocuments,
|
||||
uploadDocument,
|
||||
deleteDocument,
|
||||
reindexDocument,
|
||||
type KbDocumentVO,
|
||||
type DocumentStatus
|
||||
} from "@/api/ai-chat";
|
||||
import { getProjectList, type ProjectItem } from "@/api/project";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import UploadIcon from "~icons/ri/upload-2-line";
|
||||
import RefreshIcon from "~icons/ri/refresh-line";
|
||||
import DeleteIcon from "~icons/ep/delete";
|
||||
import ReIndexIcon from "~icons/ri/restart-line";
|
||||
import FileIcon from "~icons/ri/file-text-line";
|
||||
import PdfIcon from "~icons/ri/file-pdf-line";
|
||||
import DocIcon from "~icons/ri/file-word-line";
|
||||
import TxtIcon from "~icons/ri/file-text-line";
|
||||
|
||||
defineOptions({
|
||||
name: "KnowledgeBase"
|
||||
});
|
||||
|
||||
// 状态
|
||||
const loading = ref(false);
|
||||
const uploading = ref(false);
|
||||
const documents = ref<KbDocumentVO[]>([]);
|
||||
const projects = ref<ProjectItem[]>([]);
|
||||
const selectedProjectId = ref<number | undefined>();
|
||||
const projectLoading = ref(false);
|
||||
|
||||
// 上传相关
|
||||
const uploadDialogVisible = ref(false);
|
||||
const uploadFileList = ref<File[]>([]);
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
|
||||
// 加载项目列表
|
||||
async function loadProjects() {
|
||||
projectLoading.value = true;
|
||||
try {
|
||||
const res = await getProjectList({ pageNum: 1, pageSize: 100 });
|
||||
if (res.code === 200) {
|
||||
projects.value = res.data?.rows || [];
|
||||
if (projects.value.length > 0 && !selectedProjectId.value) {
|
||||
selectedProjectId.value = Number(projects.value[0].id);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载项目列表失败:", error);
|
||||
} finally {
|
||||
projectLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载文档列表
|
||||
async function loadDocuments() {
|
||||
if (!selectedProjectId.value) return;
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getDocuments(selectedProjectId.value);
|
||||
if (res.code === 200) {
|
||||
documents.value = res.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载文档列表失败:", error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 项目变更时重新加载文档
|
||||
watch(selectedProjectId, () => {
|
||||
loadDocuments();
|
||||
});
|
||||
|
||||
// 打开上传对话框
|
||||
function openUploadDialog() {
|
||||
uploadFileList.value = [];
|
||||
uploadDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// 选择文件
|
||||
function handleFileSelect(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
if (target.files) {
|
||||
const files = Array.from(target.files);
|
||||
// 过滤支持的文件类型
|
||||
const supportedTypes = ["pdf", "doc", "docx", "txt", "md"];
|
||||
const validFiles = files.filter(file => {
|
||||
const ext = file.name.split(".").pop()?.toLowerCase();
|
||||
return supportedTypes.includes(ext || "");
|
||||
});
|
||||
|
||||
if (validFiles.length !== files.length) {
|
||||
ElMessage.warning(
|
||||
"部分文件格式不支持，仅支持 PDF、Word、TXT、Markdown 格式"
|
||||
);
|
||||
}
|
||||
|
||||
uploadFileList.value = [...uploadFileList.value, ...validFiles];
|
||||
}
|
||||
}
|
||||
|
||||
// 移除文件
|
||||
function removeFile(index: number) {
|
||||
uploadFileList.value.splice(index, 1);
|
||||
}
|
||||
|
||||
// 上传文件
|
||||
async function handleUpload() {
|
||||
if (uploadFileList.value.length === 0) {
|
||||
ElMessage.warning("请选择要上传的文件");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedProjectId.value) {
|
||||
ElMessage.warning("请先选择项目");
|
||||
return;
|
||||
}
|
||||
|
||||
uploading.value = true;
|
||||
let successCount = 0;
|
||||
let failCount = 0;
|
||||
|
||||
for (const file of uploadFileList.value) {
|
||||
try {
|
||||
const res = await uploadDocument({
|
||||
projectId: selectedProjectId.value,
|
||||
file
|
||||
});
|
||||
if (res.code === 200) {
|
||||
successCount++;
|
||||
} else {
|
||||
failCount++;
|
||||
}
|
||||
} catch (error) {
|
||||
failCount++;
|
||||
console.error(`上传文件 ${file.name} 失败:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
uploading.value = false;
|
||||
uploadDialogVisible.value = false;
|
||||
|
||||
if (successCount > 0) {
|
||||
ElMessage.success(`成功上传 ${successCount} 个文件`);
|
||||
loadDocuments();
|
||||
}
|
||||
if (failCount > 0) {
|
||||
ElMessage.error(`${failCount} 个文件上传失败`);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除文档
|
||||
async function handleDelete(doc: KbDocumentVO) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
"确定要删除这个文档吗？删除后将无法恢复。",
|
||||
"提示",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}
|
||||
);
|
||||
|
||||
const res = await deleteDocument(doc.docId);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("删除成功");
|
||||
loadDocuments();
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== "cancel") {
|
||||
console.error("删除文档失败:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重新索引文档
|
||||
async function handleReindex(doc: KbDocumentVO) {
|
||||
try {
|
||||
const res = await reindexDocument(doc.docId);
|
||||
if (res.code === 200) {
|
||||
ElMessage.success("重新索引已启动");
|
||||
loadDocuments();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("重新索引失败:", error);
|
||||
ElMessage.error("重新索引失败");
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
function getStatusType(
|
||||
status: DocumentStatus
|
||||
): "success" | "warning" | "info" | "danger" {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return "success";
|
||||
case "processing":
|
||||
return "warning";
|
||||
case "error":
|
||||
return "danger";
|
||||
default:
|
||||
return "info";
|
||||
}
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
function getStatusText(status: DocumentStatus): string {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "待处理";
|
||||
case "processing":
|
||||
return "处理中";
|
||||
case "active":
|
||||
return "可用";
|
||||
case "error":
|
||||
return "处理失败";
|
||||
default:
|
||||
return "未知";
|
||||
}
|
||||
}
|
||||
|
||||
// 获取文件图标
|
||||
function getFileIcon(fileType: string) {
|
||||
const type = fileType.toLowerCase();
|
||||
if (type === "pdf") return PdfIcon;
|
||||
if (["doc", "docx"].includes(type)) return DocIcon;
|
||||
if (type === "txt") return TxtIcon;
|
||||
return FileIcon;
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return bytes + " B";
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + " MB";
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(time: string): string {
|
||||
return dayjs(time).format("YYYY-MM-DD HH:mm");
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadProjects();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="knowledge-base-container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold">项目知识库</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">
|
||||
管理项目相关文档，为AI对话提供知识支持
|
||||
</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button :icon="useRenderIcon(RefreshIcon)" @click="loadDocuments">
|
||||
刷新
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(UploadIcon)"
|
||||
@click="openUploadDialog"
|
||||
>
|
||||
上传文档
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 项目选择 -->
|
||||
<el-card shadow="never" class="mb-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-gray-600">选择项目：</span>
|
||||
<el-select
|
||||
v-model="selectedProjectId"
|
||||
placeholder="请选择项目"
|
||||
style="width: 300px"
|
||||
@change="loadDocuments"
|
||||
>
|
||||
<el-option
|
||||
v-for="project in projects"
|
||||
:key="project.id"
|
||||
:label="project.projectName"
|
||||
:value="Number(project.id)"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 文档列表 -->
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="flex-bc">
|
||||
<span>文档列表</span>
|
||||
<span class="text-gray-400 text-sm"
|
||||
>共 {{ documents.length }} 个文档</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="documents" stripe>
|
||||
<el-table-column label="文档名称" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<component
|
||||
:is="useRenderIcon(getFileIcon(row.fileType))"
|
||||
:size="20"
|
||||
class="text-gray-400"
|
||||
/>
|
||||
<span class="truncate">{{ row.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="文件类型" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small" type="info">{{
|
||||
row.fileType.toUpperCase()
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="文件大小" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ formatFileSize(row.fileSize) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="分块数量" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.chunkCount || 0 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)" size="small">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="上传者" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ row.createByName }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="上传时间" width="160" align="center">
|
||||
<template #default="{ row }">
|
||||
{{ formatTime(row.createTime) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="row.status === 'active' || row.status === 'error'"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleReindex(row)"
|
||||
>
|
||||
<component :is="useRenderIcon(ReIndexIcon)" class="mr-1" />
|
||||
重新索引
|
||||
</el-button>
|
||||
<el-button link type="danger" @click="handleDelete(row)">
|
||||
<component :is="useRenderIcon(DeleteIcon)" class="mr-1" />
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty
|
||||
v-if="!loading && documents.length === 0"
|
||||
description="暂无文档"
|
||||
>
|
||||
<el-button type="primary" @click="openUploadDialog">
|
||||
<template #icon>
|
||||
<component :is="useRenderIcon(UploadIcon)" />
|
||||
</template>
|
||||
上传文档
|
||||
</el-button>
|
||||
</el-empty>
|
||||
</el-card>
|
||||
|
||||
<!-- 上传对话框 -->
|
||||
<el-dialog
|
||||
v-model="uploadDialogVisible"
|
||||
title="上传文档"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="upload-content">
|
||||
<div
|
||||
class="upload-area"
|
||||
@click="fileInputRef?.click()"
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleFileSelect"
|
||||
>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
multiple
|
||||
accept=".pdf,.doc,.docx,.txt,.md"
|
||||
style="display: none"
|
||||
@change="handleFileSelect"
|
||||
/>
|
||||
<component
|
||||
:is="useRenderIcon(UploadIcon)"
|
||||
style="font-size: 48px; color: var(--el-color-primary)"
|
||||
/>
|
||||
<p class="mt-4 text-gray-500">点击或拖拽文件到此处上传</p>
|
||||
<p class="text-xs text-gray-400 mt-2">
|
||||
支持 PDF、Word、TXT、Markdown 格式，单个文件最大 50MB
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="uploadFileList.length > 0" class="file-list mt-4">
|
||||
<div
|
||||
v-for="(file, index) in uploadFileList"
|
||||
:key="index"
|
||||
class="file-item"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<component :is="useRenderIcon(FileIcon)" />
|
||||
<span class="flex-1 truncate">{{ file.name }}</span>
|
||||
<span class="text-xs text-gray-400">{{
|
||||
formatFileSize(file.size)
|
||||
}}</span>
|
||||
<el-button link type="danger" @click="removeFile(index)">
|
||||
<component :is="useRenderIcon('ri/close-line')" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="uploading" @click="handleUpload">
|
||||
开始上传
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.knowledge-base-container {
|
||||
padding: 16px;
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
.upload-area {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 2px dashed var(--el-border-color);
|
||||
border-radius: 8px;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.file-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
.file-item {
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
background: var(--el-fill-color-lighter);
|
||||
border-radius: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user