dsh-workspace-explorer 1.1.0 → 1.1.2

package/src/ui/pdf-preview.js

@@ -1,135 +1,135 @@
-import { pdfAssetsPath } from '../document-types.js';
-import { PreviewUnavailable } from './preview-unavailable.js';
-import { usePreviewZoom } from './preview-zoom.js';
-
-const { createElement: h, useEffect, useRef, useState } = react;
-
-function asset(file) {
-  return new URL(pdfAssetsPath + '?file=' + file, location.href).href;
-}
-
-const pageBatch = 24;
-
-const PdfPage = react.memo(function PdfPage({ pdf, number, initialSize, width, visible, renderZoom }) {
-  const [size, setSize] = useState(initialSize);
-  const [failed, setFailed] = useState(false);
-  const canvas = useRef(null);
-  useEffect(() => {
-    if (!visible) return;
-    const surface = canvas.current;
-    let canceled = false;
-    let page;
-    let task;
-    async function render() {
-      try {
-        page = await pdf.getPage(number);
-        if (canceled) return;
-        const natural = page.getViewport({ scale: 1 });
-        setSize({ width: natural.width, height: natural.height });
-        const pageViewport = page.getViewport({ scale: Math.min(width / natural.width, 2) * renderZoom });
-        const pixels = Math.min(window.devicePixelRatio || 1, 4096 / Math.max(pageViewport.width, pageViewport.height));
-        surface.width = Math.max(1, Math.floor(pageViewport.width * pixels));
-        surface.height = Math.max(1, Math.floor(pageViewport.height * pixels));
-        task = page.render({
-          canvas: surface, viewport: pageViewport, transform: [pixels, 0, 0, pixels, 0, 0],
-        });
-        await task.promise;
-        if (!canceled) setFailed(false);
-      } catch {
-        if (!canceled) setFailed(true);
-      }
-    }
-    void render();
-    return () => {
-      canceled = true;
-      task?.cancel();
-      page?.cleanup();
-    };
-  }, [pdf, number, visible, width, renderZoom]);
-
-  const displayWidth = Math.min(width, size.width * 2);
-  return h('div', {
-    className: 'dwe-pdf-page', 'data-pdf-page': number, 'data-dwe-zoom-surface': '',
-    style: { '--dwe-fit-width': displayWidth + 'px', '--dwe-fit-height': displayWidth * size.height / size.width + 'px' },
-  }, visible && h('canvas', { ref: canvas, role: 'img', 'aria-label': '文档第 ' + number + ' 页', hidden: failed }),
-  failed && h('p', { className: 'dwe-preview-hint' }, '第 ' + number + ' 页无法显示'));
-});
-
-function PdfPages({ pdf, initialSize }) {
-  const scroll = useRef(null);
-  const [width, setWidth] = useState(0);
-  const [visible, setVisible] = useState(() => new Set());
-  const [count, setCount] = useState(() => Math.min(pdf.numPages, pageBatch));
-  const [renderZoom, setRenderZoom] = useState(1);
-  usePreviewZoom(scroll, setRenderZoom);
-  const measured = width > 0;
-  useEffect(() => {
-    const viewport = scroll.current;
-    const observer = new ResizeObserver(() => setWidth(Math.max(0, viewport.clientWidth - 16)));
-    observer.observe(viewport);
-    return () => observer.disconnect();
-  }, []);
-
-  useEffect(() => {
-    if (!measured) return;
-    const viewport = scroll.current;
-    const observer = new IntersectionObserver(entries => {
-      setVisible(current => {
-        const next = new Set(current);
-        for (const entry of entries) {
-          const number = Number(entry.target.dataset.pdfPage);
-          if (!number) continue;
-          if (entry.isIntersecting) next.add(number);
-          else next.delete(number);
-        }
-        return next;
-      });
-      if (entries.some(entry => !entry.target.dataset.pdfPage && entry.isIntersecting)) {
-        setCount(current => Math.min(pdf.numPages, current + pageBatch));
-      }
-    }, { root: viewport, rootMargin: '180px 0px' });
-    for (const node of viewport.children) observer.observe(node);
-    return () => observer.disconnect();
-  }, [count, measured, pdf]);
-
-  return h('div', { className: 'dwe-pdf-scroll', ref: scroll, tabIndex: 0, 'aria-label': '文档预览，共 ' + pdf.numPages + ' 页' },
-    measured && Array.from({ length: count }, (_, index) => h(PdfPage, {
-      key: index + 1, pdf, number: index + 1, initialSize, width, renderZoom, visible: visible.has(index + 1),
-    })),
-    measured && count < pdf.numPages && h('div', { key: 'more', className: 'dwe-pdf-more', 'aria-hidden': true }));
-}
-
-export function PdfPreview({ data }) {
-  const [document, setDocument] = useState(null);
-  const [failed, setFailed] = useState(false);
-  useEffect(() => {
-    let canceled = false;
-    let task;
-    async function load() {
-      try {
-        const { getDocument, GlobalWorkerOptions } = await import(asset('build/pdf.min.mjs'));
-        if (canceled) return;
-        GlobalWorkerOptions.workerSrc = asset('build/pdf.worker.min.mjs');
-        task = getDocument({
-          data: data.slice(), cMapPacked: true, useWorkerFetch: false,
-          cMapUrl: asset('cmaps/'), standardFontDataUrl: asset('standard_fonts/'), wasmUrl: asset('wasm/'),
-          enableXfa: false, isEvalSupported: false,
-        });
-        const pdf = await task.promise;
-        if (canceled) return;
-        const first = await pdf.getPage(1);
-        if (!canceled) setDocument({ pdf, initialSize: first.getViewport({ scale: 1 }) });
-      } catch {
-        if (!canceled) setFailed(true);
-      }
-    }
-    void load();
-    return () => {
-      canceled = true;
-      void task?.destroy().catch(() => {});
-    };
-  }, [data]);
-
-  if (failed) return h(PreviewUnavailable);
-  return document ? h(PdfPages, document) : h('p', { className: 'dwe-preview-hint', role: 'status' }, '正在加载文档页面…');
-}
+import { pdfAssetsPath } from '../document-types.js';
+import { PreviewUnavailable } from './preview-unavailable.js';
+import { usePreviewZoom } from './preview-zoom.js';
+
+const { createElement: h, useEffect, useRef, useState } = react;
+
+function asset(file) {
+  return new URL(pdfAssetsPath + '?file=' + file, location.href).href;
+}
+
+const pageBatch = 24;
+
+const PdfPage = react.memo(function PdfPage({ pdf, number, initialSize, width, visible, renderZoom }) {
+  const [size, setSize] = useState(initialSize);
+  const [failed, setFailed] = useState(false);
+  const canvas = useRef(null);
+  useEffect(() => {
+    if (!visible) return;
+    const surface = canvas.current;
+    let canceled = false;
+    let page;
+    let task;
+    async function render() {
+      try {
+        page = await pdf.getPage(number);
+        if (canceled) return;
+        const natural = page.getViewport({ scale: 1 });
+        setSize({ width: natural.width, height: natural.height });
+        const pageViewport = page.getViewport({ scale: Math.min(width / natural.width, 2) * renderZoom });
+        const pixels = Math.min(window.devicePixelRatio || 1, 4096 / Math.max(pageViewport.width, pageViewport.height));
+        surface.width = Math.max(1, Math.floor(pageViewport.width * pixels));
+        surface.height = Math.max(1, Math.floor(pageViewport.height * pixels));
+        task = page.render({
+          canvas: surface, viewport: pageViewport, transform: [pixels, 0, 0, pixels, 0, 0],
+        });
+        await task.promise;
+        if (!canceled) setFailed(false);
+      } catch {
+        if (!canceled) setFailed(true);
+      }
+    }
+    void render();
+    return () => {
+      canceled = true;
+      task?.cancel();
+      page?.cleanup();
+    };
+  }, [pdf, number, visible, width, renderZoom]);
+
+  const displayWidth = Math.min(width, size.width * 2);
+  return h('div', {
+    className: 'dwe-pdf-page', 'data-pdf-page': number, 'data-dwe-zoom-surface': '',
+    style: { '--dwe-fit-width': displayWidth + 'px', '--dwe-fit-height': displayWidth * size.height / size.width + 'px' },
+  }, visible && h('canvas', { ref: canvas, role: 'img', 'aria-label': '文档第 ' + number + ' 页', hidden: failed }),
+  failed && h('p', { className: 'dwe-preview-hint' }, '第 ' + number + ' 页无法显示'));
+});
+
+function PdfPages({ pdf, initialSize }) {
+  const scroll = useRef(null);
+  const [width, setWidth] = useState(0);
+  const [visible, setVisible] = useState(() => new Set());
+  const [count, setCount] = useState(() => Math.min(pdf.numPages, pageBatch));
+  const [renderZoom, setRenderZoom] = useState(1);
+  usePreviewZoom(scroll, setRenderZoom);
+  const measured = width > 0;
+  useEffect(() => {
+    const viewport = scroll.current;
+    const observer = new ResizeObserver(() => setWidth(Math.max(0, viewport.clientWidth - 16)));
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!measured) return;
+    const viewport = scroll.current;
+    const observer = new IntersectionObserver(entries => {
+      setVisible(current => {
+        const next = new Set(current);
+        for (const entry of entries) {
+          const number = Number(entry.target.dataset.pdfPage);
+          if (!number) continue;
+          if (entry.isIntersecting) next.add(number);
+          else next.delete(number);
+        }
+        return next;
+      });
+      if (entries.some(entry => !entry.target.dataset.pdfPage && entry.isIntersecting)) {
+        setCount(current => Math.min(pdf.numPages, current + pageBatch));
+      }
+    }, { root: viewport, rootMargin: '180px 0px' });
+    for (const node of viewport.children) observer.observe(node);
+    return () => observer.disconnect();
+  }, [count, measured, pdf]);
+
+  return h('div', { className: 'dwe-pdf-scroll', ref: scroll, tabIndex: 0, 'aria-label': '文档预览，共 ' + pdf.numPages + ' 页' },
+    measured && Array.from({ length: count }, (_, index) => h(PdfPage, {
+      key: index + 1, pdf, number: index + 1, initialSize, width, renderZoom, visible: visible.has(index + 1),
+    })),
+    measured && count < pdf.numPages && h('div', { key: 'more', className: 'dwe-pdf-more', 'aria-hidden': true }));
+}
+
+export function PdfPreview({ data }) {
+  const [document, setDocument] = useState(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let canceled = false;
+    let task;
+    async function load() {
+      try {
+        const { getDocument, GlobalWorkerOptions } = await import(asset('build/pdf.min.mjs'));
+        if (canceled) return;
+        GlobalWorkerOptions.workerSrc = asset('build/pdf.worker.min.mjs');
+        task = getDocument({
+          data: data.slice(), cMapPacked: true, useWorkerFetch: false,
+          cMapUrl: asset('cmaps/'), standardFontDataUrl: asset('standard_fonts/'), wasmUrl: asset('wasm/'),
+          enableXfa: false, isEvalSupported: false,
+        });
+        const pdf = await task.promise;
+        if (canceled) return;
+        const first = await pdf.getPage(1);
+        if (!canceled) setDocument({ pdf, initialSize: first.getViewport({ scale: 1 }) });
+      } catch {
+        if (!canceled) setFailed(true);
+      }
+    }
+    void load();
+    return () => {
+      canceled = true;
+      void task?.destroy().catch(() => {});
+    };
+  }, [data]);
+
+  if (failed) return h(PreviewUnavailable);
+  return document ? h(PdfPages, document) : h('p', { className: 'dwe-preview-hint', role: 'status' }, '正在加载文档页面…');
+}

