xieyinlu/zhilu-admin
1
0
Fork 0
mirror of https://github.com/ccmjga/zhilu-admin synced 2026-03-27 05:43:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增 CardBase 组件，重构知识文档卡片、知识库卡片和分段卡片以使用新组件，优化按钮组件并更新相关页面以提升用户体验。

Browse Source
This commit is contained in:
Chuck1sn
2025-06-28 08:43:54 +08:00
parent 56d6a992f8
commit f9c8e3808b
12 changed files with 340 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/views/KnowledgeSegmentsPage.vue
View File

@@ -1,76 +1,78 @@
<template>
<div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
<Breadcrumbs :names="['知识库管理', '文档管理', '内容管理']"
:routes="[Routes.KNOWLEDGEVIEW.fullPath(), Routes.KNOWLEDGEDOCVIEW.withParams({ libraryId: libraryId })]" />
<div class="mb-4">
<h1 class="text-2xl font-semibold text-gray-900 mb-2">{{ currentDoc?.name || '文档' }} - 分段内容</h1>
<p class="text-sm text-gray-500">
共 {{ segments.length }} 个分段
</p>
<Breadcrumbs :names="['知识库管理', '文档管理', '文档分段']" :routes="[
Routes.KNOWLEDGEVIEW.fullPath(),
Routes.KNOWLEDGEDOCVIEW.withParams({ libraryId })
]" />
<div class="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between">
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">{{ currentDoc?.name || '文档' }} - 分段内容</h1>
</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 class="mb-4">
<Button variant="secondary" size="sm" @click="navigateBack">
<template #icon>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18">
</path>
</svg>
</template>
返回文档列表
</Button>
</div>
<!-- 分段列表 -->
<div v-else class="space-y-4">
<div v-if="segments.length > 0" class="space-y-4">
<SegmentCard v-for="(segment, index) in segments" :key="segment.id" :segment="segment" :index="index" />
</div>
<!-- 空状态 -->
<div v-else class="flex flex-col items-center justify-center py-10">
<div class="text-gray-500 text-lg mb-4">暂无分段内容</div>
<Button variant="secondary" @click="navigateBack">
返回文档列表
</Button>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { useRoute, useRouter } from "vue-router";
import { SegmentCard } from "@/components/common/knowledge";
import Breadcrumbs from "@/components/layout/Breadcrumbs.vue";
import { Button } from "@/components/ui";
import { useKnowledgeQuery } from "@/composables/knowledge/useKnowledgeQuery";
import { Routes } from "@/router/constants";
import type { Library, LibraryDoc } from "@/types/KnowledgeTypes";
import type { LibraryDoc } from "@/types/KnowledgeTypes";
// 路由参数
const route = useRoute();
const libraryId = ref<number>(
Number.parseInt(route.params.libraryId as string, 10),
);
const docId = ref<number>(Number.parseInt(route.params.docId as string, 10));
const router = useRouter();
const libraryId = Number.parseInt(route.params.libraryId as string, 10);
const docId = Number.parseInt(route.params.docId as string, 10);
// 获取知识库信息
const { libraries, fetchLibraries } = useKnowledgeQuery();
const currentLibrary = ref<Library | undefined>();
// 获取文档信息
const { docs, fetchLibraryDocs } = useKnowledgeQuery();
// 获取文档信息和分段列表
const { docs, segments, fetchLibraryDocs, fetchDocSegments } = useKnowledgeQuery();
const currentDoc = ref<LibraryDoc | undefined>();
// 获取分段列表
const { segments, fetchDocSegments } = useKnowledgeQuery();
// 导航回文档列表
const navigateBack = () => {
router.push(Routes.KNOWLEDGEDOCVIEW.withParams({ libraryId }));
};
// 初始化
onMounted(async () => {
// 获取知识库列表、文档列表和分段列表
await fetchLibraries();
await fetchLibraryDocs({ libraryId: libraryId.value });
await fetchDocSegments({ libraryDocId: docId.value });
});
// 监听知识库列表变化，找到当前知识库
watchEffect(() => {
if (libraries.value && libraries.value.length > 0) {
currentLibrary.value = libraries.value.find(
(lib) => lib.id === libraryId.value,
);
}
await fetchLibraryDocs({ libraryId });
await fetchDocSegments({ libraryDocId: docId });
});
// 监听文档列表变化，找到当前文档
watchEffect(() => {
if (docs.value && docs.value.length > 0) {
currentDoc.value = docs.value.find((doc) => doc.id === docId.value);
currentDoc.value = docs.value.find((doc) => doc.id === docId);
}
});
</script>