feat(知识库): 优化知识库创建界面并标记 Chroma 为弃用

- 在知识库类型选择卡片中添加 Chroma 弃用标记和提示
- 默认知识库类型改为 Milvus
- 添加空状态显示和创建按钮
- 优化知识库类型排序,将 Chroma 放在最后
- 移除不必要的样式代码
This commit is contained in:
Wenjie Zhang 2025-12-03 15:26:58 +08:00
parent 38e389cf42
commit 001751dd46
4 changed files with 106 additions and 42 deletions

View File

@ -15,12 +15,12 @@
- 同名文件处理逻辑:遇到同名文件则在上传区域提示,是否删除旧文件
- conversation 待修改为异步的版本
- DBManager 需要将数据库修改为异步的aiosqlite或者异步mysql缓存使用Redis存储
- agent 状态中的文件区域,新增可以下载
### Bugs
- 部分异常状态下,智能体的模型名称出现重叠[#279](https://github.com/xerrors/Yuxi-Know/issues/279)
- DeepSeek 官方接口适配会出现问题
- 目前的知识库的图片存在公开访问风险
- 深度分析智能体需要考虑上下文超限的问题
### 新增
- 优化知识库详情页面,更加简洁清晰
@ -34,6 +34,8 @@
- 新增自定义模型支持、新增 dashscope rerank/embeddings 模型的支持
- 新增文档解析的图片支持,已支持 MinerU Officical、Docs、Markdown Zip格式
- 新增暗色模式支持并调整整体 UI[#343](https://github.com/xerrors/Yuxi-Know/pull/343)
- agent 状态中的文件区域,新增可以下载
- 移除 Chroma 的支持,当前版本标记为移除
### 修复
- 修复重排序模型实际未生效的问题

@ -0,0 +1 @@
Subproject commit 057e2000be7b56823239815b0fe7c7fc0dbced96

@ -0,0 +1 @@
Subproject commit 6a0367834ea0fb5e5c94b9711e3e2756966789ea

View File

@ -14,15 +14,23 @@
<h3>知识库类型<span style="color: var(--color-error-500)">*</span></h3>
<div class="kb-type-cards">
<div
v-for="(typeInfo, typeKey) in supportedKbTypes"
v-for="(typeInfo, typeKey) in orderedKbTypes"
:key="typeKey"
class="kb-type-card"
:class="{ active: newDatabase.kb_type === typeKey }"
:data-type="typeKey"
@click="handleKbTypeChange(typeKey)"
>
<div class="card-header">
<component :is="getKbTypeIcon(typeKey)" class="type-icon" />
<span class="type-title">{{ getKbTypeLabel(typeKey) }}</span>
<a-tooltip
v-if="typeKey === 'chroma'"
title="Chroma 已标记为弃用状态,建议使用 Milvus 替代。同时会在下个正式版本中移除。"
placement="top"
>
<span class="deprecated-badge">弃用</span>
</a-tooltip>
</div>
<div class="card-description">{{ typeInfo.description }}</div>
</div>
@ -71,7 +79,7 @@
<a-textarea
v-model:value="newDatabase.description"
placeholder="新建知识库描述"
:auto-size="{ minRows: 5, maxRows: 10 }"
:auto-size="{ minRows: 3, maxRows: 10 }"
/>
<h3 style="margin-top: 20px;">隐私设置</h3>
@ -158,6 +166,18 @@
<p>正在加载知识库...</p>
</div>
<!-- 空状态显示 -->
<div v-else-if="!databases || databases.length === 0" class="empty-state">
<h3 class="empty-title">暂无知识库</h3>
<p class="empty-description">创建您的第一个知识库开始管理文档和知识</p>
<a-button type="primary" size="large" @click="state.openNewDatabaseModel = true">
<template #icon>
<PlusOutlined />
</template>
创建知识库
</a-button>
</div>
<!-- 数据库列表 -->
<div v-else class="databases">
<div
@ -213,7 +233,7 @@ import { useRouter, useRoute } from 'vue-router';
import { useConfigStore } from '@/stores/config';
import { message } from 'ant-design-vue'
import { Database, Zap, FileDigit, Waypoints, Building2 } from 'lucide-vue-next';
import { LockOutlined, InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
import { LockOutlined, InfoCircleOutlined, QuestionCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { databaseApi, typeApi } from '@/apis/knowledge_api';
import HeaderComponent from '@/components/HeaderComponent.vue';
import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue';
@ -256,7 +276,7 @@ const createEmptyDatabaseForm = () => ({
name: '',
description: '',
embed_model_name: configStore.config?.embed_model,
kb_type: 'chroma',
kb_type: 'milvus',
is_private: false,
storage: '',
language: 'English',
@ -295,6 +315,27 @@ const llmModelSpec = computed(() => {
//
const supportedKbTypes = ref({})
// Chroma
const orderedKbTypes = computed(() => {
const types = { ...supportedKbTypes.value }
const ordered = {}
const chromaData = types.chroma
// Chroma
Object.keys(types).forEach(key => {
if (key !== 'chroma') {
ordered[key] = types[key]
}
})
// Chroma
if (chromaData) {
ordered.chroma = chromaData
}
return ordered
})
//
const loadSupportedKbTypes = async () => {
try {
@ -368,24 +409,6 @@ const getKbTypeIcon = (type) => {
return icons[type] || Database
}
// const getKbTypeDescription = (type) => {
// const descriptions = {
// lightrag: '🔥 ',
// chroma: ' ',
// milvus: '🚀 '
// }
// return descriptions[type] || ''
// }
const getKbTypeAlertType = (type) => {
const types = {
lightrag: 'info',
chroma: 'success',
milvus: 'warning'
}
return types[type] || 'info'
}
const getKbTypeColor = (type) => {
const colors = {
lightrag: 'purple',
@ -395,7 +418,6 @@ const getKbTypeColor = (type) => {
return colors[type] || 'blue'
}
//
const formatCreatedTime = (createdAt) => {
if (!createdAt) return ''
@ -680,24 +702,12 @@ onMounted(() => {
border-color: var(--main-color);
}
//
&:nth-child(1):hover,
&:nth-child(1).active {
border-color: var(--color-accent-100);
.type-icon { color: var(--color-accent-500); }
&.active {
border-color: var(--main-color);
background: var(--main-10);
.type-icon { color: var(--main-color); }
}
&:nth-child(2):hover,
&:nth-child(2).active {
border-color: var(--color-warning-100);
.type-icon { color: var(--color-warning-500); }
}
&:nth-child(3):hover,
&:nth-child(3).active {
border-color: var(--color-error-100);
.type-icon { color: var(--color-error-500); }
}
.card-header {
display: flex;
align-items: center;
@ -725,6 +735,26 @@ onMounted(() => {
margin-bottom: 0;
// min-height: 40px;
}
.deprecated-badge {
background: var(--color-error-100);
color: var(--color-error-600);
font-size: 10px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
margin-left: auto;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: help;
transition: all 0.2s ease;
&:hover {
background: var(--color-error-200);
color: var(--color-error-700);
}
}
}
}
@ -900,8 +930,6 @@ onMounted(() => {
font-weight: 400;
flex: 1;
}
}
.database-empty {
@ -913,6 +941,38 @@ onMounted(() => {
color: var(--gray-900);
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100px 20px;
text-align: center;
.empty-title {
font-size: 20px;
font-weight: 600;
color: var(--gray-900);
margin: 0 0 12px 0;
letter-spacing: -0.02em;
}
.empty-description {
font-size: 14px;
color: var(--gray-600);
margin: 0 0 32px 0;
line-height: 1.5;
max-width: 320px;
}
.ant-btn {
height: 44px;
padding: 0 24px;
font-size: 15px;
font-weight: 500;
}
}
.database-container {
padding: 0;
}