@lijian-ui/dsh-file-manager 0.2.3 → 0.2.4

package/src/client/preview/office.tsx

@@ -0,0 +1,321 @@
+/**
+ * Office preview: renderers for Word / PPT / Excel. Word, PPT and editable
+ * .xlsx files are served as self-contained HTML by the host-side OfficeCLI
+ * binary and embedded in an iframe (read-only; `officecli view <file> html`
+ * renders original styling — fills, date/currency formats, merges — faithfully).
+ * Legacy xls/ods stay read-only HTML tables decoded with SheetJS. Streamed tabs
+ * carry the /filemgr/raw route URL in `content`; the bytes are fetched once and
+ * handed to the renderer. Any render error degrades to the download hint.
+ * @module dsh-filemgr/client/preview/office
+ */
+
+import { useEffect, useRef, useState, useCallback, type ReactElement } from 'react'
+import type { PreviewTabState } from '../store.ts'
+import { isExcelEditablePath } from '../fileType.ts'
+import { t } from '../locales.ts'
+import previewCss from '../styles/preview.module.css'
+
+/** Sheet preview guard: decode at most this many rows/cols of the used range. */
+const SHEET_MAX_ROWS = 500
+const SHEET_MAX_COLS = 60
+
+const viewerStyle: React.CSSProperties = {
+  flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden',
+}
+
+
+/** Fetch the raw-route bytes once per url (null url = no bytes yet). */
+function useBytes(url: string | null): { bytes: Uint8Array | null; error: string | null } {
+  const [bytes, setBytes] = useState<Uint8Array | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  useEffect(() => {
+    let cancelled = false
+    setBytes(null)
+    setError(null)
+    if (url === null) {
+      return undefined
+    }
+    void fetchBytes(url)
+      .then((data) => {
+        if (!cancelled) setBytes(data)
+      })
+      .catch((cause: unknown) => {
+        if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause))
+      })
+    return () => { cancelled = true }
+  }, [url])
+  return { bytes, error }
+}
+
+/** GET the bytes behind one raw-route URL. */
+async function fetchBytes(url: string): Promise<Uint8Array> {
+  const response = await fetch(url)
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+  return new Uint8Array(await response.arrayBuffer())
+}
+
+/**
+ * Dispatch an office tab to its format renderer. `content` is the streamed
+ * raw-route URL; the bytes arrive before the renderer mounts, so each child
+ * sees a complete file.
+ */
+export function OfficeViewer({ tab, onInsertSheetReference }: {
+  tab: PreviewTabState
+  /** Insert a 文件!Sheet!Range reference chip into the composer. */
+  onInsertSheetReference: (path: string, sheetName: string, range: string) => boolean
+}): ReactElement {
+  const { bytes, error } = useBytes(tab.content)
+  if (error !== null) return <OfficeError message={error} />
+  if (bytes === null) return <div className={previewCss.placeholder}>{t('preview.loading')}</div>
+  return (
+    <div style={viewerStyle}>
+      {(tab.contentType === 'word' || tab.contentType === 'ppt' ||
+        // Editable .xlsx previews also go through OfficeCLI for faithful,
+        // original-styling rendering (fills, date/currency formats, merges);
+        // .xls/.ods are not OpenXML so they fall back to the JS SheetViewer.
+        (tab.contentType === 'excel' && isExcelEditablePath(tab.path))) && <HtmlOfficeViewer tab={tab} onInsertSheetReference={onInsertSheetReference} />}
+      {tab.contentType === 'excel' && !isExcelEditablePath(tab.path) && <SheetViewer bytes={bytes} />}
+    </div>
+  )
+}
+
+/** Render-error fallback: explain the failure and hint at the download path. */
+function OfficeError({ message }: { message: string }): ReactElement {
+  return (
+    <div className={previewCss.placeholder}>
+      <div className={previewCss.placeholderTitle}>{t('preview.unsupported')}</div>
+      <div className={previewCss.placeholderError}>{message}</div>
+      <div className={previewCss.placeholderMeta}>{t('preview.downloadHint')}</div>
+    </div>
+  )
+}
+
+/** Word/PPT/Excel (.xlsx) preview via OfficeCLI (server-side rendered HTML, embedded in iframe). */
+function HtmlOfficeViewer({ tab, onInsertSheetReference }: {
+  tab: PreviewTabState
+  onInsertSheetReference: (path: string, sheetName: string, range: string) => boolean
+}): ReactElement {
+  const [bust, setBust] = useState(0)
+  const [iframeSrc, setIframeSrc] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const loadedPath = useRef<string>('')
+  // Live Excel cell selection reported by the injected iframe script.
+  const [pick, setPick] = useState<{ sheet: string; range: string; x: number; y: number } | null>(null)
+
+  // Extract workspace root from the raw-route URL (tab.content) synchronously.
+  // The raw route uses /filemgr/raw?root=<workspace>&path=<relative>,
+  // and officecli needs the absolute path, so we pass both root+path
+  // to /filemgr/office-preview for server-side resolution.
+  let root = ''
+  if (tab.content !== null) {
+    try {
+      const url = new URL(tab.content, window.location.origin)
+      const r = url.searchParams.get('root')
+      if (r !== null) root = r
+    } catch { /* keep existing root */ }
+  }
+
+  // Build preview URL with query params (same root+path convention as /filemgr/raw)
+  function previewUrl(cacheBust: number, root: string, path: string): string {
+    const params = new URLSearchParams({ root, path })
+    if (cacheBust !== 0) params.set('t', String(cacheBust))
+    return `/filemgr/office-preview?${params.toString()}`
+  }
+
+  const src = previewUrl(bust, root, tab.path)
+
+  // (Re)load the rendered HTML
+  useEffect(() => {
+    let cancelled = false
+    async function load(): Promise<void> {
+      setError(null)
+      try {
+        const response = await fetch(src)
+        if (cancelled) return
+        if (!response.ok) {
+          const body = (await response.json().catch(() => null)) as { error?: { error?: string } } | null
+          setError(body?.error?.error ?? `HTTP ${response.status}`)
+          return
+        }
+        const html = await response.text()
+        if (cancelled) return
+        const blob = new Blob([html], { type: 'text/html' })
+        setIframeSrc(URL.createObjectURL(blob))
+        loadedPath.current = tab.path
+      } catch (cause) {
+        if (!cancelled) setError('无法连接预览服务')
+      }
+    }
+    void load()
+    return () => {
+      cancelled = true
+    }
+  }, [src, tab.path])
+
+  // Auto-reload: poll mtime for changes
+  useEffect(() => {
+    let cancelled = false
+    let timer: number | undefined
+    let lastMtime: number | null = null
+    async function tick(): Promise<void> {
+      try {
+        const probeUrl = previewUrl(0, root, tab.path) + '&probe=1'
+        const response = await fetch(probeUrl)
+        if (response.ok) {
+          const json = (await response.json()) as { mtime?: number }
+          if (json.mtime !== undefined && json.mtime !== lastMtime) {
+            if (lastMtime !== null) setBust((b) => b + 1)
+            lastMtime = json.mtime
+          }
+        }
+      } catch { /* keep polling */ }
+      if (!cancelled) timer = window.setTimeout(() => { void tick() }, 3000)
+    }
+    void tick()
+    return () => {
+      cancelled = true
+      if (timer !== undefined) window.clearTimeout(timer)
+    }
+  }, [tab.path])
+
+  // Follow the host light/dark theme: the preview iframe is an isolated blob
+  // document that cannot see body[data-ds-dark-theme], so push the theme into
+  // it via postMessage whenever it changes (and once on iframe load).
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const sendTheme = useCallback((dark: boolean): void => {
+    iframeRef.current?.contentWindow?.postMessage(
+      { source: 'dsh-filemgr', type: 'dsh-theme', dark },
+      '*',
+    )
+  }, [])
+  useEffect(() => {
+    const push = (): void => {
+      sendTheme(document.body.hasAttribute('data-ds-dark-theme'))
+    }
+    // Sync once the iframe mounts (postMessage buffers until it loads).
+    push()
+    const observer = new MutationObserver(push)
+    observer.observe(document.body, { attributes: true, attributeFilter: ['data-ds-dark-theme'] })
+    return () => observer.disconnect()
+  }, [sendTheme, iframeSrc])
+
+  // Excel selection: the injected iframe script posts a live cell range up.
+  // sheet/range identify the pick; x/y are iframe-viewport coords used to anchor
+  // the floating button. An empty payload (range null) clears the pick.
+  useEffect(() => {
+    const onMessage = (event: MessageEvent): void => {
+      const data = event.data
+      if (data === null || typeof data !== 'object' || data.source !== 'dsh-filemgr' || data.type !== 'dsh-sheet-select') return
+      if (data.range === null || data.range === undefined) {
+        setPick(null)
+        return
+      }
+      setPick({ sheet: data.sheet, range: data.range, x: data.x, y: data.y })
+    }
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [])
+
+  if (error !== null) {
+    return <OfficeError message={`OfficeCLI 渲染失败: ${error}`} />
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 8px', borderBottom: '1px solid rgba(128,128,128,.3)', flex: '0 0 auto' }}>
+        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: 12 }} title={tab.path}>{tab.path}</span>
+        <button type="button" onClick={() => setBust((b) => b + 1)} style={{ fontSize: 12 }}>{t('preview.refresh')}</button>
+      </div>
+      {iframeSrc !== null ? (
+        <div style={{ position: 'relative', flex: 1, minHeight: 0, display: 'flex' }}>
+          <iframe
+            ref={iframeRef}
+            key={`${loadedPath.current}:${bust}`}
+            src={iframeSrc}
+            title={tab.path}
+            onLoad={() => sendTheme(document.body.hasAttribute('data-ds-dark-theme'))}
+            style={{ flex: 1, width: '100%', border: 'none', minHeight: 0 }}
+          />
+          {pick !== null && (
+            <button
+              type="button"
+              onClick={() => {
+                if (onInsertSheetReference(tab.path, pick.sheet, pick.range)) setPick(null)
+              }}
+              style={{
+                position: 'absolute',
+                left: Math.max(0, pick.x),
+                top: Math.max(0, pick.y),
+                zIndex: 20,
+                fontSize: 12,
+                padding: '4px 10px',
+                borderRadius: 6,
+                border: '1px solid rgba(128,128,128,.4)',
+                background: 'var(--dsw-app-color-default-bg, #fff)',
+                color: 'var(--dsw-app-color-text-1, #333)',
+                boxShadow: '0 2px 8px rgba(0,0,0,.15)',
+                cursor: 'pointer',
+              }}
+            >
+              {t('preview.addSheetSelection')}
+            </button>
+          )}
+        </div>
+      ) : (
+        <div style={{ padding: 16, fontSize: 12, color: 'rgba(128,128,128,.8)' }}>{t('preview.loading')}</div>
+      )}
+    </div>
+  )
+}
+
+/** Excel preview via SheetJS: the first sheet decoded to an HTML table. */
+function SheetViewer({ bytes }: { bytes: Uint8Array }): ReactElement {
+  const [rows, setRows] = useState<string[][] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  useEffect(() => {
+    let cancelled = false
+    setRows(null)
+    setError(null)
+    void (async () => {
+      try {
+        const XLSX = await import('xlsx')
+        if (cancelled) return
+        const workbook = XLSX.read(bytes, { type: 'array' })
+        const sheetName = workbook.SheetNames[0]
+        const sheet = sheetName !== undefined ? workbook.Sheets[sheetName] : undefined
+        if (sheet === undefined) throw new Error('no sheets in workbook')
+        const range = XLSX.utils.decode_range(sheet['!ref'] ?? 'A1:A1')
+        const maxRow = Math.min(range.e.r, range.s.r + SHEET_MAX_ROWS - 1)
+        const maxCol = Math.min(range.e.c, range.s.c + SHEET_MAX_COLS - 1)
+        const data = XLSX.utils.sheet_to_json<unknown[]>(sheet, {
+          header: 1,
+          range: { s: range.s, e: { r: maxRow, c: maxCol } },
+          raw: false,
+          defval: '',
+        }) as string[][]
+        if (!cancelled) setRows(data)
+      } catch (cause) {
+        if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause))
+      }
+    })()
+    return () => { cancelled = true }
+  }, [bytes])
+  if (error !== null) return <OfficeError message={error} />
+  if (rows === null) return <div className={previewCss.placeholder}>{t('preview.loading')}</div>
+  return (
+    <div className={previewCss.csvViewer}>
+      <table className={previewCss.csvTable}>
+        <tbody>
+          {rows.map((row, rowIndex) => (
+            <tr key={rowIndex}>
+              {row.map((cell, cellIndex) => (
+                rowIndex === 0 ? <th key={cellIndex}>{cell}</th> : <td key={cellIndex}>{cell}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+

package/src/client/reference.ts

@@ -164,3 +164,52 @@ export function appendFileReferenceChip(
     { start: snap.draft.length, end: snap.draft.length, draftRev: snap.draftRev },
   )
 }
+
+/** A live Excel cell selection captured from a read-only preview. */
+export interface ExcelReference {
+  /** Worksheet name (from the preview's sheet tabs / cell data-path). */
+  sheetName: string
+  /** A1 range, e.g. "B3" or "B3:F7". */
+  range: string
+}
+
+/** The model text a sheet chip serializes to (`相对路径!Sheet名!Range`). */
+export function formatSheetRefToken(path: string, ref: ExcelReference): string {
+  return `${path}!${ref.sheetName}!${ref.range}`
+}
+
+/**
+ * Append a sheet-selection chip at the draft end (the preview Excel "引用到对话"
+ * action). The `sheet` source's codec (file-source.ts) serializes the
+ * `相对路径!Sheet名!Range` token back verbatim — no click / copy behavior.
+ *
+ * @returns true when the bail was accepted.
+ */
+export function appendSheetChip(
+  ctx: ClientContext,
+  sessionId: SessionId | undefined,
+  path: string,
+  ref: ExcelReference,
+): boolean {
+  if (sessionId === undefined) return false
+  const actx = ctx.sessions.scope(sessionId)
+  if (actx === undefined) return false
+  const conversation = (ctx as unknown as { get(name: string): unknown }).get('conversation') as ConversationService | undefined
+  if (conversation === undefined) return false
+  const shell = conversation.input.for(actx as unknown as ClientContext)
+  const snap = shell.state.getSnapshot()
+  const token = formatSheetRefToken(path, ref)
+  const reference: ConversationReference = {
+    source: 'sheet',
+    ref: token,
+    label: token,
+    clipboardText: token,
+    appearance: 'file',
+  }
+  return (actx as unknown as {
+    bail(target: unknown, event: string, payload: unknown): boolean
+  }).bail(actx, 'slash/input-insert-reference', {
+    reference,
+    span: { start: snap.draft.length, end: snap.draft.length, draftRev: snap.draftRev },
+  })
+}