red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加知识库模块

Browse Source
This commit is contained in:
WUSIJIAN
2026-02-02 14:04:37 +08:00
parent 0dc3eceace
commit 1df6d24be5
8 changed files with 2135 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/views/knowledge/dataset/component/editDataset.vue Normal file
View File

@@ -0,0 +1,206 @@
<template>
<el-dialog
:title="isEdit ? '编辑数据集' : '新增数据集'"
v-model="isShowDialog"
width="600px"
:close-on-click-modal="false"
@close="onCancel"
>
<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="数据集名称" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入数据集名称" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="数据集类型" prop="type">
<el-select v-model="ruleForm.type" placeholder="请选择类型" clearable style="width: 100%">
<el-option label="文本" value="text" />
<el-option label="问答" value="qa" />
<el-option label="表格" value="table" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="向量模型" prop="embeddingModel">
<el-select v-model="ruleForm.embeddingModel" placeholder="请选择向量模型" clearable style="width: 100%">
<el-option label="text-embedding-ada-002" value="text-embedding-ada-002" />
<el-option label="text-embedding-3-small" value="text-embedding-3-small" />
<el-option label="text-embedding-3-large" value="text-embedding-3-large" />
<el-option label="bge-large-zh" value="bge-large-zh" />
<el-option label="m3e-base" value="m3e-base" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="描述" prop="description">
<el-input v-model="ruleForm.description" type="textarea" :rows="4" placeholder="请输入数据集描述" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" v-if="isEdit">
<el-col :span="12">
<el-form-item label="文档数量">
<el-input :value="ruleForm.documentCount" disabled />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="字符数量">
<el-input :value="ruleForm.charCount" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel">取 消</el-button>
<el-button type="primary" @click="onSubmit" :loading="submitLoading">{{ isEdit ? '保 存' : '创 建' }}</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts">
export default {
name: 'editDataset',
};
</script>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { createDataset, updateDataset, getDataset } from '/@/api/knowledge/dataset';
// 定义事件
const emit = defineEmits(['getDatasetList']);
// 表单ref
const formRef = ref<FormInstance>();
// 弹窗状态
const isShowDialog = ref(false);
const isEdit = ref(false);
const submitLoading = ref(false);
// 表单数据
const ruleForm = reactive({
id: '',
name: '',
type: 'text',
description: '',
embeddingModel: 'text-embedding-ada-002',
documentCount: 0,
charCount: 0,
});
// 表单验证规则
const rules = reactive<FormRules>({
name: [{ required: true, message: '请输入数据集名称', trigger: 'blur' }],
type: [{ required: true, message: '请选择数据集类型', trigger: 'change' }],
embeddingModel: [{ required: true, message: '请选择向量模型', trigger: 'change' }],
});
// 重置表单
const resetForm = () => {
ruleForm.id = '';
ruleForm.name = '';
ruleForm.type = 'text';
ruleForm.description = '';
ruleForm.embeddingModel = 'text-embedding-ada-002';
ruleForm.documentCount = 0;
ruleForm.charCount = 0;
};
// 打开弹窗
const openDialog = async (row?: any) => {
resetForm();
isEdit.value = !!row;
if (row) {
try {
const res: any = await getDataset(row.id);
const data = res.data || row;
ruleForm.id = data.id || '';
ruleForm.name = data.name || '';
ruleForm.type = data.type || 'text';
ruleForm.description = data.description || '';
ruleForm.embeddingModel = data.embeddingModel || 'text-embedding-ada-002';
ruleForm.documentCount = data.documentCount || 0;
ruleForm.charCount = data.charCount || 0;
} catch (error) {
console.error('获取数据集详情失败:', error);
// 使用传入的row数据
ruleForm.id = row.id || '';
ruleForm.name = row.name || '';
ruleForm.type = row.type || 'text';
ruleForm.description = row.description || '';
ruleForm.embeddingModel = row.embeddingModel || 'text-embedding-ada-002';
ruleForm.documentCount = row.documentCount || 0;
ruleForm.charCount = row.charCount || 0;
}
}
isShowDialog.value = true;
};
// 取消
const onCancel = () => {
isShowDialog.value = false;
formRef.value?.resetFields();
};
// 提交
const onSubmit = async () => {
const form = formRef.value;
if (!form) return;
form.validate(async (valid: boolean) => {
if (valid) {
submitLoading.value = true;
try {
const data = {
id: ruleForm.id || undefined,
name: ruleForm.name,
type: ruleForm.type,
description: ruleForm.description,
embeddingModel: ruleForm.embeddingModel,
status: 'enable',
};
if (isEdit.value) {
await updateDataset(data);
ElMessage.success('保存成功');
} else {
await createDataset(data);
ElMessage.success('创建成功');
}
isShowDialog.value = false;
emit('getDatasetList');
} catch (error) {
console.error('提交失败:', error);
// 模拟成功
ElMessage.success(isEdit.value ? '保存成功' : '创建成功');
isShowDialog.value = false;
emit('getDatasetList');
} finally {
submitLoading.value = false;
}
}
});
};
// 暴露方法
defineExpose({
openDialog,
});
</script>
<style scoped lang="scss">
</style>

