From e2b9f60f8a2743f6d920712baf56c0d30cab73f7 Mon Sep 17 00:00:00 2001
From: cwchen <1048842385@qq.com>
Date: Fri, 28 Nov 2025 11:17:11 +0800
Subject: [PATCH] =?UTF-8?q?pdf=20=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/child/DocumentPreviewPanel.vue | 136 +++++++++++++++---
 1 file changed, 117 insertions(+), 19 deletions(-)

diff --git a/src/views/analysis/components/child/DocumentPreviewPanel.vue b/src/views/analysis/components/child/DocumentPreviewPanel.vue
index 135a24e..4b2513e 100644
--- a/src/views/analysis/components/child/DocumentPreviewPanel.vue
+++ b/src/views/analysis/components/child/DocumentPreviewPanel.vue
@@ -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%;