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

feat: 优化 Knowledge 页面并添加样式文件

Browse Source 
- 重构 Knowledge 页面代码
- 新增 knowledge.css 样式文件
- 添加知识库截图

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-07 14:29:35 +08:00
parent 42a562d171
commit 9908ba7237
3 changed files with 639 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import './database/database.css'
import './knowledge/knowledge.css'
// 模拟知识库数据
const knowledgeBases = ref([
@@ -47,18 +47,38 @@ const filteredKnowledgeBases = () => {
)
}
// 新建知识库
// 新建知识库 - 分步骤
const showCreateDialog = ref(false)
const createStep = ref(1)
const newKbForm = ref({
name: '',
description: '',
})
const embeddingConfig = ref({
provider: '',
model: '',
})
const createKnowledgeBase = () => {
const openCreateDialog = () => {
createStep.value = 1
newKbForm.value = { name: '', description: '' }
embeddingConfig.value = { provider: '', model: '' }
showCreateDialog.value = true
}
const nextStep = () => {
if (!newKbForm.value.name) {
ElMessage.warning('Please enter knowledge base name')
return
}
createStep.value = 2
}
const prevStep = () => {
createStep.value = 1
}
const createKnowledgeBase = () => {
knowledgeBases.value.push({
id: Date.now().toString(),
name: newKbForm.value.name,
@@ -69,12 +89,14 @@ const createKnowledgeBase = () => {
status: 'ready'
})
newKbForm.value = { name: '', description: '' }
embeddingConfig.value = { provider: '', model: '' }
showCreateDialog.value = false
ElMessage.success('Knowledge base created successfully')
}
const cancelCreate = () => {
newKbForm.value = { name: '', description: '' }
embeddingConfig.value = { provider: '', model: '' }
showCreateDialog.value = false
}
@@ -132,7 +154,7 @@ const viewDetail = (kb: any) => {
<i class="fa-solid fa-brain text-gray-400"></i>
<span class="font-medium">Knowledge Base</span>
</div>
<button @click="showCreateDialog = true" class="btn-primary">
<button @click="openCreateDialog" class="btn-primary">
<i class="fa-solid fa-plus"></i>
New Knowledge Base
</button>
@@ -195,21 +217,21 @@ const viewDetail = (kb: any) => {
<div class="flex items-center justify-center gap-2">
<button
@click="viewDetail(kb)"
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
class="p-2 rounded-lg transition-colors hover:bg-dark-600"
title="View"
>
<i class="fa-solid fa-eye text-gray-400"></i>
<i class="fa-solid fa-eye text-gray-400 hover:text-primary-danger"></i>
</button>
<button
@click="openEdit(kb)"
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
class="p-2 rounded-lg transition-colors hover:bg-dark-600"
title="Edit"
>
<i class="fa-solid fa-pen text-gray-400"></i>
<i class="fa-solid fa-pen text-gray-400 hover:text-primary-danger"></i>
</button>
<button
@click="deleteKb(kb.id)"
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
class="p-2 rounded-lg transition-colors hover:bg-dark-600"
title="Delete"
>
<i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
@@ -233,26 +255,116 @@ const viewDetail = (kb: any) => {
<!-- 新建知识库弹窗 -->
<el-dialog
v-model="showCreateDialog"
title="Create Knowledge Base"
width="500px"
title="创建知识库"
width="1100px"
:close-on-click-modal="false"
class="kb-dialog"
:show-close="false"
class="kb-dialog kb-create-dialog"
>
<p class="dialog-desc">Create a new knowledge base to store your documents</p>
<div class="create-layout">
<!-- 左侧：选项列表 -->
<div class="sidebar">
<div
class="menu-item"
:class="{ active: createStep === 1 }"
@click="createStep = 1"
>
<i class="fa-solid fa-layer-group menu-icon"></i>
<div class="menu-content">
<span class="menu-title">基本信息</span>
<span class="menu-desc">知识库名称和描述</span>
</div>
<i v-if="createStep === 1" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
<div
class="menu-item"
:class="{ active: createStep === 2 }"
@click="createStep = 2"
>
<i class="fa-solid fa-brain menu-icon"></i>
<div class="menu-content">
<span class="menu-title">Embedding 配置</span>
<span class="menu-desc">向量化和检索设置</span>
</div>
<i v-if="createStep === 2" class="fa-solid fa-chevron-right menu-arrow"></i>
</div>
</div>
<el-form label-position="top" class="kb-form">
<el-form-item label="Name">
<el-input v-model="newKbForm.name" placeholder="Enter knowledge base name" />
</el-form-item>
<el-form-item label="Description">
<el-input v-model="newKbForm.description" type="textarea" :rows="3" placeholder="Enter description" />
</el-form-item>
</el-form>
<!-- 右侧：内容区 -->
<div class="content">
<!-- 基本信息 -->
<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>
</div>
<el-form label-position="top" class="kb-form">
<el-form-item label="名称" required>
<el-input v-model="newKbForm.name" placeholder="请输入知识库名称" />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="newKbForm.description" type="textarea" :rows="4" placeholder="请输入知识库描述" />
</el-form-item>
</el-form>
</div>
<!-- Embedding 配置 -->
<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>
</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-option label="OpenAI" value="openai">
<div class="provider-option">
<i class="fa-solid fa-robot"></i>
<span>OpenAI</span>
</div>
</el-option>
<el-option label="Ollama" value="ollama">
<div class="provider-option">
<i class="fa-solid fa-microchip"></i>
<span>Ollama</span>
</div>
</el-option>
<el-option label="Azure OpenAI" value="azure">
<div class="provider-option">
<i class="fa-brands fa-microsoft"></i>
<span>Azure OpenAI</span>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Embedding Model">
<el-input v-model="embeddingConfig.model" placeholder="如：text-embedding-ada-002" />
</el-form-item>
</el-form>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button text @click="cancelCreate">Cancel</el-button>
<el-button type="primary" @click="createKnowledgeBase">Confirm</el-button>
<div class="footer-left">
<span class="step-hint">填写完基本信息后，点击下一步继续配置</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">
<i class="fa-solid fa-arrow-left"></i>
上一步
</el-button>
<el-button v-if="createStep === 1" @click="createStep = 2" class="next-btn">
下一步
<i class="fa-solid fa-arrow-right"></i>
</el-button>
<el-button v-if="createStep === 2" @click="createKnowledgeBase" class="confirm-btn">
<i class="fa-solid fa-plus"></i>
创建
</el-button>
</div>
</div>
</template>
</el-dialog>
@@ -285,182 +397,3 @@ const viewDetail = (kb: any) => {
</el-dialog>
</div>
</template>
<style scoped>
/* 按钮样式 */
.btn-primary {
background-color: #f97316;
border: none;
color: white;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
transition: all 0.2s;
}
.btn-primary:hover {
background-color: #ea580c;
}
/* 搜索框 */
.search-input {
background-color: #171922;
border: 1px solid #374151;
color: white;
padding: 10px 12px 10px 36px;
border-radius: 8px;
outline: none;
transition: border-color 0.2s;
}
.search-input:focus {
border-color: #f97316;
}
.search-input::placeholder {
color: #6b7280;
}
/* 表格样式 */
.bg-dark-700 {
background-color: #1f2937;
}
.bg-dark-600 {
background-color: #111827;
}
.table-row {
border-bottom: 1px solid #374151;
transition: background-color 0.2s;
}
.table-row:hover {
background-color: #374151;
}
/* 空状态 - 使用 database.css 中的样式 */
.empty-box {
min-height: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.empty-icon {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1f2937, #111827);
border-radius: 24px;
margin-bottom: 20px;
}
.empty-icon i {
font-size: 40px;
color: #6b7280;
}
.empty-text {
color: #d1d5db;
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 8px;
}
.empty-tip {
color: #6b7280;
font-size: 0.875rem;
}
/* 弹窗样式 */
.kb-dialog :deep(.el-dialog) {
background-color: #1f2937;
border-radius: 12px;
border: 1px solid #374151;
}
.kb-dialog :deep(.el-dialog__header) {
padding: 20px 24px;
border-bottom: 1px solid #374151;
}
.kb-dialog :deep(.el-dialog__title) {
color: white;
font-size: 18px;
font-weight: 600;
}
.kb-dialog :deep(.el-dialog__headerbtn) {
top: 20px;
right: 20px;
}
.kb-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
color: #9ca3af;
}
.kb-dialog :deep(.el-dialog__headerbtn:hover .el-dialog__close) {
color: #f97316;
}
.kb-dialog :deep(.el-dialog__body) {
padding: 24px;
}
.kb-dialog :deep(.el-dialog__footer) {
padding: 16px 24px;
border-top: 1px solid #374151;
}
.dialog-desc {
font-size: 14px;
color: #9ca3af;
margin-bottom: 20px;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
.kb-form :deep(.el-form-item__label) {
color: #d1d5db;
font-size: 14px;
}
.kb-form :deep(.el-input__wrapper) {
background-color: #171922;
border: 1px solid #374151;
box-shadow: none;
}
.kb-form :deep(.el-input__inner) {
color: white;
}
.kb-form :deep(.el-textarea__inner) {
background-color: #171922;
border: 1px solid #374151;
color: white;
box-shadow: none;
}
.kb-dialog :deep(.el-button--primary) {
background-color: #f97316;
border-color: #f97316;
}
.kb-dialog :deep(.el-button--primary:hover) {
background-color: #ea580c;
border-color: #ea580c;
}
</style>