Bruce/common_agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(rag-document): 补全文档管理接口与页面

Browse Source
This commit is contained in:
zhiye.sun
2026-05-21 15:34:12 +08:00
parent 67cfbeb572
commit 541c3ff455
12 changed files with 1233 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/src/api/__tests__/ragDocuments.spec.ts Normal file
View File

@@ -0,0 +1,96 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import {
batchUploadRagDocuments,
deleteRagDocument,
getRagDocumentById,
listRagDocuments,
queryRagDocuments,
saveRagDocument,
SOURCE_TYPE_RAG,
} from '../ragDocuments';
import { get, post } from '../request';
vi.mock('../request', () => ({
get: vi.fn(),
post: vi.fn(),
}));
describe('rag documents api', () => {
beforeEach(() => {
vi.clearAllMocks();
});
it('lists documents with explicit action url', () => {
listRagDocuments();
expect(post).toHaveBeenCalledWith('/rag/documents/list');
});
it('queries details and saves documents', () => {
queryRagDocuments({ storeId: '1001', parseStatus: 'UPLOADED' });
getRagDocumentById('2002');
saveRagDocument({
id: '2002',
storeId: '1001',
attachmentId: '3003',
documentTitle: '知识文档',
parseStatus: 'PARSED',
indexStatus: 'INDEXED',
enabled: true,
errorMessage: '无',
remark: '备注',
});
deleteRagDocument('2002');
expect(post).toHaveBeenCalledWith('/rag/documents/query', {
storeId: '1001',
parseStatus: 'UPLOADED',
});
expect(get).toHaveBeenCalledWith('/rag/documents/detail', {
params: { id: '2002' },
});
expect(post).toHaveBeenCalledWith('/rag/documents/save', {
id: '2002',
storeId: '1001',
attachmentId: '3003',
documentTitle: '知识文档',
parseStatus: 'PARSED',
indexStatus: 'INDEXED',
enabled: true,
errorMessage: '无',
remark: '备注',
});
expect(post).toHaveBeenCalledWith('/rag/documents/delete', undefined, {
params: { id: '2002' },
});
});
it('batch uploads documents with constant sourceType and storeId sourceId', () => {
const formData = new FormData();
const file = new File(['hello'], 'knowledge.txt', { type: 'text/plain' });
batchUploadRagDocuments({
storeId: '1001',
sourceType: SOURCE_TYPE_RAG,
files: [file],
documentSummary: '摘要',
remark: '备注',
});
expect(post).toHaveBeenCalledTimes(1);
const [url, body] = vi.mocked(post).mock.calls[0] ?? [];
expect(url).toBe('/rag/documents/batchUpload');
expect(body).toBeInstanceOf(FormData);
formData.append('storeId', '1001');
formData.append('sourceType', SOURCE_TYPE_RAG);
formData.append('files', file);
formData.append('documentSummary', '摘要');
formData.append('remark', '备注');
const actualEntries = Array.from((body as FormData).entries());
const expectedEntries = Array.from(formData.entries());
expect(actualEntries).toEqual(expectedEntries);
});
});

88
frontend/src/api/ragDocuments.ts Normal file
View File

@@ -0,0 +1,88 @@
import { get, post } from './request';
/** 附件来源类型：标识该附件归属于 RAG 知识库业务。 */
export const SOURCE_TYPE_RAG = 'RAG';
export interface RagDocument {
id?: string;
storeId: string;
attachmentId?: string | null;
documentTitle?: string | null;
documentSummary?: string | null;
parseStatus?: string | null;
indexStatus?: string | null;
enabled?: boolean | null;
errorMessage?: string | null;
remark?: string | null;
createTime?: string | null;
updateTime?: string | null;
}
export interface RagDocumentQueryRequest {
storeId?: string;
attachmentId?: string;
parseStatus?: string;
indexStatus?: string;
enabled?: boolean;
}
export interface RagDocumentSaveRequest {
id?: string;
storeId: string;
attachmentId?: string;
documentTitle?: string;
documentSummary?: string;
parseStatus?: string;
indexStatus?: string;
enabled?: boolean;
errorMessage?: string;
remark?: string;
}
export interface RagDocumentBatchUploadRequest {
storeId: string;
sourceType?: string;
files: File[];
documentSummary?: string;
remark?: string;
}
export function listRagDocuments() {
return post<RagDocument[]>('/rag/documents/list');
}
export function queryRagDocuments(query?: RagDocumentQueryRequest) {
return post<RagDocument[], RagDocumentQueryRequest | undefined>('/rag/documents/query', query);
}
export function getRagDocumentById(id: string) {
return get<RagDocument>('/rag/documents/detail', {
params: { id },
});
}
export function saveRagDocument(data: RagDocumentSaveRequest) {
return post<boolean, RagDocumentSaveRequest>('/rag/documents/save', data);
}
export function deleteRagDocument(id: string) {
return post<boolean>('/rag/documents/delete', undefined, {
params: { id },
});
}
export function batchUploadRagDocuments(data: RagDocumentBatchUploadRequest) {
const formData = new FormData();
formData.append('storeId', data.storeId);
formData.append('sourceType', data.sourceType || SOURCE_TYPE_RAG);
data.files.forEach((file) => {
formData.append('files', file);
});
if (data.documentSummary) {
formData.append('documentSummary', data.documentSummary);
}
if (data.remark) {
formData.append('remark', data.remark);
}
return post<RagDocument[], FormData>('/rag/documents/batchUpload', formData);
}

