新增知识库相关组件,包括文档卡片、知识库卡片、状态徽章和分段卡片,优化日期格式化工具函数,更新文档管理和知识库管理页面以使用新组件。

This commit is contained in:
Chuck1sn
2025-06-28 08:12:59 +08:00
parent 6ec07686a9
commit 56d6a992f8
9 changed files with 220 additions and 129 deletions

View File

@@ -9,36 +9,14 @@
</p>
</div>
<!-- 分段列表 -->
<!-- 空状态 -->
<div v-if="segments.length === 0" class="flex flex-col items-center justify-center py-10">
<div class="text-gray-500 text-lg">暂无分段内容</div>
</div>
<!-- 分段列表 -->
<div v-else class="space-y-4">
<div v-for="(segment, index) in segments" :key="segment.id"
class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
<div class="flex justify-between items-start mb-2">
<h5 class="text-lg font-semibold text-gray-900">分段 #{{ index + 1 }}</h5>
<div class="text-xs text-gray-500">
ID: {{ segment.id }}
</div>
</div>
<div class="text-sm text-gray-500 mb-2">
<div class="flex flex-wrap gap-2">
<span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
Embedding ID: {{ segment.embeddingId || '无' }}
</span>
<span
class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
Token 使用量: {{ segment.tokenUsage || 0 }}
</span>
</div>
</div>
<div class="border-t border-gray-200 pt-3 mt-3">
<h6 class="text-sm font-medium text-gray-900 mb-2">内容:</h6>
<pre
class="text-sm text-gray-700 whitespace-pre-wrap bg-gray-50 p-3 rounded-lg max-h-60 overflow-y-auto">{{ segment.content }}</pre>
</div>
</div>
<SegmentCard v-for="(segment, index) in segments" :key="segment.id" :segment="segment" :index="index" />
</div>
</div>
</template>
@@ -47,6 +25,7 @@
import { onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { SegmentCard } from "@/components/common/knowledge";
import Breadcrumbs from "@/components/layout/Breadcrumbs.vue";
import { useKnowledgeQuery } from "@/composables/knowledge/useKnowledgeQuery";
import { Routes } from "@/router/constants";