feat: 新增 Knowledge 和 Settings 页面
- 添加 Knowledge 知识库页面 - 添加 Settings 设置页面 - 添加 Model 设置需求文档 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
466
web/src/views/Knowledge.vue
Normal file
466
web/src/views/Knowledge.vue
Normal file
@@ -0,0 +1,466 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import './database/database.css'
|
||||
|
||||
// 模拟知识库数据
|
||||
const knowledgeBases = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'Product Documentation',
|
||||
description: 'Product user manual and API docs',
|
||||
document_count: 156,
|
||||
chunk_count: 1248,
|
||||
created_at: '2024-01-15T10:30:00Z',
|
||||
status: 'ready'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Company Policies',
|
||||
description: 'Internal company policies and procedures',
|
||||
document_count: 42,
|
||||
chunk_count: 320,
|
||||
created_at: '2024-01-20T14:20:00Z',
|
||||
status: 'ready'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Technical Wiki',
|
||||
description: 'Engineering documentation and RFCs',
|
||||
document_count: 89,
|
||||
chunk_count: 756,
|
||||
created_at: '2024-02-01T09:15:00Z',
|
||||
status: 'processing'
|
||||
},
|
||||
])
|
||||
|
||||
const loading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
|
||||
// 筛选知识库
|
||||
const filteredKnowledgeBases = () => {
|
||||
if (!searchQuery.value) return knowledgeBases.value
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return knowledgeBases.value.filter(kb =>
|
||||
kb.name.toLowerCase().includes(query) ||
|
||||
kb.description.toLowerCase().includes(query)
|
||||
)
|
||||
}
|
||||
|
||||
// 新建知识库
|
||||
const showCreateDialog = ref(false)
|
||||
const newKbForm = ref({
|
||||
name: '',
|
||||
description: '',
|
||||
})
|
||||
|
||||
const createKnowledgeBase = () => {
|
||||
if (!newKbForm.value.name) {
|
||||
ElMessage.warning('Please enter knowledge base name')
|
||||
return
|
||||
}
|
||||
knowledgeBases.value.push({
|
||||
id: Date.now().toString(),
|
||||
name: newKbForm.value.name,
|
||||
description: newKbForm.value.description,
|
||||
document_count: 0,
|
||||
chunk_count: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
status: 'ready'
|
||||
})
|
||||
newKbForm.value = { name: '', description: '' }
|
||||
showCreateDialog.value = false
|
||||
ElMessage.success('Knowledge base created successfully')
|
||||
}
|
||||
|
||||
const cancelCreate = () => {
|
||||
newKbForm.value = { name: '', description: '' }
|
||||
showCreateDialog.value = false
|
||||
}
|
||||
|
||||
// 编辑知识库
|
||||
const showEditDialog = ref(false)
|
||||
const editForm = ref({
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
})
|
||||
|
||||
const openEdit = (kb: any) => {
|
||||
editForm.value = {
|
||||
id: kb.id,
|
||||
name: kb.name,
|
||||
description: kb.description
|
||||
}
|
||||
showEditDialog.value = true
|
||||
}
|
||||
|
||||
const saveEdit = () => {
|
||||
const kb = knowledgeBases.value.find(k => k.id === editForm.value.id)
|
||||
if (kb) {
|
||||
kb.name = editForm.value.name
|
||||
kb.description = editForm.value.description
|
||||
}
|
||||
showEditDialog.value = false
|
||||
ElMessage.success('Knowledge base updated successfully')
|
||||
}
|
||||
|
||||
const cancelEdit = () => {
|
||||
showEditDialog.value = false
|
||||
}
|
||||
|
||||
// 删除知识库
|
||||
const deleteKb = (id: string) => {
|
||||
const index = knowledgeBases.value.findIndex(k => k.id === id)
|
||||
if (index > -1) {
|
||||
knowledgeBases.value.splice(index, 1)
|
||||
ElMessage.success('Knowledge base deleted')
|
||||
}
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const viewDetail = (kb: any) => {
|
||||
ElMessage.info(`Viewing ${kb.name}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<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">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
New Knowledge Base
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<div class="flex gap-4 mb-6">
|
||||
<div class="flex-1 relative">
|
||||
<i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="Search knowledge bases by name or description..."
|
||||
class="search-input w-full"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Knowledge Base 列表 -->
|
||||
<div class="bg-dark-700 rounded-xl overflow-hidden">
|
||||
<div v-if="loading" class="py-12 text-center text-gray-400">
|
||||
<i class="fa-solid fa-circle-notch fa-spin text-2xl mb-2"></i>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<table v-else-if="filteredKnowledgeBases().length > 0" class="w-full">
|
||||
<thead class="bg-dark-600">
|
||||
<tr>
|
||||
<th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Name</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Documents</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Chunks</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Created</th>
|
||||
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="kb in filteredKnowledgeBases()" :key="kb.id" class="table-row">
|
||||
<td class="px-5 py-4">
|
||||
<div class="font-medium">{{ kb.name }}</div>
|
||||
<div class="text-sm text-gray-500">{{ kb.description }}</div>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-center">
|
||||
<span class="text-primary-cyan">{{ kb.document_count }}</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-center text-gray-400 text-sm">
|
||||
{{ kb.chunk_count }}
|
||||
</td>
|
||||
<td class="px-5 py-4 text-center">
|
||||
<span v-if="kb.status === 'ready'" class="bg-primary-success/20 text-primary-success px-2 py-1 rounded text-sm">
|
||||
Ready
|
||||
</span>
|
||||
<span v-else-if="kb.status === 'processing'" class="bg-primary-warning/20 text-primary-warning px-2 py-1 rounded text-sm">
|
||||
Processing
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-5 py-4 text-center text-gray-400 text-sm">
|
||||
{{ kb.created_at?.split('T')[0] }}
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<button
|
||||
@click="viewDetail(kb)"
|
||||
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
|
||||
title="View"
|
||||
>
|
||||
<i class="fa-solid fa-eye text-gray-400"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="openEdit(kb)"
|
||||
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<i class="fa-solid fa-pen text-gray-400"></i>
|
||||
</button>
|
||||
<button
|
||||
@click="deleteKb(kb.id)"
|
||||
class="p-2 rounded-lg hover:bg-dark-600 transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else class="empty-box">
|
||||
<div class="empty-icon">
|
||||
<i class="fa-solid fa-brain"></i>
|
||||
</div>
|
||||
<p class="empty-text">No knowledge bases found</p>
|
||||
<p class="empty-tip">Click "New Knowledge Base" to create one</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新建知识库弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showCreateDialog"
|
||||
title="Create Knowledge Base"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
class="kb-dialog"
|
||||
>
|
||||
<p class="dialog-desc">Create a new knowledge base to store your documents</p>
|
||||
|
||||
<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>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button text @click="cancelCreate">Cancel</el-button>
|
||||
<el-button type="primary" @click="createKnowledgeBase">Confirm</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑知识库弹窗 -->
|
||||
<el-dialog
|
||||
v-model="showEditDialog"
|
||||
title="Edit Knowledge Base"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
class="kb-dialog"
|
||||
>
|
||||
<p class="dialog-desc">Edit knowledge base information</p>
|
||||
|
||||
<el-form label-position="top" class="kb-form">
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model="editForm.name" placeholder="Enter knowledge base name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Description">
|
||||
<el-input v-model="editForm.description" type="textarea" :rows="3" placeholder="Enter description" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button text @click="cancelEdit">Cancel</el-button>
|
||||
<el-button type="primary" @click="saveEdit">Save</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</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>
|
||||
Reference in New Issue
Block a user