fmode-app/src/app/components/preview/pdf-preview/pdf-preview.ts

import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  OnDestroy,
  effect,
  inject,
  input,
  model,
  output,
  signal,
  viewChild,
} from '@angular/core';

/**
 * PDF 预览 —— 逐页 canvas 渲染（**懒渲染**）。
 *
 * ## 借鉴（E:\work\lami\borin-academy-beta-version 的 pdf-preview 组件）
 *
 * 那套实现踩过坑，以下几条直接照搬，不做"优化"：
 *
 * 1. **polyfill 必须 `Object.defineProperty(enumerable: false)` 注入**
 *    —— 直接赋值会生成可枚举属性，触发 pdf.js 的
 *    「unexpected enumerable properties」污染检查，加载直接失败。
 * 2. **worker 地址带缓存版本号** —— 企微等内置浏览器会长期复用旧 worker。
 * 3. **加载失败要能重试**，且错误文案要具体（不要只写"加载失败"）。
 *
 * ## 2026-10-30 重构（《预览面板重构-设计-20261030》）
 * - **懒渲染**：首屏页立即画，其余页用 IntersectionObserver 等进入视口附近才画；
 *   未渲染的页面显示同尺寸灰色骨架，滚动位置不跳。
 * - **缩放上收**：缩放比例由宿主（app-file-preview）通过 `zoom` 模型驱动，
 *   本组件不再自带工具栏；页码与总页数通过 `page` / `pageCount` 模型回传宿主状态栏。
 *
 * 未照搬的部分：双版本 legacy 降级（我们主用 pdf.js 6.x，现代浏览器足够；
 * 真遇到老内核再加，避免一开始就把复杂度堆上来）。
 */
