feat: 完善知识库预览功能与配置管理优化

web/src/views/PoliciesView.vue

@@ -1,15 +1,15 @@
 <template>
-  <section class="knowledge-page">
-    <div class="knowledge-grid" :class="{ 'has-preview': selectedDocument }">
-      <section class="knowledge-main">
-        <article class="library-panel panel">
-          <header class="panel-title">
-            <div>
-              <h2>文档库 / 文件夹</h2>
-              <p>默认展示文件列表，点击具体文件后可在右侧展开预览。</p>
-            </div>
-            <label class="file-search">
-              <i class="mdi mdi-magnify"></i>
+  <section class="knowledge-page">
+    <div class="knowledge-grid" :class="{ 'has-preview': previewLayoutState.usesSplitLayout }">
+      <section class="knowledge-main">
+        <article class="library-panel panel">
+          <header class="panel-title">
+            <div>
+              <h2>文档库 / 文件夹</h2>
+              <p>默认展示文件列表，点击具体文件后以弹窗方式展开预览。</p>
+            </div>
+            <label class="file-search">
+              <i class="mdi mdi-magnify"></i>
               <input v-model="documentSearch" type="search" placeholder="搜索当前文件夹内文件" />
             </label>
           </header>
@@ -159,18 +159,29 @@
               </footer>
             </section>
           </div>
-        </article>
-      </section>
-
-      <Transition name="preview-panel">
-        <aside v-if="selectedDocument" class="preview-column">
-          <article class="preview-panel panel">
-            <header class="preview-head">
-              <div class="preview-copy">
-                <h2>{{ selectedDocument.name }}</h2>
-                <p class="preview-summary-line">
-                  <span v-for="part in previewMetaLine" :key="part">{{ part }}</span>
-                </p>
+        </article>
+      </section>
+      <Teleport to="body">
+        <Transition name="preview-modal">
+          <div
+            v-if="previewLayoutState.isPreviewModalOpen"
+            class="preview-modal-overlay"
+            role="presentation"
+            @click.self="closePreview"
+          >
+            <aside class="preview-modal-shell" role="dialog" aria-modal="true" aria-labelledby="knowledge-preview-title">
+              <article
+                ref="previewDialogPanel"
+                class="preview-panel preview-modal-panel panel"
+                tabindex="-1"
+                @click.stop
+              >
+            <header class="preview-head">
+              <div class="preview-copy">
+                <h2 id="knowledge-preview-title">{{ selectedDocument.name }}</h2>
+                <p class="preview-summary-line">
+                  <span v-for="part in previewMetaLine" :key="part">{{ part }}</span>
+                </p>
                 <div v-if="previewSecondaryMetaLine.length" class="preview-secondary-line">
                   <span v-for="part in previewSecondaryMetaLine" :key="part">{{ part }}</span>
                 </div>
@@ -185,22 +196,30 @@
                   <i class="mdi mdi-close"></i>
                 </button>
               </div>
-            </header>
-
-            <div class="preview-viewer">
-              <div v-if="previewLoading" class="preview-status">正在加载预览...</div>
-              <div v-else-if="previewError" class="preview-status error">{{ previewError }}</div>
+            </header>
+
+            <div class="preview-viewer">
+              <div v-if="shouldRenderOnlyOffice" class="onlyoffice-preview-wrap">
+                <div
+                  v-if="shouldRenderOnlyOfficeHostNode"
+                  :id="onlyOfficeHostId"
+                  class="onlyoffice-preview-host"
+                ></div>
+                <div v-if="onlyOfficeLoading" class="preview-status preview-status-overlay">
+                  正在加载 ONLYOFFICE 预览...
+                </div>
+                <div v-else-if="onlyOfficeError" class="preview-status error preview-status-overlay">
+                  {{ onlyOfficeError }}
+                </div>
+              </div>
+              <div v-else-if="previewLoading" class="preview-status">正在加载预览...</div>
+              <div v-else-if="previewError" class="preview-status error">{{ previewError }}</div>
               <div v-else-if="previewMode === 'pdf' && previewBlobUrl" class="preview-embed-wrap">
                 <iframe :src="previewBlobUrl" class="preview-embed" title="PDF 预览"></iframe>
               </div>
               <div v-else-if="previewMode === 'image' && previewBlobUrl" class="preview-image-wrap">
                 <img :src="previewBlobUrl" :alt="selectedDocument.name" class="preview-image" />
               </div>
-              <div v-else-if="shouldUseOnlyOffice" class="onlyoffice-preview-wrap">
-                <div v-if="onlyOfficeLoading" class="preview-status">正在加载 ONLYOFFICE 预览...</div>
-                <div v-else-if="onlyOfficeError" class="preview-status error">{{ onlyOfficeError }}</div>
-                <div v-else :id="onlyOfficeHostId" class="onlyoffice-preview-host"></div>
-              </div>
               <div v-else-if="previewMode === 'table'" class="excel-preview-wrap">
                 <div v-if="selectedDocument.previewPages.length > 1" class="excel-sheet-tabs" role="tablist" aria-label="Excel 工作表页签">
                   <button
@@ -249,15 +268,17 @@
                 </article>
                 <div v-if="!selectedDocument.previewPages.length" class="preview-status">
                   当前文件暂未生成结构化预览，请下载后查看。
-                </div>
-              </div>
-            </div>
-          </article>
-        </aside>
-      </Transition>
-    </div>
-  </section>
-</template>
+                </div>
+              </div>
+            </div>
+              </article>
+            </aside>
+          </div>
+        </Transition>
+      </Teleport>
+    </div>
+  </section>
+</template>
 
 <script src="./scripts/PoliciesView.js"></script>