caoxiaozhu/X-Agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 扩展 Knowledge 页面功能

Browse Source 
- 添加知识库详情和编辑功能
- 新增 chunking 配置选项
- 优化知识库列表展示

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-07 16:21:35 +08:00
parent 25d3781f06
commit 329968de7f
2 changed files with 358 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
web/src/views/Knowledge.vue
View File

@@ -59,13 +59,44 @@ const embeddingConfig = ref({
model: '',
})
const parsingConfig = ref({
enablePdf: true,
engine: 'default',
pandoc: true,
academic: false,
highRes: false,
fileSizeLimit: '5242880',
})
const openCreateDialog = () => {
createStep.value = 1
newKbForm.value = { name: '', description: '' }
embeddingConfig.value = { provider: '', model: '' }
parsingConfig.value = {
enablePdf: true,
engine: 'default',
pandoc: true,
academic: false,
highRes: false,
fileSizeLimit: '5242880',
}
showCreateDialog.value = true
}
const cancelCreate = () => {
newKbForm.value = { name: '', description: '' }
embeddingConfig.value = { provider: '', model: '' }
parsingConfig.value = {
enablePdf: true,
engine: 'default',
pandoc: true,
academic: false,
highRes: false,
fileSizeLimit: '5242880',
}
showCreateDialog.value = false
}
const nextStep = () => {
if (!newKbForm.value.name) {
ElMessage.warning('Please enter knowledge base name')
@@ -94,12 +125,6 @@ const createKnowledgeBase = () => {
ElMessage.success('Knowledge base created successfully')
}
const cancelCreate = () => {
newKbForm.value = { name: '', description: '' }
embeddingConfig.value = { provider: '', model: '' }
showCreateDialog.value = false
}
// 编辑知识库
const showEditDialog = ref(false)
const editForm = ref({
@@ -271,8 +296,8 @@ const viewDetail = (kb: any) => {
>
<i class="fa-solid fa-layer-group menu-icon"></i>
<div class="menu-content">
<span class="menu-title">基本信息</span>
<span class="menu-desc">知识库名称和描述</span>
<span class="menu-title">Basic Info</span>
<span class="menu-desc">Name and description</span>
</div>
<i v-if="createStep === 1" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
@@ -281,42 +306,102 @@ const viewDetail = (kb: any) => {
:class="{ active: createStep === 2 }"
@click="createStep = 2"
>
<i class="fa-solid fa-brain menu-icon"></i>
<i class="fa-solid fa-robot menu-icon"></i>
<div class="menu-content">
<span class="menu-title">Embedding 配置</span>
<span class="menu-desc">向量化和检索设置</span>
<span class="menu-title">Model Config</span>
<span class="menu-desc">Embedding & rerank models</span>
</div>
<i v-if="createStep === 2" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
<div
class="menu-item"
:class="{ active: createStep === 3 }"
@click="createStep = 3"
>
<i class="fa-solid fa-file-lines menu-icon"></i>
<div class="menu-content">
<span class="menu-title">Parsing</span>
<span class="menu-desc">Document parsing settings</span>
</div>
<i v-if="createStep === 3" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
<div
class="menu-item"
:class="{ active: createStep === 4 }"
@click="createStep = 4"
>
<i class="fa-solid fa-hard-drive menu-icon"></i>
<div class="menu-content">
<span class="menu-title">Storage</span>
<span class="menu-desc">Vector & file storage</span>
</div>
<i v-if="createStep === 4" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
<div
class="menu-item"
:class="{ active: createStep === 5 }"
@click="createStep = 5"
>
<i class="fa-solid fa-scissors menu-icon"></i>
<div class="menu-content">
<span class="menu-title">Chunking</span>
<span class="menu-desc">Text chunking strategy</span>
</div>
<i v-if="createStep === 5" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
<div
class="menu-item"
:class="{ active: createStep === 6 }"
@click="createStep = 6"
>
<i class="fa-solid fa-project-diagram menu-icon"></i>
<div class="menu-content">
<span class="menu-title">Knowledge Graph</span>
<span class="menu-desc">Graph extraction settings</span>
</div>
<i v-if="createStep === 6" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
<div
class="menu-item"
:class="{ active: createStep === 7 }"
@click="createStep = 7"
>
<i class="fa-solid fa-sliders menu-icon"></i>
<div class="menu-content">
<span class="menu-title">Advanced</span>
<span class="menu-desc">Additional settings</span>
</div>
<i v-if="createStep === 7" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
</div>
<!-- 右侧：内容区 -->
<div class="content">
<!-- 基本信息 -->
<!-- Step 1: Basic Info -->
<div v-if="createStep === 1" class="form-content">
<div class="section-header">
<i class="fa-solid fa-layer-group section-icon"></i>
<span class="section-title">基本信息</span>
<span class="section-title">Basic Info</span>
</div>
<el-form label-position="top" class="kb-form">
<el-form-item label="名称" required>
<el-input v-model="newKbForm.name" placeholder="请输入知识库名称" />
<el-form-item label="Name" required>
<el-input v-model="newKbForm.name" placeholder="Enter knowledge base name" />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="newKbForm.description" type="textarea" :rows="4" placeholder="请输入知识库描述" />
<el-form-item label="Description">
<el-input v-model="newKbForm.description" type="textarea" :rows="4" placeholder="Enter knowledge base description" />
</el-form-item>
</el-form>
</div>
<!-- Embedding 配置 -->
<!-- Step 2: Model Config -->
<div v-if="createStep === 2" class="form-content">
<div class="section-header">
<i class="fa-solid fa-brain section-icon"></i>
<span class="section-title">Embedding 配置</span>
<i class="fa-solid fa-robot section-icon"></i>
<span class="section-title">Model Config</span>
</div>
<el-form label-position="top" class="kb-form">
<el-form-item label="Embedding Provider">
<el-select v-model="embeddingConfig.provider" placeholder="请选择 Embedding 服务商" class="w-full">
<el-select v-model="embeddingConfig.provider" placeholder="Select embedding provider" class="w-full">
<el-option label="OpenAI" value="openai">
<div class="provider-option">
<i class="fa-solid fa-robot"></i>
@@ -338,7 +423,141 @@ const viewDetail = (kb: any) => {
</el-select>
</el-form-item>
<el-form-item label="Embedding Model">
<el-input v-model="embeddingConfig.model" placeholder="如：text-embedding-ada-002" />
<el-input v-model="embeddingConfig.model" placeholder="e.g., text-embedding-ada-002" />
</el-form-item>
</el-form>
</div>
<!-- Step 3: Parsing -->
<div v-if="createStep === 3" class="form-content">
<div class="section-header">
<i class="fa-solid fa-file-lines section-icon"></i>
<span class="section-title">Parsing</span>
</div>
<div class="parsing-section">
<div class="parsing-row">
<span class="parsing-label">Enable PDF Parsing</span>
<el-switch v-model="parsingConfig.enablePdf" />
</div>
<div class="parsing-row">
<span class="parsing-label">Parsing Engine</span>
<el-select v-model="parsingConfig.engine" placeholder="Select engine" class="parsing-select">
<el-option label="Default Engine" value="default" />
<el-option label="DeepDoc" value="deepdoc" />
</el-select>
</div>
<div class="parsing-divider"></div>
<div class="parsing-label">Enabled Post-processing</div>
<div class="postprocess-list">
<div class="postprocess-item" :class="{ active: parsingConfig.pandoc }">
<div class="postprocess-toggle">
<el-switch v-model="parsingConfig.pandoc" />
</div>
<div class="postprocess-info">
<span class="postprocess-title">Use Pandoc Markdown Enrichment</span>
<span class="postprocess-desc">Enable Pandoc conversion for rich formatting</span>
</div>
</div>
<div class="postprocess-item" :class="{ active: parsingConfig.academic }">
<div class="postprocess-toggle">
<el-switch v-model="parsingConfig.academic" />
</div>
<div class="postprocess-info">
<span class="postprocess-title">Use Academic Document Parsing</span>
<span class="postprocess-desc">Parse formulas, tables, and academic structures</span>
</div>
</div>
<div class="postprocess-item" :class="{ active: parsingConfig.highRes }">
<div class="postprocess-toggle">
<el-switch v-model="parsingConfig.highRes" />
</div>
<div class="postprocess-info">
<span class="postprocess-title">Use High Resolution Parsing</span>
<span class="postprocess-desc">High quality mode for complex documents</span>
</div>
</div>
</div>
<div class="parsing-divider"></div>
<div class="parsing-row">
<span class="parsing-label">File Size Limit</span>
<el-input v-model="parsingConfig.fileSizeLimit" class="parsing-input" />
</div>
</div>
</div>
<!-- Step 4: Storage -->
<div v-if="createStep === 4" class="form-content">
<div class="section-header">
<i class="fa-solid fa-hard-drive section-icon"></i>
<span class="section-title">Storage</span>
</div>
<el-form label-position="top" class="kb-form">
<el-form-item label="Storage Type">
<el-select placeholder="Select storage type" class="w-full">
<el-option label="Local" value="local" />
<el-option label="MinIO" value="minio" />
<el-option label="S3" value="s3" />
</el-select>
</el-form-item>
</el-form>
</div>
<!-- Step 5: Chunking -->
<div v-if="createStep === 5" class="form-content">
<div class="section-header">
<i class="fa-solid fa-scissors section-icon"></i>
<span class="section-title">Chunking</span>
</div>
<el-form label-position="top" class="kb-form">
<el-form-item label="Chunk Size">
<el-input type="number" placeholder="e.g., 500" />
</el-form-item>
<el-form-item label="Chunk Overlap">
<el-input type="number" placeholder="e.g., 50" />
</el-form-item>
</el-form>
</div>
<!-- Step 6: Knowledge Graph -->
<div v-if="createStep === 6" class="form-content">
<div class="section-header">
<i class="fa-solid fa-project-diagram section-icon"></i>
<span class="section-title">Knowledge Graph</span>
</div>
<el-form label-position="top" class="kb-form">
<el-form-item label="Enable Knowledge Graph">
<el-switch />
</el-form-item>
<el-form-item label="Graph Extraction">
<el-select placeholder="Select extraction level" class="w-full">
<el-option label="Entities Only" value="entities" />
<el-option label="Entities & Relations" value="relations" />
</el-select>
</el-form-item>
</el-form>
</div>
<!-- Step 7: Advanced -->
<div v-if="createStep === 7" class="form-content">
<div class="section-header">
<i class="fa-solid fa-sliders section-icon"></i>
<span class="section-title">Advanced</span>
</div>
<el-form label-position="top" class="kb-form">
<el-form-item label="Top K">
<el-input type="number" placeholder="e.g., 5" />
</el-form-item>
<el-form-item label="Score Threshold">
<el-input type="number" placeholder="e.g., 0.7" />
</el-form-item>
</el-form>
</div>
@@ -348,21 +567,21 @@ const viewDetail = (kb: any) => {
<template #footer>
<div class="dialog-footer">
<div class="footer-left">
<span class="step-hint">填写完基本信息后，点击下一步继续配置</span>
<span class="step-hint">Step {{ createStep }} of 7</span>
</div>
<div class="footer-right">
<el-button @click="cancelCreate" class="cancel-btn">取消</el-button>
<el-button v-if="createStep === 2" @click="createStep = 1" class="prev-btn">
<el-button @click="cancelCreate" class="cancel-btn">Cancel</el-button>
<el-button v-if="createStep > 1" @click="createStep--" class="prev-btn">
<i class="fa-solid fa-arrow-left"></i>
上一步
Previous
</el-button>
<el-button v-if="createStep === 1" @click="createStep = 2" class="next-btn">
下一步
<el-button v-if="createStep < 7" @click="createStep++" class="next-btn">
Next
<i class="fa-solid fa-arrow-right"></i>
</el-button>
<el-button v-if="createStep === 2" @click="createKnowledgeBase" class="confirm-btn">
<el-button v-if="createStep === 7" @click="createKnowledgeBase" class="confirm-btn">
<i class="fa-solid fa-plus"></i>
创建
Create
</el-button>
</div>
</div>

118
web/src/views/knowledge/knowledge.css
View File

@@ -191,7 +191,7 @@
/* 创建内容布局 */
.create-layout {
display: flex;
min-height: 560px;
min-height: 600px;
}
/* 左侧 sidebar */
@@ -199,17 +199,17 @@
width: 280px;
background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
border-right: 1px solid #1e2832;
padding: 20px 12px;
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 8px;
gap: 6px;
}
.menu-item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
padding: 14px;
border-radius: 12px;
cursor: pointer;
transition: all 0.25s ease;
@@ -227,16 +227,17 @@
}
.menu-icon {
width: 42px;
height: 42px;
border-radius: 12px;
width: 36px;
height: 36px;
border-radius: 10px;
background-color: #1e2832;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: 14px;
color: #5f6368;
transition: all 0.3s ease;
flex-shrink: 0;
}
.menu-item.active .menu-icon {
@@ -253,10 +254,11 @@
}
.menu-title {
font-size: 15px;
font-size: 14px;
font-weight: 600;
color: #e8eaed;
transition: color 0.2s;
white-space: nowrap;
}
.menu-item.active .menu-title {
@@ -409,6 +411,104 @@
color: #36bffa;
}
/* Parsing 配置样式 */
.parsing-section {
display: flex;
flex-direction: column;
gap: 16px;
}
.parsing-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background-color: #161b22;
border-radius: 8px;
border: 1px solid #2d3640;
}
.parsing-label {
font-size: 14px;
color: #e8eaed;
font-weight: 500;
}
.parsing-select {
width: 200px;
}
.parsing-select :deep(.el-input__wrapper) {
background-color: #1e2832;
border-color: #2d3640;
}
.parsing-input {
width: 200px;
}
.parsing-input :deep(.el-input__wrapper) {
background-color: #1e2832;
border-color: #2d3640;
}
/* Switch 样式 */
:deep(.el-switch.is-checked .el-switch__core) {
background-color: #36bffa;
border-color: #36bffa;
}
.parsing-divider {
height: 1px;
background-color: #2d3640;
margin: 8px 0;
}
/* Post-processing 列表 */
.postprocess-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.postprocess-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
background-color: #161b22;
border-radius: 8px;
border: 1px solid #2d3640;
transition: all 0.2s;
}
.postprocess-item.active {
border-color: rgba(54, 191, 250, 0.3);
background: linear-gradient(135deg, rgba(54, 191, 250, 0.05) 0%, transparent 100%);
}
.postprocess-toggle {
flex-shrink: 0;
padding-top: 2px;
}
.postprocess-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.postprocess-title {
font-size: 14px;
color: #e8eaed;
font-weight: 500;
}
.postprocess-desc {
font-size: 12px;
color: #5f6368;
}
/* 底部按钮区域 */
.dialog-footer {
display: flex;