package/src/ui/preview-unavailable.js

@@ -1,6 +1,6 @@
-const h = react.createElement;
-
-export function PreviewUnavailable() {
-  return h('p', { className: 'dwe-preview-hint dwe-preview-unavailable', role: 'status' },
-    '双击文件直接打开文件，或使用右上角的「在 DSH 文档预览中打开」预览此文档');
-}
+const h = react.createElement;
+
+export function PreviewUnavailable() {
+  return h('p', { className: 'dwe-preview-hint dwe-preview-unavailable', role: 'status' },
+    '双击文件直接打开文件，或使用右上角的「在 DSH 文档预览中打开」预览此文档');
+}

package/src/ui/preview-zoom.js

@@ -1,47 +1,47 @@
-const { useEffect } = react;
-
-export function usePreviewZoom(viewport, renderAtZoom) {
-  useEffect(() => {
-    const element = viewport.current;
-    let zoom = 1;
-    let settle;
-
-    function wheel(event) {
-      if (!event.ctrlKey || !event.deltaY) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? element.clientHeight : 1;
-      const delta = Math.max(-100, Math.min(100, event.deltaY * unit));
-      const next = Math.max(0.25, Math.min(6, zoom * Math.exp(-delta * 0.002)));
-      if (next === zoom) return;
-
-      const surface = event.target instanceof Element && event.target.closest('[data-dwe-zoom-surface]');
-      const before = surface ? surface.getBoundingClientRect() : element.getBoundingClientRect();
-      const x = event.clientX - before.left;
-      const y = event.clientY - before.top;
-      const ratio = next / zoom;
-      const { scrollLeft, scrollTop } = element;
-      zoom = next;
-      element.style.setProperty('--dwe-preview-zoom', zoom);
-      if (surface) {
-        const after = surface.getBoundingClientRect();
-        element.scrollLeft += after.left + x * ratio - event.clientX;
-        element.scrollTop += after.top + y * ratio - event.clientY;
-      } else {
-        element.scrollLeft = (scrollLeft + x) * ratio - x;
-        element.scrollTop = (scrollTop + y) * ratio - y;
-      }
-
-      if (renderAtZoom) {
-        clearTimeout(settle);
-        settle = setTimeout(() => renderAtZoom(zoom), 120);
-      }
-    }
-
-    element.addEventListener('wheel', wheel, { passive: false });
-    return () => {
-      element.removeEventListener('wheel', wheel);
-      clearTimeout(settle);
-    };
-  }, [viewport, renderAtZoom]);
-}
+const { useEffect } = react;
+
+export function usePreviewZoom(viewport, renderAtZoom) {
+  useEffect(() => {
+    const element = viewport.current;
+    let zoom = 1;
+    let settle;
+
+    function wheel(event) {
+      if (!event.ctrlKey || !event.deltaY) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? element.clientHeight : 1;
+      const delta = Math.max(-100, Math.min(100, event.deltaY * unit));
+      const next = Math.max(0.25, Math.min(6, zoom * Math.exp(-delta * 0.002)));
+      if (next === zoom) return;
+
+      const surface = event.target instanceof Element && event.target.closest('[data-dwe-zoom-surface]');
+      const before = surface ? surface.getBoundingClientRect() : element.getBoundingClientRect();
+      const x = event.clientX - before.left;
+      const y = event.clientY - before.top;
+      const ratio = next / zoom;
+      const { scrollLeft, scrollTop } = element;
+      zoom = next;
+      element.style.setProperty('--dwe-preview-zoom', zoom);
+      if (surface) {
+        const after = surface.getBoundingClientRect();
+        element.scrollLeft += after.left + x * ratio - event.clientX;
+        element.scrollTop += after.top + y * ratio - event.clientY;
+      } else {
+        element.scrollLeft = (scrollLeft + x) * ratio - x;
+        element.scrollTop = (scrollTop + y) * ratio - y;
+      }
+
+      if (renderAtZoom) {
+        clearTimeout(settle);
+        settle = setTimeout(() => renderAtZoom(zoom), 120);
+      }
+    }
+
+    element.addEventListener('wheel', wheel, { passive: false });
+    return () => {
+      element.removeEventListener('wheel', wheel);
+      clearTimeout(settle);
+    };
+  }, [viewport, renderAtZoom]);
+}