@Component({
  selector: 'app-pdf-preview',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="pdf-wrap">
      @if (state() === 'loading') {
        <div class="pdf-state">
          <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>
          <p>正在加载 PDF…</p>
        </div>
      } @else if (state() === 'error') {
        <div class="pdf-state">
          <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
          <p class="err">{{ error() }}</p>
          <button type="button" class="retry" (click)="reload()">重试</button>
        </div>
      } @else {
        <div class="pdf-scroll" #scroll>
          <div class="pdf-pages" #pages></div>
        </div>
      }
    </div>
  `,
  styles: [
    `
      :host {
        display: block;
        height: 100%;
      }
      .pdf-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
      }
      .pdf-state {
        flex: 1;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: var(--sp-3);
        color: var(--muted);
      }
      .pdf-state .err {
        max-width: 420px;
        text-align: center;
        color: var(--danger);
      }
      .retry {
        min-height: var(--touch-min);
        padding: 0 var(--sp-4);
        border: 1px solid var(--edge);
        border-radius: var(--r-sm);
        background: var(--surface);
        color: var(--primary);
        cursor: pointer;
      }
      .pdf-scroll {
        /*
         * 🔴 flex:1 会让它在缩放后**仍然等于视口高度**，导致超出部分滚不到
         *    （实测：scale 130% 时 scrollHeight 恒为 506）。
         *    这里改为按缩放比例反向撑高：可视高度 × 1/zoom = 缩放后的内容高度。
         *    --fp-scale 由宿主的 .fp-content 继承下来。
         */
        height: calc(100% / var(--fp-scale, 1));
        min-height: 0;
        overflow: auto;
        background: var(--surface-2);
        padding: var(--sp-3);
      }
      /* 页面居中，canvas 宽度随缩放变化 */
      .pdf-pages {
        display: grid;
        justify-items: center;
        align-content: start;
        gap: var(--sp-3);
      }
      .pdf-pages canvas {
        max-width: 100%;
        height: auto;
        box-shadow: var(--shadow-card);
        background: var(--surface);
      }
      /* 未渲染页的占位：与渲染后同尺寸，避免滚动位置跳动 */
      .pdf-ph {
        display: grid;
        place-items: center;
        background: var(--surface);
        box-shadow: var(--shadow-card);
        color: var(--muted);
        font-size: var(--fs-12);
      }
    `,
  ],
})
export class PdfPreviewComponent implements AfterViewInit, OnDestroy {
  readonly url = input.required<string>();
  readonly close = output<void>();

  /**
   * 缩放由宿主统一实现（2026-10-31）：宿主把所有类型包进同一个 .fp-content 做 zoom，
   * 这里不再自己响应缩放，避免双重缩放与重复渲染。
   */
  /** 当前页（随滚动更新，回传给宿主状态栏） */
  readonly page = model(1);
  /** 总页数（回传给宿主状态栏） */
  readonly pageCount = model(0);

  readonly state = signal<'loading' | 'ready' | 'error'>('loading');
  readonly error = signal('');

  private readonly pagesEl = viewChild<ElementRef<HTMLElement>>('pages');
  private readonly scrollEl = viewChild<ElementRef<HTMLElement>>('scroll');
  private readonly host = inject(ElementRef<HTMLElement>);

  private doc: PdfDoc | null = null;
  /** 每页的渲染状态（含页面尺寸，重渲染时用） */
  private pages: PageSlot[] = [];
  private observer: IntersectionObserver | null = null;
  /** 当前 fit 比例（容器宽 / 页面宽），缩放叠加在上面 */
  private fit = 1;
  /** 防并发：缩放与懒渲染同时改 DOM */
  private renderToken = 0;
  /** 上一次渲染用的 dpr（裁剪用） */
  private readonly dpr = Math.min(window.devicePixelRatio || 1, 2);

  constructor() {
    effect(() => {
      const u = this.url();
      if (u) void this.load(u);
    });
  }

  reload(): void {
    void this.load(this.url());
  }

  private async load(url: string): Promise<void> {
    this.state.set('loading');
    this.error.set('');
    this.teardown();
    try {
      installPdfjsCompatPolyfills();
      // 懒加载：pdf.js 体积大，不进首屏
      const pdfjs = await import('pdfjs-dist');
      pdfjs.GlobalWorkerOptions.workerSrc = workerSrc();
      const task = pdfjs.getDocument({
        url,
        verbosity: pdfjs.VerbosityLevel?.ERRORS ?? 0,
      } as never);
      const doc = (await task.promise) as unknown as PdfDoc;
      this.doc = doc;
      this.state.set('ready');
      /*
       * 等一帧：`@else` 分支（含 .pdf-pages 容器）在本 tick 之后才插入 DOM，
       * 立刻查会是 null。两帧更稳（首帧布局、次帧含样式）。
       */
      await nextFrames(2);
      if (this.state() !== 'ready' || this.doc !== doc) return;
      await this.buildPages(doc);
    } catch (e) {
      this.error.set(pdfErrorText(e));
      this.state.set('error');
    }
  }

  /**
   * 建立页面占位 + 懒渲染观察器。
   *
   * 先取每页 viewport（只读尺寸，不解码内容），得到所有页的显示尺寸与总高度；
   * 再一次性插入骨架 div，让滚动条从一开始就是最终长度 —— 否则边渲染边撑高，
   * 用户一旦滚动就会被"追着跑"。
   */
  private async buildPages(doc: PdfDoc): Promise<void> {
    const host = this.pagesEl()?.nativeElement;
    if (!host) return;
    const token = ++this.renderToken;
    host.innerHTML = '';
    this.pages = [];
    const first = await doc.getPage(1);
    const vp1 = first.getViewport({ scale: 1 });
    this.fit = calcFit(host, vp1.width);
    this.pageCount.set(doc.numPages);

    for (let i = 1; i <= doc.numPages; i++) {
      const el = document.createElement('div');
      el.className = 'pdf-ph';
      el.dataset['page'] = String(i);
      host.appendChild(el);
      this.pages.push({ el, canvas: null });
    }
    // 占位尺寸按第一页的比例估算（PDF 常见统一页面尺寸）
    this.sizePlaceholders(vp1.width, vp1.height);
    if (token !== this.renderToken) return;

    // 观察器：进入视口前 600px 就渲染，滚动时不至于看见灰块
    this.observer = new IntersectionObserver(
      (entries) => {
        for (const en of entries) {
          if (!en.isIntersecting) continue;
          const n = Number((en.target as HTMLElement).dataset['page']);
          void this.renderPage(n);
        }
      },
      { root: this.scrollEl()?.nativeElement ?? null, rootMargin: '600px 0px' },
    );
    for (const p of this.pages) this.observer.observe(p.el);
    // 首屏页不等观察器回调，立即画（避免"加载完还是一片灰"）
    await this.renderPage(1);
  }

  /** 按比例重排占位尺寸（缩放 / 首次构建共用） */
  private sizePlaceholders(w: number, h: number): void {
    const scale = this.fit;
    const width = Math.floor(w * scale);
    const height = Math.floor(h * scale);
    for (const p of this.pages) {
      if (p.canvas) {
        p.canvas.style.width = `${width}px`;
      } else {
        p.el.style.width = `${width}px`;
        p.el.style.height = `${height}px`;
      }
    }
  }

  /**
   * 缩放：清掉所有画布，保留骨架，再让观察器重新播报可见页。
   *
   * 不直接对 canvas 做 CSS scale —— 那只是放大图片，文字会糊；
   * 按新比例重新渲染才能保持矢量清晰度。
   */
  private async renderPage(n: number): Promise<void> {
    const doc = this.doc;
    const slot = this.pages[n - 1];
    if (!doc || !slot || slot.canvas) return;
    const token = this.renderToken;
    const page = await doc.getPage(n);
    if (token !== this.renderToken || slot.canvas) return;
    const vp1 = page.getViewport({ scale: 1 });
    const display = this.fit;
    const viewport = page.getViewport({ scale: display * this.dpr });

    const canvas = document.createElement('canvas');
    canvas.width = Math.floor(viewport.width);
    canvas.height = Math.floor(viewport.height);
    canvas.style.width = `${Math.floor(vp1.width * display)}px`;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    await page.render({ canvasContext: ctx, viewport }).promise;
    if (token !== this.renderToken) return;
    // 画完替换骨架（骨架保持同尺寸，替换不引起回流）
    slot.el.replaceWith(canvas);
    slot.canvas = canvas;
  }

  /** 当前视口中央对应的页号（滚动时更新 page 模型） */
  private visiblePage(): number {
    const sc = this.scrollEl()?.nativeElement;
    if (!sc || this.pages.length === 0) return this.page();
    const mid = sc.scrollTop + sc.clientHeight / 2;
    let top = 0;
    let best = 1;
    for (let i = 0; i < this.pages.length; i++) {
      const el = this.pages[i].canvas ?? this.pages[i].el;
      const h = el.getBoundingClientRect().height;
      if (mid < top + h) return i + 1;
      top += h + 12;
      best = i + 1;
    }
    return best;
  }

  private onScroll(): void {
    const n = this.visiblePage();
    if (n !== this.page()) this.page.set(n);
  }

  /** 滚动时更新页码（事件委托到容器的 scroll 事件） */
  private scrollListener = (): void => this.onScroll();

  ngAfterViewInit(): void {
    /*
     * 🔴 不用 viewChild 取 .pdf-scroll：就绪后几百毫秒它才由 @else 分支插入 DOM，
     *    ngAfterViewInit 时还是 undefined，监听会静默挂不上（页码不更新）。
     *    改为委托在宿主自身：子元素滚动不冒泡，但 scroll 事件在捕获阶段能经过
     *    host —— 这里用宿主原生监听 + 被动模式即可拿到所有子滚动。
     */
    this.host.nativeElement.addEventListener('scroll', this.scrollListener, {
      passive: true,
      capture: true,
    });
  }

  ngOnDestroy(): void {
    this.host.nativeElement.removeEventListener('scroll', this.scrollListener, { capture: true });
    this.teardown();
  }

  private teardown(): void {
    this.observer?.disconnect();
    this.observer = null;
    this.renderToken++;
    this.pages = [];
    try {
      this.doc?.destroy();
    } catch {
      /* 销毁失败不影响后续 */
    }
    this.doc = null;
  }
}

interface PdfDoc {
  numPages: number;
  getPage(n: number): Promise<PdfPage>;
  destroy(): void;
}

interface PdfPage {
  getViewport(o: { scale: number }): { width: number; height: number };
  render(o: { canvasContext: CanvasRenderingContext2D; viewport: unknown }): { promise: Promise<void> };
}

interface PageSlot {
  el: HTMLElement;
  canvas: HTMLCanvasElement | null;
}

/**
 * 容器宽 → fit 比例。
 *
 * 🔴 容器刚插入 DOM 时 clientWidth 可能是 0 或极小（192px 那种），
 *    直接用它会把页面渲染得极小。这里给一个合理下限，并优先用面板宽度。
 */
function calcFit(host: HTMLElement, pageWidth: number): number {
  const panel = host.closest('.fp-panel') as HTMLElement | null;
  const avail = Math.max(host.clientWidth, panel?.clientWidth ?? 0, 360) - 32;
  return Math.min(avail, 900) / pageWidth;
}

/** 等 n 帧（让 Angular 把新分支渲染进 DOM） */
function nextFrames(n: number): Promise<void> {
  return new Promise((resolve) => {
    const step = (left: number): void => {
      if (left <= 0) return resolve();
      requestAnimationFrame(() => step(left - 1));
    };
    step(n);
  });
}

/** worker 地址带缓存版本（企微等内置浏览器会长期复用旧 worker） */
const WORKER_VERSION = '20261021-1';
function workerSrc(): string {
  return `${new URL('/pdf.worker.js', location.origin).toString()}?v=${WORKER_VERSION}`;
}

/** 错误文案要具体，不要只写"加载失败" */
function pdfErrorText(e: unknown): string {
  const msg = e instanceof Error ? e.message : String(e);
  if (/Password/i.test(msg)) return '这个 PDF 有密码保护，无法预览。可下载后用本地应用打开。';
  if (/Invalid|corrupt/i.test(msg)) return 'PDF 文件可能已损坏，无法解析。';
  if (/CORS|Failed to fetch|NetworkError/i.test(msg)) return '无法下载 PDF 文件（可能是跨域限制）。';
  return `PDF 加载失败：${msg}`;
}

/**
 * pdf.js 在渲染路径直接调用 ES2022 `Array/String.prototype.at` 与
 * ES2021 `String.prototype.replaceAll`，企微等老内核缺失 → 会抛
 * "pattern.at is not a function"。
 *
 * 🔴 必须 `defineProperty(enumerable: false)`：直接赋值生成可枚举属性，
 *    会触发 pdf.js 的 Array.prototype 污染检查，加载直接失败。
 */
function installPdfjsCompatPolyfills(): void {
  const defineHidden = (obj: object, name: string, value: unknown): void => {
    Object.defineProperty(obj, name, { value, writable: true, configurable: true, enumerable: false });
  };
  const ap = Array.prototype as unknown as { at?: unknown };
  if (typeof ap.at !== 'function') {
    defineHidden(Array.prototype, 'at', function (this: unknown[], i: number) {
      const k = i < 0 ? this.length + i : i;
      return k < 0 || k >= this.length ? undefined : this[k];
    });
  }
  const sp = String.prototype as unknown as { at?: unknown; replaceAll?: unknown };
  if (typeof sp.at !== 'function') {
    defineHidden(String.prototype, 'at', function (this: string, i: number) {
      const k = i < 0 ? this.length + i : i;
      return k < 0 || k >= this.length ? undefined : this.charAt(k);
    });
  }
  if (typeof sp.replaceAll !== 'function') {
    defineHidden(String.prototype, 'replaceAll', function (this: string, s: string, r: string) {
      return this.split(s).join(r);
    });
  }
  /*
   * 🔴 `Promise.try`（ES2025）—— pdf.js 6.x 在消息通道里直接调用它。
   *    实测报错：`TypeError: Promise.try is not a function`，表现为**永远卡在「正在加载」**。
   *    参考项目没遇到这条，是因为它对老内核走了 3.11 legacy 兜底；
   *    我们只用 6.x，所以必须自己补。
   */
  const PP = Promise as unknown as { try?: unknown };
  if (typeof PP.try !== 'function') {
    defineHidden(Promise, 'try', function (fn: (...a: unknown[]) => unknown, ...args: unknown[]) {
      return new Promise((resolve) => resolve(fn(...args)));
    });
  }
}