将知识库文档详情从对话框改为抽屉组件,优化展示效果和布局高度

src/views/knowledge/component/documentDetailDialog.vue

@@ -1,14 +1,14 @@
 <template>
-	<el-dialog
+	<el-drawer
 		v-model="visible"
 		:title="documentInfo.name || '文档详情'"
-		width="90%"
+		size="80%"
-		top="5vh"
+		direction="rtl"
 		:close-on-click-modal="false"
 		destroy-on-close
-		class="document-detail-dialog"
+		class="document-detail-drawer"
 	>
-		<div class="dialog-content">
+		<div class="drawer-content">
 			<!-- 左侧：文档原文 -->
 			<div class="document-content">
 				<div class="content-header">
@@ -97,7 +97,7 @@
 				</div>
 			</div>
 		</div>
-	</el-dialog>
+	</el-drawer>
 </template>
 
 <script lang="ts">
@@ -237,17 +237,16 @@ watch(() => props.modelValue, (val) => {
 </script>
 
 <style scoped lang="scss">
-.document-detail-dialog {
+.document-detail-drawer {
-	:deep(.el-dialog__body) {
+	:deep(.el-drawer__body) {
 		padding: 0;
-		max-height: calc(90vh - 100px);
 		overflow: hidden;
 	}
 }
 
-.dialog-content {
+.drawer-content {
 	display: flex;
-	height: 70vh;
+	height: 100%;
 	
 	// 左侧文档内容
 	.document-content {