bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pdf 页面优化

This commit is contained in:
cwchen 2025-11-28 11:17:11 +08:00
parent 5fa6511ee9
commit e2b9f60f8a
1 changed files with 117 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/views/analysis/components/child/DocumentPreviewPanel.vue
View File

@ -2,27 +2,42 @@
<template>
<div class="document-preview-panel">
<div class="panel-content">
<div v-if="currentDocument" class="document-viewer">
<div v-if="currentDocument.type === 'pdf'" class="embedded-viewer">
<DocumentSearch :file-url="currentDocument.url" />
</div>
<div v-else-if="currentDocument.type === 'word'" class="embedded-viewer">
<DocumentSearchWord :file-url="currentDocument.url" />
</div>
<div v-else-if="currentDocument.type === 'excel'" class="embedded-viewer">
<DocumentExcel :file-url="currentDocument.url" />
</div>
<div v-else class="document-placeholder">
<div class="placeholder-content">
<i class="el-icon-document placeholder-icon"></i>
<p class="placeholder-text">暂不支持的文件类型</p>
<p class="placeholder-desc">{{ currentDocument.title || currentDocument.url }}</p>
<!-- 文档预览区域 -->
<div class="document-viewer-wrapper">
<!-- 左侧文档切换栏 -->
<div class="document-sidebar">
<div
v-for="(doc, index) in documents"
:key="doc.id"
class="document-item"
:class="{ active: currentIndex === index }"
@click="switchDocument(index)"
>
{{ doc.title }}
</div>
</div>
</div>
<div v-else class="empty-state">
<i class="el-icon-document-empty empty-icon"></i>
<p class="empty-text">暂无文档</p>
<div v-if="currentDocument" class="document-viewer">
<div v-if="currentDocument.type === 'pdf'" class="embedded-viewer">
<DocumentSearch :file-url="currentDocument.url" />
</div>
<div v-else-if="currentDocument.type === 'word'" class="embedded-viewer">
<DocumentSearchWord :file-url="currentDocument.url" />
</div>
<div v-else-if="currentDocument.type === 'excel'" class="embedded-viewer">
<DocumentExcel :file-url="currentDocument.url" />
</div>
<div v-else class="document-placeholder">
<div class="placeholder-content">
<i class="el-icon-document placeholder-icon"></i>
<p class="placeholder-text">暂不支持的文件类型</p>
<p class="placeholder-desc">{{ currentDocument.title || currentDocument.url }}</p>
</div>
</div>
</div>
<div v-else class="empty-state">
<i class="el-icon-document-empty empty-icon"></i>
<p class="empty-text">暂无文档</p>
</div>
</div>
</div>
</div>
@ -122,6 +137,13 @@ export default {
}
},
methods: {
switchDocument(index) {
if (index >= 0 && index < this.documents.length) {
this.currentIndex = index
const current = this.currentDocument
this.$emit('document-switch', current?.id || 'none')
}
},
handleSearch() {
this.$emit('search')
},
@ -209,9 +231,85 @@ export default {
overflow: hidden;
position: relative;
.document-sidebar {
position: absolute;
right: 0px;
top: 80px;
bottom: 16px;
width: 140px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
pointer-events: none;
.document-item {
padding: 7px 16px;
border-radius: 8px;
background: #f1f9ff;
color: #303133;
font-size: 13px;
line-height: 1.4;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
user-select: none;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
pointer-events: auto;
position: relative;
&:hover {
background: #f5f7fa;
color: #409EFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
&.active {
background: #409EFF;
color: #ffffff;
font-weight: 500;
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
transform: translateY(-1px);
}
}
// 自定义滚动条样式
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.3);
}
}
}
.document-viewer-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.document-viewer {
width: 100%;
height: 100%;
position: relative;
.embedded-viewer {
width: 100%;