pdf 页面优化

src/views/analysis/components/child/DocumentPreviewPanel.vue

@@ -2,6 +2,20 @@
 <template>
     <div class="document-preview-panel">
         <div class="panel-content">
+            <!-- 文档预览区域 -->
+            <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 v-if="currentDocument" class="document-viewer">
                     <div v-if="currentDocument.type === 'pdf'" class="embedded-viewer">
                         <DocumentSearch :file-url="currentDocument.url" />
@@ -26,6 +40,7 @@
                 </div>
             </div>
         </div>
+    </div>
 </template>
 
 <script>
@@ -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%;