package/src/ui/preview.js

@@ -7,7 +7,7 @@ import { PreviewUnavailable } from './preview-unavailable.js';
 import { PdfPreview } from './pdf-preview.js';
 import { usePreviewZoom } from './preview-zoom.js';
 
-const { createElement: h, useEffect, useRef, useState } = react;
+const { createElement: h, useEffect, useLayoutEffect, useRef, useState } = react;
 const coverActions = {
   [PREVIEW_IDS.archive]: '解压预览',
   [PREVIEW_IDS.model]: '查看模型',
@@ -21,6 +21,14 @@ const coverActions = {
   [PREVIEW_IDS.dfu]: '查看固件',
 };
 
+export function formatSize(bytes) {
+  if (typeof bytes !== 'number') return '—';
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 ** 2) return (bytes / 1024).toFixed(1) + ' KB';
+  if (bytes < 1024 ** 3) return (bytes / 1024 ** 2).toFixed(1) + ' MB';
+  return (bytes / 1024 ** 3).toFixed(1) + ' GB';
+}
+
 export class PreviewBoundary extends react.Component {
   state = { failed: false };
 
@@ -35,6 +43,18 @@ export class PreviewBoundary extends react.Component {
 
 function PreviewCover({ file, root, videoType, label, archive, start }) {
   const [poster, setPoster] = useState(null);
+  const [resolvedSize, setResolvedSize] = useState(undefined);
+  const { absolute, name, size } = file;
+
+  useEffect(() => {
+    if (size !== undefined) return;
+    const controller = new AbortController();
+    void disks.locate(absolute, controller.signal, root).then(result => {
+      if (!controller.signal.aborted) setResolvedSize(result.size);
+    }, () => {});
+    return () => controller.abort();
+  }, [absolute, size, root]);
+
   useEffect(() => {
     if (!videoType) return;
     const controller = new AbortController();
@@ -50,16 +70,22 @@ function PreviewCover({ file, root, videoType, label, archive, start }) {
       h('rect', { x: 5, y: 3, width: 26, height: 30, rx: 5, fill: '#7462c4' }),
       h('path', { d: 'M18 5h3v4h-3v4h3v4h-3v4m-2 0h6v6h-6z', fill: 'none', stroke: '#fff', strokeWidth: 1.6, strokeLinejoin: 'round' }))
     : h(primitives.FileTypeIcon, { path: file.name, size: 36 });
-  return h('div', { className: 'dwe-preview-cover', 'data-poster': Boolean(poster) || undefined },
+  return h('div', {
+    className: 'dwe-preview-cover', 'data-video': Boolean(videoType) || undefined,
+    'data-poster': Boolean(poster) || undefined,
+  },
     poster && h('img', { src: poster, alt: '', draggable: false }),
-    h('div', { className: 'dwe-cover-action' },
-      !videoType && fileIcon,
-      h('button', {
-        type: 'button', className: videoType ? 'dwe-cover-play' : 'dwe-cover-open',
-        title: label, 'aria-label': label, onClick: start,
-      }, videoType ? h('svg', { width: 24, height: 24, viewBox: '0 0 24 24', 'aria-hidden': true },
-        h('path', { d: 'M9 5v14l11-7z', fill: 'currentColor' })) : label)),
-    h('div', { className: 'dwe-cover-file', title: file.name }, file.name));
+    h('div', { className: 'dwe-cover-content' },
+      h('div', { className: 'dwe-cover-action' },
+        !videoType && fileIcon,
+        h('button', {
+          type: 'button', className: videoType ? 'dwe-cover-play' : 'dwe-cover-open',
+          title: label, 'aria-label': label, onClick: start,
+        }, videoType ? h('svg', { width: 24, height: 24, viewBox: '0 0 24 24', 'aria-hidden': true },
+          h('path', { d: 'M9 5v14l11-7z', fill: 'currentColor' })) : label)),
+      h('div', { className: 'dwe-cover-details' },
+        h('div', { className: 'dwe-cover-file', title: name }, name),
+        h('div', { className: 'dwe-cover-size' }, formatSize(size ?? resolvedSize)))));
 }
 
 function ImagePreview({ url, name, onError }) {
@@ -87,6 +113,27 @@ function ImagePreview({ url, name, onError }) {
     }));
 }
 
+function TextPreview({ text, eof, file }) {
+  const content = useRef(null);
+  useLayoutEffect(() => {
+    if (!file.line || !text) return;
+    let offset = 0;
+    for (let line = 1; line < file.line; line++) {
+      const end = text.indexOf('\n', offset);
+      if (end < 0) return;
+      offset = end + 1;
+    }
+    if (offset === text.length) return;
+    const range = document.createRange();
+    range.setStart(content.current.firstChild, offset);
+    range.setEnd(content.current.firstChild, offset + 1);
+    const scroll = content.current.parentElement;
+    scroll.scrollTop += range.getBoundingClientRect().top - scroll.getBoundingClientRect().top - 12;
+  }, [file, text]);
+  return h('pre', { ref: content, className: 'dwe-text' },
+    text || '（空文件）', eof ? '' : '\n\n… 仅显示首页，可在原生预览中继续查看');
+}
+
 export function Preview({ file, root }) {
   const [result, setResult] = useState({ kind: 'loading' });
   const [started, setStarted] = useState(false);
@@ -155,8 +202,7 @@ export function Preview({ file, root }) {
         onError: () => setResult({ kind: 'unavailable' }),
       });
     case 'text':
-      return h('pre', { className: 'dwe-text' },
-        result.text || '（空文件）', result.eof ? '' : '\n\n… 仅显示首页，可在原生预览中继续查看');
+      return h(TextPreview, { text: result.text, eof: result.eof, file });
     case 'unavailable':
       return h(PreviewUnavailable);
     default: