admin-ui/src/views/knowledge/component/documentDetailDialog.vue

<template>
	<el-drawer
		v-model="visible"
		:title="documentInfo.name || '文档详情'"
		size="80%"
		direction="rtl"
		:close-on-click-modal="true"
		destroy-on-close
		class="document-detail-drawer"
	>
		<div class="drawer-content">
			<!-- 左侧：文档原文 -->
			<div class="document-content">
				<div class="content-header" style="display: flex; justify-content: space-between; align-items: flex-start">
					<div>
						<h2>{{ documentInfo.name }}</h2>
						<div class="content-meta">Size：{{ formatFileSize(documentInfo.fileSize) }} Uploaded Time：{{ documentInfo.createdAt }}</div>
					</div>
					<a
						href="#"
						id="downloadLink"
						style="
							background-color: #f0f9eb;
							color: #67c23a;
							padding: 6px 12px;
							border-radius: 4px;
							text-decoration: none;
							font-size: 12px;
							display: inline-flex;
							align-items: center;
							border: 1px solid #e1f5dc;
							margin-top: 4px;
						"
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="14"
							height="14"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							style="margin-right: 4px"
						>
							<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
							<polyline points="7 10 12 15 17 10"></polyline>
							<line x1="12" y1="15" x2="12" y2="3"></line>
						</svg>
						下载
					</a>
				</div>
				<div class="content-body" v-loading="contentLoading">
					<div class="document-text" v-html="documentContent"></div>
				</div>
			</div>

			<!-- 右侧：向量列表 -->
			<div class="chunk-panel">
				<div class="panel-header">
					<h3>向量列表</h3>
					<div class="panel-subtitle">查看文档的向量信息。</div>
				</div>

				<div class="panel-toolbar">
					<div class="toolbar-actions">
						<el-input v-model="vectorSearch" placeholder="搜索" clearable size="small" style="width: 120px">
							<template #prefix>
								<el-icon><ele-Search /></el-icon>
							</template>
						</el-input>
					</div>
				</div>

				<div class="vector-list" v-loading="vectorLoading">
					<div class="vector-item" v-for="vector in vectorList" :key="vector.id">
						<div class="vector-header">
							<span class="vector-index">块 {{ vector.chunkIndex }}</span>
							<span class="vector-status">状态: {{ vector.status ? '启用' : '禁用' }}</span>
							<span class="vector-vector-status">向量状态: {{ vector.vectorStatus === 1 ? '已生成' : '未生成' }}</span>
							<el-switch v-model="vector.status" size="small" @change="(value: boolean) => onVectorStatusChange(vector, !value)" />
						</div>
						<div class="vector-content">
							<span class="vector-text">{{ truncateText(vector.content, 150) }}</span>
						</div>
						<div class="vector-meta">
							<span class="vector-hash">哈希: {{ vector.contentHash }}</span>
							<span class="vector-time">创建时间: {{ vector.createdAt }}</span>
						</div>
					</div>

					<el-empty v-if="vectorList.length === 0 && !vectorLoading" description="暂无向量" :image-size="60" />
				</div>

				<!-- 分页 -->
				<div class="panel-footer">
					<span class="total-info">总共 {{ vectorTotal }} 条</span>
					<el-pagination
						v-model:current-page="vectorPage"
						:page-size="vectorPageSize"
						:total="vectorTotal"
						layout="prev, pager, next"
						small
						@current-change="getVectorList"
					/>
					<el-select v-model="vectorPageSize" size="small" style="width: 80px" @change="getVectorList">
						<el-option :value="10" label="10条/页" />
						<el-option :value="20" label="20条/页" />
						<el-option :value="50" label="50条/页" />
					</el-select>
				</div>
			</div>
		</div>
	</el-drawer>
</template>

<script lang="ts">
export default {
	name: 'documentDetailDialog',
};
</script>