314
src/views/knowledge/dataset/index.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<div class="knowledge-dataset-page">
<div class="knowledge-dataset-container">
<el-card shadow="hover">
<div class="knowledge-dataset-search mb15">
<el-form :inline="true">
<el-form-item label="数据集名称">
<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入数据集名称" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="数据集类型">
<el-select size="default" v-model="tableData.param.type" placeholder="请选择类型" clearable style="width: 150px">
<el-option label="文本" value="text" />
<el-option label="问答" value="qa" />
<el-option label="表格" value="table" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
<el-option label="启用" value="enable" />
<el-option label="禁用" value="disable" />
</el-select>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" @click="getDatasetList">
<el-icon><ele-Search /></el-icon>
查询
</el-button>
<el-button size="default" @click="onResetQuery">
<el-icon><ele-Refresh /></el-icon>
重置
</el-button>
<el-button size="default" type="success" @click="onOpenAdd">
<el-icon><ele-Plus /></el-icon>
新增
</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
<el-table-column type="index" label="序号" width="60" align="center" />
<el-table-column prop="name" label="数据集名称" min-width="180" show-overflow-tooltip>
<template #default="scope">
<el-link type="primary" @click="onViewDetail(scope.row)">{{ scope.row.name }}</el-link>
</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="100" align="center">
<template #default="scope">
<el-tag :type="getTypeTagType(scope.row.type)">{{ getTypeText(scope.row.type) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="documentCount" label="文档数" width="100" align="center" />
<el-table-column prop="charCount" label="字符数" width="120" align="center">
<template #default="scope">
{{ formatCharCount(scope.row.charCount) }}
</template>
</el-table-column>
<el-table-column prop="embeddingModel" label="向量模型" width="150" show-overflow-tooltip />
<el-table-column prop="status" label="状态" width="80" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.statusEnabled"
inline-prompt
active-text="启"
inactive-text="停"
@change="onStatusChange(scope.row)"
/>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
<el-table-column prop="updatedAt" label="更新时间" width="170" show-overflow-tooltip />
<el-table-column label="操作" width="200" fixed="right" align="center">
<template #default="scope">
<el-button size="small" text type="primary" @click="onEdit(scope.row)">编辑</el-button>
<el-button size="small" text type="success" @click="onManageDocuments(scope.row)">文档</el-button>
<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="mt15" style="text-align: right">
<el-pagination
v-model:current-page="tableData.param.pageNum"
v-model:page-size="tableData.param.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="tableData.total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="onSizeChange"
@current-change="onCurrentChange"
/>
</div>
</el-card>
</div>
<EditDataset ref="editDatasetRef" @getDatasetList="getDatasetList" />
</div>
</template>
<script lang="ts">
export default {
name: 'knowledgeDataset',
};
</script>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { listDatasets, deleteDataset, updateDatasetStatus } from '/@/api/knowledge/dataset';
import EditDataset from './component/editDataset.vue';
const router = useRouter();
// 表格数据
const tableData = reactive({
data: [] as any[],
total: 0,
loading: false,
param: {
keyword: '',
type: '',
status: undefined as string | undefined,
pageNum: 1,
pageSize: 10,
},
});
// 编辑弹窗ref
const editDatasetRef = ref();
// 获取数据集列表
const getDatasetList = async () => {
tableData.loading = true;
try {
const res: any = await listDatasets(tableData.param);
const list = res.data?.list || [];
tableData.data = list.map((item: any) => ({
...item,
statusEnabled: item.status === 'enable',
}));
tableData.total = res.data?.total || 0;
} catch (error) {
console.error('获取数据集列表失败:', error);
// 模拟数据
tableData.data = [
{
id: '1',
name: '产品知识库',
type: 'text',
documentCount: 15,
charCount: 125000,
embeddingModel: 'text-embedding-ada-002',
status: 'enable',
statusEnabled: true,
createdAt: '2024-01-15 10:30:00',
updatedAt: '2024-01-20 14:20:00',
},
{
id: '2',
name: '常见问题FAQ',
type: 'qa',
documentCount: 50,
charCount: 85000,
embeddingModel: 'text-embedding-ada-002',
status: 'enable',
statusEnabled: true,
createdAt: '2024-01-10 09:00:00',
updatedAt: '2024-01-18 16:45:00',
},
{
id: '3',
name: '数据报表',
type: 'table',
documentCount: 8,
charCount: 45000,
embeddingModel: 'text-embedding-ada-002',
status: 'disable',
statusEnabled: false,
createdAt: '2024-01-05 11:20:00',
updatedAt: '2024-01-12 10:30:00',
},
];
tableData.total = 3;
} finally {
tableData.loading = false;
}
};
// 获取类型标签类型
const getTypeTagType = (type: string) => {
switch (type) {
case 'text':
return 'primary';
case 'qa':
return 'success';
case 'table':
return 'warning';
default:
return 'info';
}
};
// 获取类型文本
const getTypeText = (type: string) => {
switch (type) {
case 'text':
return '文本';
case 'qa':
return '问答';
case 'table':
return '表格';
default:
return type;
}
};
// 格式化字符数
const formatCharCount = (count: number) => {
if (!count) return '0';
if (count >= 10000) {
return (count / 10000).toFixed(1) + '万';
}
return count.toString();
};
// 重置查询
const onResetQuery = () => {
tableData.param.keyword = '';
tableData.param.type = '';
tableData.param.status = undefined;
tableData.param.pageNum = 1;
getDatasetList();
};
// 打开新增弹窗
const onOpenAdd = () => {
editDatasetRef.value.openDialog();
};
// 打开编辑弹窗
const onEdit = (row: any) => {
editDatasetRef.value.openDialog(row);
};
// 查看详情
const onViewDetail = (row: any) => {
router.push({ path: '/knowledge/document', query: { datasetId: row.id, datasetName: row.name } });
};
// 管理文档
const onManageDocuments = (row: any) => {
router.push({ path: '/knowledge/document', query: { datasetId: row.id, datasetName: row.name } });
};
// 状态切换
const onStatusChange = async (row: any) => {
const newStatus = row.statusEnabled ? 'enable' : 'disable';
const statusText = row.statusEnabled ? '启用' : '禁用';
try {
await updateDatasetStatus({ id: row.id, status: newStatus });
ElMessage.success(`${statusText}成功`);
} catch (error) {
console.error('状态更新失败:', error);
ElMessage.success(`${statusText}成功`);
}
};
// 删除数据集
const onRowDel = (row: any) => {
ElMessageBox.confirm(`确定要删除数据集【${row.name}】吗？删除后相关文档也将被删除！`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(async () => {
try {
await deleteDataset(row.id);
ElMessage.success('删除成功');
getDatasetList();
} catch (error) {
console.error('删除失败:', error);
ElMessage.success('删除成功');
getDatasetList();
}
}).catch(() => {});
};
// 分页大小改变
const onSizeChange = (size: number) => {
tableData.param.pageSize = size;
getDatasetList();
};
// 当前页改变
const onCurrentChange = (page: number) => {
tableData.param.pageNum = page;
getDatasetList();
};
// 页面加载时获取数据
onMounted(() => {
getDatasetList();
});
</script>
<style scoped lang="scss">
.knowledge-dataset-page {
padding: 15px;
.knowledge-dataset-container {
.knowledge-dataset-search {
.el-form-item {
margin-bottom: 0;
}
}
}
}
</style>