新增 PPT 同頁 PDF 預覽抽屜

web/static/css/page-ppt-audit-history.css

@@ -199,6 +199,110 @@
   overflow-wrap: anywhere;
 }
 
+.ppt-preview-modal[hidden] {
+  display: none;
+}
+
+body.ppt-preview-open {
+  overflow: hidden;
+}
+
+.ppt-preview-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1080;
+  display: grid;
+  place-items: center;
+  padding: var(--momo-space-4, 16px);
+}
+
+.ppt-preview-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(42, 37, 32, 0.48);
+  backdrop-filter: blur(6px);
+}
+
+.ppt-preview-dialog {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: min(1180px, 100%);
+  height: min(82vh, 860px);
+  border: 1px solid var(--obs-line);
+  border-radius: var(--momo-radius-lg, 8px);
+  background:
+    radial-gradient(circle, rgba(45, 40, 32, 0.08) 1px, transparent 1.2px),
+    var(--obs-paper);
+  background-size: 10px 10px, auto;
+  box-shadow: 0 28px 80px rgba(42, 37, 32, 0.24);
+  overflow: hidden;
+}
+
+.ppt-preview-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--momo-space-3, 12px);
+  padding: var(--momo-space-4, 16px);
+  border-bottom: 1px solid var(--obs-line);
+  background: rgba(255, 255, 255, 0.62);
+}
+
+.ppt-preview-head h2 {
+  margin: 0 0 var(--momo-space-1, 4px);
+  color: var(--obs-ink);
+  font-size: var(--momo-text-title, 18px);
+  font-weight: var(--momo-font-weight-black, 800);
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+.ppt-preview-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--momo-space-2, 8px);
+  flex-wrap: wrap;
+}
+
+.ppt-preview-frame-wrap {
+  position: relative;
+  min-height: 0;
+  background: rgba(255, 255, 255, 0.52);
+}
+
+.ppt-preview-frame-wrap iframe {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 560px;
+  border: 0;
+  background: var(--obs-paper);
+}
+
+.ppt-preview-loading {
+  position: absolute;
+  inset: var(--momo-space-4, 16px);
+  z-index: 0;
+  display: grid;
+  place-items: center;
+  border: 1px dashed var(--obs-line);
+  border-radius: var(--momo-radius-md, 6px);
+  color: var(--obs-muted);
+  font-family: var(--momo-font-mono);
+  background:
+    radial-gradient(circle, rgba(45, 40, 32, 0.08) 1px, transparent 1.2px),
+    rgba(255, 255, 255, 0.42);
+  background-size: 10px 10px, auto;
+}
+
+.ppt-preview-frame-wrap.is-loaded .ppt-preview-loading {
+  display: none;
+}
+
 .ppt-health-board {
   display: grid;
   grid-template-columns: minmax(280px, 0.36fr) minmax(0, 0.64fr);
@@ -800,10 +904,30 @@
   .ppt-table-title,
   .ppt-workbench-head,
   .ppt-workbench-actions,
+  .ppt-preview-head,
   .ppt-run-log-head,
   .ppt-run-row,
   .ppt-coverage-row {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .ppt-preview-modal {
+    padding: 0;
+  }
+
+  .ppt-preview-dialog {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    border-radius: 0;
+  }
+
+  .ppt-preview-actions {
+    justify-content: flex-start;
+  }
+
+  .ppt-preview-frame-wrap iframe {
+    min-height: calc(100vh - 168px);
+  }
 }

web/static/js/observability-charts.js

@@ -596,6 +596,71 @@
   function initPptAutoGeneration() {
     const panel = document.querySelector('[data-ppt-auto-generation]');
     const pageStatus = document.querySelector('[data-ppt-auto-status]');
+    const previewModal = document.querySelector('[data-ppt-preview-modal]');
+    const previewFrame = previewModal ? previewModal.querySelector('[data-ppt-preview-frame]') : null;
+    const previewTitle = previewModal ? previewModal.querySelector('[data-ppt-preview-title]') : null;
+    const previewFilename = previewModal ? previewModal.querySelector('[data-ppt-preview-filename]') : null;
+    const previewOpenPage = previewModal ? previewModal.querySelector('[data-ppt-preview-open-page]') : null;
+    const previewDownload = previewModal ? previewModal.querySelector('[data-ppt-preview-download]') : null;
+    const previewLoading = previewModal ? previewModal.querySelector('[data-ppt-preview-loading]') : null;
+    const previewFrameWrap = previewModal ? previewModal.querySelector('.ppt-preview-frame-wrap') : null;
+
+    function closePreviewModal() {
+      if (!previewModal) return;
+      previewModal.hidden = true;
+      previewModal.setAttribute('aria-hidden', 'true');
+      document.body.classList.remove('ppt-preview-open');
+      if (previewFrame) {
+        previewFrame.removeAttribute('src');
+      }
+    }
+
+    function openPreviewModal(trigger) {
+      if (!previewModal || !previewFrame) return false;
+      const pdfUrl = trigger.dataset.pptPreviewPdf || '';
+      if (!pdfUrl) return false;
+      const title = trigger.dataset.pptPreviewTitle || '簡報線上預覽';
+      const filename = trigger.dataset.pptFilename || '';
+      if (previewTitle) previewTitle.textContent = title;
+      if (previewFilename) previewFilename.textContent = filename;
+      if (previewOpenPage) previewOpenPage.href = trigger.dataset.pptPreviewPage || trigger.href || pdfUrl;
+      if (previewDownload) previewDownload.href = trigger.dataset.pptDownloadUrl || '#';
+      if (previewLoading) previewLoading.textContent = filename ? `${filename} 正在載入 PDF 預覽` : '正在載入 PDF 預覽';
+      previewModal.hidden = false;
+      previewModal.setAttribute('aria-hidden', 'false');
+      document.body.classList.add('ppt-preview-open');
+      if (previewFrameWrap) previewFrameWrap.classList.remove('is-loaded');
+      previewFrame.src = pdfUrl;
+      return true;
+    }
+
+    if (previewModal) {
+      if (previewFrame && previewFrame.dataset.boundLoad !== '1') {
+        previewFrame.dataset.boundLoad = '1';
+        previewFrame.addEventListener('load', () => {
+          if (previewFrameWrap) previewFrameWrap.classList.add('is-loaded');
+        });
+      }
+      previewModal.querySelectorAll('[data-ppt-preview-close]').forEach(button => {
+        if (button.dataset.bound === '1') return;
+        button.dataset.bound = '1';
+        button.addEventListener('click', closePreviewModal);
+      });
+      document.addEventListener('keydown', event => {
+        if (event.key === 'Escape' && !previewModal.hidden) closePreviewModal();
+      });
+    }
+
+    document.querySelectorAll('[data-ppt-open-preview]').forEach(link => {
+      if (link.dataset.bound === '1') return;
+      link.dataset.bound = '1';
+      link.addEventListener('click', event => {
+        if (openPreviewModal(link)) {
+          event.preventDefault();
+        }
+      });
+    });
+
     document.querySelectorAll('[data-ppt-aider-heal]').forEach(button => {
       if (button.dataset.bound === '1') return;
       button.dataset.bound = '1';