<script setup lang="ts">
import { ref, reactive, computed, watch, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { listDocumentVectors, updateDocumentVector } from '/@/api/knowledge/document';

const props = defineProps<{
	modelValue: boolean;
	knowledgeId: string;
	knowledgeName: string;
	document: any;
}>();

const emit = defineEmits(['update:modelValue']);

const visible = computed({
	get: () => props.modelValue,
	set: (val) => emit('update:modelValue', val),
});

// 文档信息
const documentInfo = reactive({
	id: '',
	name: '',
	fileType: '',
	fileSize: 0,
	createdAt: '',
});

// 文档内容
const documentContent = ref('');
const contentLoading = ref(false);

// 向量列表相关
const vectorLoading = ref(false);
const vectorList = ref<any[]>([]);
const vectorTotal = ref(0);
const vectorPage = ref(1);
const vectorPageSize = ref(50);
const vectorSearch = ref('');
const isInitializing = ref(true); // 初始化标志，用于防止加载时触发更新

// 格式化文件大小
const formatFileSize = (size: number) => {
	if (!size) return '0 Bytes';
	if (size < 1024) return size + ' Bytes';
	if (size < 1024 * 1024) return (size / 1024).toFixed(0) + ' KB';
	return (size / 1024 / 1024).toFixed(1) + ' MB';
};

// 截断文本
const truncateText = (text: string, maxLength: number) => {
	if (!text || text.length <= maxLength) return text;
	return text.substring(0, maxLength) + '...';
};

// 获取文档详情
const getDocumentDetail = async () => {
	contentLoading.value = true;
	try {
		// 使用实际的文档数据
		documentInfo.id = props.document?.id || '';
		documentInfo.name = props.document?.title || '未知文件';
		documentInfo.fileSize = props.document?.fileSize || 0;
		documentInfo.createdAt = props.document?.createdAt || '';

		// 构建文件地址
		const imgAddressPrefix = props.document?.imgAddressPrefix?.trim() || '';
		const filePath = props.document?.filePath || '';
		const fileUrl = imgAddressPrefix + filePath;

		// 设置下载链接
		nextTick(() => {
			const downloadLink = document.getElementById('downloadLink');
			if (downloadLink) {
				downloadLink.setAttribute('href', fileUrl);
				downloadLink.setAttribute('download', documentInfo.name);
			}
		});

		// 尝试获取文件内容
		let fileContent = '';
		try {
			const response = await fetch(fileUrl);
			if (response.ok) {
				fileContent = await response.text();
			} else {
				fileContent = '无法加载文件内容';
			}
		} catch (error) {
			fileContent = '无法加载文件内容';
		}

		// 生成文档内容，只包含文件内容
		documentContent.value = `<pre style="background: #fafafa; padding: 16px; border-radius: 4px; border: 1px solid #ebeef5; margin: 0; white-space: pre-wrap; word-break: break-all; font-size: 14px; line-height: 1.5;">${fileContent}</pre>`;
	} catch (_error) {
		ElMessage.error('获取文档详情失败');
		documentContent.value = '';
	} finally {
		contentLoading.value = false;
	}
};

// 获取向量列表
const getVectorList = async () => {
	vectorLoading.value = true;
	try {
		const response = await listDocumentVectors({
			documentId: props.document?.id,
			datasetId: props.document?.datasetId,
			pageNum: vectorPage.value,
			pageSize: vectorPageSize.value,
		});
		// 深拷贝数据，避免v-model触发不必要的更新，并将status从数字转换为布尔类型
		vectorList.value = (response.data?.list || []).map((item: any) => {
			const clonedItem = JSON.parse(JSON.stringify(item));
			// 将数字类型的status转换为布尔类型，以便正确绑定到el-switch
			clonedItem.status = clonedItem.status === 1;
			return clonedItem;
		});
		vectorTotal.value = response.data?.total || 0;
	} catch (_error) {
		ElMessage.error('获取向量列表失败');
		vectorList.value = [];
		vectorTotal.value = 0;
	} finally {
		vectorLoading.value = false;
		// 初始化完成，允许状态更新
		setTimeout(() => {
			isInitializing.value = false;
		}, 100);
	}
};

// 更新向量状态
const onVectorStatusChange = async (vector: any, oldValue: boolean) => {
	// 初始化过程中不处理状态变化
	if (isInitializing.value) {
		return;
	}

	// 计算新状态（ElSwitch的v-model是boolean，需要转换为数字）
	const newStatus = vector.status ? 1 : 0;
	const oldStatus = oldValue ? 1 : 0;

	// 只在状态真正改变时才调用API
	if (newStatus !== oldStatus) {
		try {
			await updateDocumentVector({
				id: String(vector.id), // 确保id是字符串类型
				status: newStatus,
			});
			ElMessage.success('更新成功');
		} catch (error) {
			ElMessage.error('更新失败');
			// 恢复原始状态
			vector.status = oldValue;
		}
	}
};

// 监听弹窗打开
watch(
	() => props.modelValue,
	(val) => {
		if (val && props.document) {
			// 重置初始化标志
			isInitializing.value = true;
			getDocumentDetail();
			getVectorList();
		}
	}
);
</script>

<style scoped lang="scss">
.document-detail-drawer {
	:deep(.el-drawer__body) {
		padding: 0;
		overflow: hidden;
	}
}

.drawer-content {
	display: flex;
	height: 100%;

	// 左侧文档内容
	.document-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		border-right: 1px solid #ebeef5;
		overflow: hidden;

		.content-header {
			padding: 16px 20px;
			border-bottom: 1px solid #ebeef5;

			h2 {
				margin: 0 0 8px 0;
				font-size: 18px;
				font-weight: 600;
				color: #303133;
			}

			.content-meta {
				font-size: 12px;
				color: #909399;
			}
		}

		.content-body {
			flex: 1;
			padding: 16px 20px;
			overflow: auto;
			background: #fafafa;

			.document-text {
				margin: 0;
				font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
				font-size: 14px;
				line-height: 1.6;
				color: #303133;
				white-space: pre-wrap;
				word-break: break-all;
			}
		}
	}

	// 右侧切片面板
	.chunk-panel {
		width: 420px;
		display: flex;
		flex-direction: column;
		background: #fff;

		.panel-header {
			padding: 16px 20px;
			border-bottom: 1px solid #ebeef5;

			h3 {
				margin: 0 0 4px 0;
				font-size: 16px;
				font-weight: 600;
				color: #303133;
			}

			.panel-subtitle {
				font-size: 12px;
				color: #909399;
			}
		}

		.panel-toolbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12px 20px;
			border-bottom: 1px solid #ebeef5;

			.toolbar-actions {
				display: flex;
				gap: 8px;
			}
		}

		.vector-list {
			flex: 1;
			overflow: auto;
			padding: 12px 20px;

			.vector-item {
				display: flex;
				flex-direction: column;
				padding: 12px;
				background: #f5f7fa;
				border-radius: 6px;
				margin-bottom: 8px;
				border: 1px solid #ebeef5;

				.vector-header {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 12px;
					margin-bottom: 8px;
					font-size: 12px;
					color: #606266;

					.vector-index {
						font-weight: 600;
						color: #303133;
					}

					.el-switch {
						margin-left: auto;
					}
				}

				.vector-content {
					margin-bottom: 8px;

					.vector-text {
						font-size: 14px;
						color: #303133;
						line-height: 1.5;
						word-break: break-all;
					}
				}

				.vector-meta {
					display: flex;
					justify-content: space-between;
					font-size: 12px;
					color: #909399;

					.vector-hash {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						max-width: 200px;
					}
				}
			}
		}

		.panel-footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 12px;
			padding: 12px 20px;
			border-top: 1px solid #ebeef5;

			.total-info {
				font-size: 12px;
				color: #909399;
			}
		}
	}
}
</style>