472
frontend/src/pages/RagDocumentsPage.vue
View File

@@ -1,8 +1,478 @@
<script setup lang="ts">
import { Search, UploadFilled } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, onMounted, reactive, ref } from 'vue';
import {
batchUploadRagDocuments,
deleteRagDocument,
getRagDocumentById,
listRagDocuments,
saveRagDocument,
SOURCE_TYPE_RAG,
type RagDocument,
} from '@/api/ragDocuments';
import { queryRagStores, type RagStore } from '@/api/ragStores';
const loading = ref(false);
const submitting = ref(false);
const storeOptions = ref<RagStore[]>([]);
const docRows = ref<RagDocument[]>([]);
const queryForm = reactive({
storeId: '',
parseStatus: '',
indexStatus: '',
enabled: '' as string,
keyword: '',
});
const editDialogVisible = ref(false);
const uploadDialogVisible = ref(false);
const uploadStoreId = ref('');
const uploadSummary = ref('');
const uploadRemark = ref('');
const editForm = reactive({
id: '',
storeId: '',
attachmentId: '',
documentTitle: '',
documentSummary: '',
enabled: true,
remark: '',
});
const filteredRows = computed(() => {
const kw = queryForm.keyword.trim().toLowerCase();
return docRows.value.filter(
(row) => {
const matchStore = !queryForm.storeId || row.storeId === queryForm.storeId;
const matchParseStatus = !queryForm.parseStatus || row.parseStatus === queryForm.parseStatus;
const matchIndexStatus = !queryForm.indexStatus || row.indexStatus === queryForm.indexStatus;
const matchEnabled = !queryForm.enabled || String(row.enabled ?? false) === queryForm.enabled;
const matchKeyword =
!kw ||
(row.documentTitle && row.documentTitle.toLowerCase().includes(kw)) ||
(row.documentSummary && row.documentSummary.toLowerCase().includes(kw)) ||
(row.remark && row.remark.toLowerCase().includes(kw));
return matchStore && matchParseStatus && matchIndexStatus && matchEnabled && matchKeyword;
},
);
});
async function loadStores() {
try {
const response = await queryRagStores();
storeOptions.value = response.data ?? [];
} catch {
storeOptions.value = [];
}
}
async function loadDocs() {
loading.value = true;
try {
const response = await listRagDocuments();
docRows.value = response.data ?? [];
} finally {
loading.value = false;
}
}
function handleSearch() {
loadDocs();
}
function handleReset() {
queryForm.storeId = '';
queryForm.parseStatus = '';
queryForm.indexStatus = '';
queryForm.enabled = '';
queryForm.keyword = '';
loadDocs();
}
function openUploadDialog() {
if (storeOptions.value.length === 0) {
ElMessage.warning('请先创建知识库');
return;
}
const firstStore = storeOptions.value[0];
uploadStoreId.value = queryForm.storeId || (firstStore ? String(firstStore.id) : '');
uploadSummary.value = '';
uploadRemark.value = '';
uploadDialogVisible.value = true;
}
async function submitUpload() {
if (!uploadStoreId.value) {
ElMessage.warning('请选择知识库');
return;
}
const files = (document.getElementById('rag-file-input') as HTMLInputElement)?.files;
if (!files || files.length === 0) {
ElMessage.warning('请选择要上传的文件');
return;
}
submitting.value = true;
try {
await batchUploadRagDocuments({
storeId: uploadStoreId.value,
sourceType: SOURCE_TYPE_RAG,
files: Array.from(files),
documentSummary: uploadSummary.value || undefined,
remark: uploadRemark.value || undefined,
});
uploadDialogVisible.value = false;
ElMessage.success('文档已上传');
await loadDocs();
} finally {
submitting.value = false;
}
}
async function openEditDialog(row: RagDocument) {
const detail = row.id ? (await getRagDocumentById(String(row.id))).data : row;
editForm.id = String(detail.id ?? '');
editForm.storeId = detail.storeId;
editForm.attachmentId = detail.attachmentId ?? '';
editForm.documentTitle = detail.documentTitle ?? '';
editForm.documentSummary = detail.documentSummary ?? '';
editForm.enabled = detail.enabled ?? true;
editForm.remark = detail.remark ?? '';
editDialogVisible.value = true;
}
async function submitEdit() {
if (!editForm.id || !editForm.storeId || !editForm.documentTitle) {
ElMessage.warning('请填写文档标题');
return;
}
submitting.value = true;
try {
await saveRagDocument({
id: editForm.id,
storeId: editForm.storeId,
attachmentId: editForm.attachmentId || undefined,
documentTitle: editForm.documentTitle,
documentSummary: editForm.documentSummary || undefined,
enabled: editForm.enabled,
remark: editForm.remark || undefined,
});
editDialogVisible.value = false;
ElMessage.success('文档信息已更新');
await loadDocs();
} finally {
submitting.value = false;
}
}
async function removeDoc(row: RagDocument) {
if (!row.id) return;
await ElMessageBox.confirm(
`确认删除文档「${row.documentTitle || '未命名'}」？`,
'删除确认',
{ type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
);
await deleteRagDocument(String(row.id));
ElMessage.success('文档已删除');
await loadDocs();
}
function toggleEnabled(row: RagDocument) {
if (!row.id) return;
const newEnabled = !row.enabled;
saveRagDocument({
id: String(row.id),
storeId: row.storeId,
documentTitle: row.documentTitle ?? '',
enabled: newEnabled,
}).then(() => {
row.enabled = newEnabled;
ElMessage.success(`已${newEnabled ? '启用' : '停用'}`);
});
}
function getStoreName(storeId: string) {
const store = storeOptions.value.find((s) => String(s.id) === storeId);
return store ? store.storeName : '-';
}
function getStatusLabel(status?: string | null) {
const map: Record<string, string> = {
UPLOADED: '已上传',
PARSING: '解析中',
PARSED: '已解析',
FAILED: '解析失败',
PENDING: '待索引',
INDEXING: '索引中',
INDEXED: '已索引',
};
return status ? (map[status] ?? status) : '-';
}
function getParseStatusType(status?: string | null) {
const success = ['PARSED'];
const warning = ['UPLOADED', 'PARSING'];
const danger = ['FAILED'];
if (!status) return 'info';
if (success.includes(status)) return 'success';
if (warning.includes(status)) return 'warning';
if (danger.includes(status)) return 'danger';
return 'info';
}
function getIndexStatusType(status?: string | null) {
const success = ['INDEXED'];
const warning = ['PENDING', 'INDEXING'];
const danger = ['FAILED'];
if (!status) return 'info';
if (success.includes(status)) return 'success';
if (warning.includes(status)) return 'warning';
if (danger.includes(status)) return 'danger';
return 'info';
}
onMounted(() => {
loadStores();
loadDocs();
});
</script>
<template>
<section class="page-panel">
<section class="page-panel rag-doc-page">
<div class="page-panel__header">
<h2>知识文档</h2>
<span>Documents</span>
</div>
<div class="toolbar">
<div class="toolbar__filters">
<el-select
v-model="queryForm.storeId"
data-test="doc-store-filter"
placeholder="选择知识库"
clearable
style="width: 180px"
>
<el-option
v-for="store in storeOptions"
:key="String(store.id)"
:label="store.storeName"
:value="String(store.id)"
/>
</el-select>
<el-select
v-model="queryForm.parseStatus"
data-test="doc-parse-filter"
placeholder="解析状态"
clearable
style="width: 130px"
>
<el-option label="已上传" value="UPLOADED" />
<el-option label="解析中" value="PARSING" />
<el-option label="已解析" value="PARSED" />
<el-option label="解析失败" value="FAILED" />
</el-select>
<el-select
v-model="queryForm.indexStatus"
data-test="doc-index-filter"
placeholder="索引状态"
clearable
style="width: 130px"
>
<el-option label="待索引" value="PENDING" />
<el-option label="索引中" value="INDEXING" />
<el-option label="已索引" value="INDEXED" />
<el-option label="索引失败" value="FAILED" />
</el-select>
<el-select
v-model="queryForm.enabled"
data-test="doc-enabled-filter"
placeholder="启用状态"
clearable
style="width: 120px"
>
<el-option label="启用" value="true" />
<el-option label="停用" value="false" />
</el-select>
<el-input
v-model="queryForm.keyword"
data-test="doc-keyword-input"
placeholder="搜索标题/摘要/备注"
clearable
style="width: 180px"
@keyup.enter="handleSearch"
/>
</div>
<div class="toolbar__actions">
<el-button type="primary" :icon="UploadFilled" @click="openUploadDialog">批量上传</el-button>
<el-button data-test="doc-search" type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</div>
<el-table v-loading="loading" :data="filteredRows" border stripe style="width: 100%">
<el-table-column prop="documentTitle" label="文档标题" min-width="180" show-overflow-tooltip />
<el-table-column label="所属知识库" width="150">
<template #default="{ row }">
{{ getStoreName(row.storeId) }}
</template>
</el-table-column>
<el-table-column label="解析状态" width="110">
<template #default="{ row }">
<el-tag :type="getParseStatusType(row.parseStatus)" size="small">
{{ getStatusLabel(row.parseStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="索引状态" width="110">
<template #default="{ row }">
<el-tag :type="getIndexStatusType(row.indexStatus)" size="small">
{{ getStatusLabel(row.indexStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="启用" width="80" align="center">
<template #default="{ row }">
<el-switch
:model-value="row.enabled ?? false"
size="small"
@change="toggleEnabled(row)"
/>
</template>
</el-table-column>
<el-table-column prop="documentSummary" label="摘要" min-width="160" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" width="170" />
<el-table-column label="操作" width="160" fixed="right">
<template #default="{ row }">
<el-button :data-test="`doc-edit-${row.id}`" link type="primary" @click="openEditDialog(row)">编辑</el-button>
<el-button link type="danger" @click="removeDoc(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-empty v-if="!loading && filteredRows.length === 0" description="暂无知识文档" />
<!-- 上传对话框 -->
<el-dialog v-model="uploadDialogVisible" title="批量上传文档" width="560px">
<el-form label-width="96px">
<el-form-item label="知识库" required>
<el-select v-model="uploadStoreId" placeholder="请选择知识库" style="width: 100%">
<el-option
v-for="store in storeOptions"
:key="String(store.id)"
:label="store.storeName"
:value="String(store.id)"
/>
</el-select>
</el-form-item>
<el-form-item label="选择文件" required>
<input id="rag-file-input" type="file" multiple accept=".pdf,.doc,.docx,.txt,.md" />
<p class="form-hint">支持 PDF、Word、TXT、Markdown 等格式</p>
</el-form-item>
<el-form-item label="文档摘要">
<el-input
v-model="uploadSummary"
type="textarea"
:rows="2"
placeholder="可选，将统一设置到所有上传文档"
/>
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="uploadRemark"
type="textarea"
:rows="2"
placeholder="可选"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="uploadDialogVisible = false">取消</el-button>
<el-button type="primary" :loading="submitting" @click="submitUpload">上传</el-button>
</template>
</el-dialog>
<!-- 编辑对话框 -->
<el-dialog v-model="editDialogVisible" title="编辑文档" width="560px">
<el-form :model="editForm" label-width="96px">
<el-form-item label="文档标题" required>
<el-input v-model="editForm.documentTitle" />
</el-form-item>
<el-form-item label="文档摘要">
<el-input v-model="editForm.documentSummary" type="textarea" :rows="3" />
</el-form-item>
<el-form-item label="启用">
<el-switch v-model="editForm.enabled" />
</el-form-item>
<el-form-item label="备注">
<el-input v-model="editForm.remark" type="textarea" :rows="2" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="editDialogVisible = false">取消</el-button>
<el-button type="primary" :loading="submitting" @click="submitEdit">保存</el-button>
</template>
</el-dialog>
</section>
</template>
<style scoped>
.rag-doc-page {
display: flex;
flex-direction: column;
}
.toolbar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
padding: 16px 22px;
border-bottom: 1px solid #eef2f7;
flex-wrap: wrap;
}
.toolbar__filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 1;
}
.toolbar__actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.form-hint {
margin: 4px 0 0;
color: #98a2b3;
font-size: 12px;
}
@media (max-width: 768px) {
.toolbar {
flex-direction: column;
align-items: stretch;
}
.toolbar__filters {
flex-direction: column;
}
.toolbar__actions {
justify-content: flex-end;
}
}
</style>

125
frontend/src/pages/__tests__/RagDocumentsPage.spec.ts Normal file
View File

@@ -0,0 +1,125 @@
import { flushPromises, mount } from '@vue/test-utils';
import ElementPlus from 'element-plus';
import { describe, expect, it, vi } from 'vitest';
import RagDocumentsPage from '../RagDocumentsPage.vue';
import { getRagDocumentById, listRagDocuments, queryRagDocuments } from '@/api/ragDocuments';
import { queryRagStores } from '@/api/ragStores';
vi.mock('@/api/ragStores', () => ({
queryRagStores: vi.fn(() =>
Promise.resolve({
resultcode: '0',
message: null,
data: [
{ id: '1', storeCode: 'PROD_DOC', storeName: '产品制度库', status: '启用' },
{ id: '2', storeCode: 'FAQ', storeName: 'FAQ知识库', status: '停用' },
],
}),
),
}));
vi.mock('@/api/ragDocuments', () => ({
SOURCE_TYPE_RAG: 'RAG',
listRagDocuments: vi.fn(() =>
Promise.resolve({
resultcode: '0',
message: null,
data: [
{
id: '11',
storeId: '1',
attachmentId: '101',
documentTitle: '产品制度总则',
documentSummary: '制度摘要',
parseStatus: 'UPLOADED',
indexStatus: 'PENDING',
enabled: true,
remark: '制度文档',
createTime: '2026-05-21 10:00:00',
},
{
id: '22',
storeId: '2',
attachmentId: '202',
documentTitle: 'FAQ 手册',
documentSummary: 'FAQ 摘要',
parseStatus: 'PARSED',
indexStatus: 'INDEXED',
enabled: false,
remark: '常见问题',
createTime: '2026-05-21 11:00:00',
},
],
}),
),
queryRagDocuments: vi.fn(),
getRagDocumentById: vi.fn((id: string) =>
Promise.resolve({
resultcode: '0',
message: null,
data: {
id,
storeId: '2',
attachmentId: '202',
documentTitle: 'FAQ 手册',
documentSummary: 'FAQ 摘要',
enabled: false,
remark: '常见问题',
},
}),
),
saveRagDocument: vi.fn(() => Promise.resolve({ resultcode: '0', message: null, data: true })),
deleteRagDocument: vi.fn(() => Promise.resolve({ resultcode: '0', message: null, data: true })),
batchUploadRagDocuments: vi.fn(() => Promise.resolve({ resultcode: '0', message: null, data: [] })),
}));
describe('RagDocumentsPage', () => {
it('loads documents from list api instead of broken query api', async () => {
const wrapper = mount(RagDocumentsPage, {
global: {
plugins: [ElementPlus],
},
});
await flushPromises();
expect(queryRagStores).toHaveBeenCalled();
expect(listRagDocuments).toHaveBeenCalled();
expect(queryRagDocuments).not.toHaveBeenCalled();
expect(wrapper.text()).toContain('产品制度总则');
expect(wrapper.text()).toContain('FAQ 手册');
});
it('filters rows locally and still avoids query api on search', async () => {
const wrapper = mount(RagDocumentsPage, {
global: {
plugins: [ElementPlus],
},
});
await flushPromises();
await wrapper.get('[data-test="doc-keyword-input"]').setValue('FAQ');
await wrapper.get('[data-test="doc-search"]').trigger('click');
await flushPromises();
expect(listRagDocuments).toHaveBeenCalled();
expect(queryRagDocuments).not.toHaveBeenCalled();
expect(wrapper.text()).toContain('FAQ 手册');
expect(wrapper.text()).not.toContain('产品制度总则');
});
it('loads backend detail when editing a row', async () => {
const wrapper = mount(RagDocumentsPage, {
global: {
plugins: [ElementPlus],
},
});
await flushPromises();
await wrapper.get('[data-test="doc-edit-22"]').trigger('click');
await flushPromises();
expect(getRagDocumentById).toHaveBeenCalledWith('22');
});
});