@lijian-ui/dsh-file-manager 0.1.20

package/src/client/preview/PreviewPanel.tsx

@@ -0,0 +1,233 @@
+/**
+ * The preview panel root: tab strip + toolbar + content router, the tab
+ * context menu (close left/right/others/all), the dirty-close confirmation
+ * (the single entry for every batch close — middle-click included), and the
+ * panel collapse button. View mode and split live here so the toolbar and the
+ * content share one source; both reset when the displayed file changes.
+ * @module dsh-filemgr/client/preview/PreviewPanel
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import type { JSX } from 'react'
+import { isEditableType } from '../fileType.ts'
+import { t, format } from '../locales.ts'
+import { useStore } from '../hooks/useStore.ts'
+import type { PanelStores, PreviewTabState } from '../store.ts'
+import { ConfirmDialog, ContextMenu, type MenuState } from '../components/overlay.tsx'
+import { PreviewTabs } from './PreviewTabs.tsx'
+import { PreviewToolbar, downloadTab } from './PreviewToolbar.tsx'
+import { TabContent } from './content.tsx'
+import { findFileReferenceSelection, type FileReferenceSelection } from './selection.ts'
+import previewCss from '../styles/preview.module.css'
+
+/** Coords + a fully-resolved file-reference payload (path + line range). */
+interface AddToChatState {
+  x: number
+  y: number
+  ref: FileReferenceSelection
+}
+
+/** The preview panel (mounted in the preview grid column). */
+export function PreviewPanel({ stores, onAddFileReference }: { stores: PanelStores; onAddFileReference: (selection: FileReferenceSelection) => boolean }): JSX.Element {
+  const preview = stores.preview
+  const state = useStore(preview)
+  const layoutState = useStore(stores.layout)
+  const maximizedPreview = layoutState.maximized === 'preview'
+  const [menu, setMenu] = useState<MenuState | null>(null)
+  const [closingIds, setClosingIds] = useState<string[] | null>(null)
+  const [viewMode, setViewMode] = useState<'source' | 'preview'>('preview')
+  const [split, setSplit] = useState(false)
+  const lastDirtyCheck = useRef<Set<string>>(new Set())
+  const panelRef = useRef<HTMLDivElement | null>(null)
+
+  /** The "add selection to the composer" floating action. */
+  const [addToChat, setAddToChat] = useState<AddToChatState | null>(null)
+
+  const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId) ?? null
+
+  // View mode resets to preview when the displayed FILE changes (path+type).
+  const identity = activeTab === null ? '' : `${activeTab.path}\u0000${activeTab.contentType}`
+  useEffect(() => {
+    setViewMode('preview')
+    setSplit(false)
+  }, [identity])
+
+  // Selection → "添加到对话" floating action: a non-collapsed selection inside
+  // a file-backed (code/text) preview is translated into a file reference
+  // (path + start/end line) and surfaces a button under the selection.
+  useEffect(() => {
+    const onSelectionChange = (): void => {
+      const selection = window.getSelection()
+      if (selection === null || selection.isCollapsed || selection.rangeCount === 0) {
+        setAddToChat(null)
+        return
+      }
+      const node = selection.anchorNode
+      const el = node instanceof Element ? node : node?.parentElement
+      if (el === undefined || panelRef.current === null || !panelRef.current.contains(el)) {
+        setAddToChat(null)
+        return
+      }
+      const ref = findFileReferenceSelection(el, selection, activeTab)
+      if (ref === null) {
+        setAddToChat(null)
+        return
+      }
+      const rect = selection.getRangeAt(0).getBoundingClientRect()
+      setAddToChat({ x: rect.left, y: rect.bottom + 8, ref })
+    }
+    const onPointerDown = (event: MouseEvent): void => {
+      if (addToChat === null) return
+      const target = event.target as Element
+      if (target.closest(`.${previewCss.addToChat}`) === null) setAddToChat(null)
+    }
+    document.addEventListener('selectionchange', onSelectionChange)
+    document.addEventListener('mousedown', onPointerDown)
+    return () => {
+      document.removeEventListener('selectionchange', onSelectionChange)
+      document.removeEventListener('mousedown', onPointerDown)
+    }
+  }, [addToChat, activeTab])
+
+  const handleAddToChat = (): void => {
+    if (addToChat === null) return
+    if (onAddFileReference(addToChat.ref)) setAddToChat(null)
+  }
+
+  /** Close a batch; dirty tabs route through the confirmation first. */
+  const requestClose = (ids: string[]): void => {
+    const dirty = state.tabs.filter((tab) => ids.includes(tab.id) && tab.dirty)
+    if (dirty.length === 0) {
+      preview.closeTabs(ids)
+      return
+    }
+    lastDirtyCheck.current = new Set(dirty.map((tab) => tab.id))
+    setClosingIds(ids)
+  }
+
+  const closeMenuFor = (event: React.MouseEvent, tab: PreviewTabState): void => {
+    event.preventDefault()
+    event.stopPropagation()
+    const index = state.tabs.findIndex((item) => item.id === tab.id)
+    setMenu({
+      x: event.clientX,
+      y: event.clientY,
+      entries: [
+        {
+          key: 'close-left',
+          label: t('preview.closeLeft'),
+          disabled: index <= 0,
+          onSelect: () => requestClose(state.tabs.slice(0, index).map((item) => item.id)),
+        },
+        {
+          key: 'close-right',
+          label: t('preview.closeRight'),
+          disabled: index >= state.tabs.length - 1,
+          onSelect: () => requestClose(state.tabs.slice(index + 1).map((item) => item.id)),
+        },
+        { key: 'sep-1', label: '---', onSelect: () => {} },
+        {
+          key: 'close-others',
+          label: t('preview.closeOthers'),
+          disabled: state.tabs.length <= 1,
+          onSelect: () => requestClose(state.tabs.filter((item) => item.id !== tab.id).map((item) => item.id)),
+        },
+        {
+          key: 'close-all',
+          label: t('preview.closeAll'),
+          onSelect: () => requestClose(state.tabs.map((item) => item.id)),
+        },
+      ],
+    })
+  }
+
+  /** A fresh url tab (empty address; the viewer owns the input). */
+  const newUrlTab = (): void => {
+    const stamp = Date.now()
+    const tab: PreviewTabState = {
+      id: `url:${stamp}`,
+      title: 'new tab',
+      root: state.root,
+      path: `url:${stamp}`,
+      contentType: 'url',
+      content: '',
+      dirty: false,
+      updated: false,
+      loading: false,
+      truncated: false,
+      error: null,
+      savedAt: Date.now(),
+    }
+    preview.update((prev) => ({ ...prev, open: true, tabs: [...prev.tabs, tab], activeTabId: tab.id }))
+  }
+
+  return (
+    <div ref={panelRef} className={`filemgr-root ${previewCss.panel}`}>
+      <PreviewTabs
+        tabs={state.tabs}
+        activeTabId={state.activeTabId}
+        onSwitch={(id) => preview.switchTab(id)}
+        onClose={(id) => requestClose([id])}
+        onContextMenu={closeMenuFor}
+        onNewUrlTab={newUrlTab}
+        onClosePanel={() => preview.setOpen(false)}
+        maximized={maximizedPreview}
+        onMaximize={() => {
+          stores.layout.update((prev) => ({ ...prev, maximized: maximizedPreview ? null : 'preview' }))
+        }}
+      />
+      {activeTab !== null && (
+        <>
+          <PreviewToolbar
+            contentType={activeTab.contentType}
+            hasContent={activeTab.content !== null}
+            loading={activeTab.loading}
+            dirty={activeTab.dirty}
+            updated={activeTab.updated}
+            viewMode={viewMode}
+            canToggleView={activeTab.contentType === 'markdown' || activeTab.contentType === 'html'}
+            split={split}
+            canSplit={isEditableType(activeTab.contentType) && activeTab.content !== null}
+            onViewModeChange={setViewMode}
+            onSplitChange={setSplit}
+            onRefresh={() => void preview.reloadTab(activeTab.id)}
+            onSave={() => void preview.saveTab(activeTab.id)}
+            onDownload={() => downloadTab(activeTab)}
+          />
+          <TabContent
+            tab={activeTab}
+            viewMode={viewMode}
+            split={split}
+            onContentChange={(content) => preview.updateContent(activeTab.id, content)}
+            onSave={() => void preview.saveTab(activeTab.id)}
+          />
+        </>
+      )}
+      {menu !== null && <ContextMenu state={menu} onClose={() => setMenu(null)} />}
+      {addToChat !== null && (
+        <div
+          className={previewCss.addToChat}
+          style={{ left: addToChat.x, top: addToChat.y }}
+          onClick={handleAddToChat}
+          role="button"
+          tabIndex={-1}
+        >
+          添加到对话
+        </div>
+      )}
+      {closingIds !== null && (
+        <ConfirmDialog
+          title={t('preview.closeConfirmTitle')}
+          body={format(t('preview.closeConfirmBody'), { count: lastDirtyCheck.current.size })}
+          confirmLabel={t('common.close')}
+          danger
+          onConfirm={() => {
+            preview.closeTabs(closingIds)
+            setClosingIds(null)
+          }}
+          onCancel={() => setClosingIds(null)}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/preview/PreviewTabs.tsx

@@ -0,0 +1,159 @@
+/**
+ * The preview tab strip: 36px bar, tabs capped at 180px (padding 0 10, gap 6,
+ * 12px title), dirty dot (6px, primary), close glyph (16px box, 12px icon),
+ * middle-click close, right-click menu (close left/right/others/all), the
+ * 32px left/right overflow fade indicators (ResizeObserver + scroll), the
+ * new-URL-tab plus, and the panel collapse button.
+ * @module dsh-filemgr/client/preview/PreviewTabs
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import type { JSX } from 'react'
+import type { PreviewTabState } from '../store.ts'
+import { t } from '../locales.ts'
+import { CloseIcon, MaximizeIcon, PlusIcon, RestoreIcon, ShrinkIcon } from '../components/icons.tsx'
+import { activateOnKey } from '../components/a11y.ts'
+import previewCss from '../styles/preview.module.css'
+
+/** Tab width cap (FileManager measured). */
+export const MAX_TAB_WIDTH_PX = 180
+/** Fade indicator width. */
+const FADE_WIDTH = 32
+
+/** Left/right overflow state. */
+export interface TabFadeState {
+  left: boolean
+  right: boolean
+}
+
+/** The tab strip. */
+export function PreviewTabs({
+  tabs,
+  activeTabId,
+  onSwitch,
+  onClose,
+  onContextMenu,
+  onNewUrlTab,
+  onClosePanel,
+  maximized,
+  onMaximize,
+}: {
+  tabs: PreviewTabState[]
+  activeTabId: string | null
+  onSwitch: (id: string) => void
+  onClose: (id: string) => void
+  onContextMenu: (event: React.MouseEvent, tab: PreviewTabState) => void
+  onNewUrlTab: () => void
+  onClosePanel: () => void
+  maximized: boolean
+  onMaximize: () => void
+}): JSX.Element {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [fade, setFade] = useState<TabFadeState>({ left: false, right: false })
+
+  // Overflow fades: ResizeObserver + scroll listener, setState only on change.
+  useEffect(() => {
+    const el = scrollRef.current
+    if (el === null) return
+    const update = (): void => {
+      const next = {
+        left: el.scrollLeft > 1,
+        right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
+      }
+      setFade((prev) => (prev.left === next.left && prev.right === next.right ? prev : next))
+    }
+    const observer = new ResizeObserver(update)
+    observer.observe(el)
+    el.addEventListener('scroll', update, { passive: true })
+    window.addEventListener('resize', update)
+    update()
+    return () => {
+      observer.disconnect()
+      el.removeEventListener('scroll', update)
+      window.removeEventListener('resize', update)
+    }
+  }, [tabs.length])
+
+  return (
+    <div className={previewCss.tabBar}>
+      <div ref={scrollRef} className={previewCss.tabScroll}>
+        {tabs.length === 0 && <div className={previewCss.noTabs}>{t('preview.noTabs')}</div>}
+        {tabs.map((tab) => (
+          <div
+            key={tab.id}
+            className={`${previewCss.tab}${tab.id === activeTabId ? ` ${previewCss.tabActive}` : ` ${previewCss.tabInactive}`}`}
+            style={{ maxWidth: MAX_TAB_WIDTH_PX }}
+            role="button"
+            tabIndex={0}
+            title={tab.path}
+            aria-label={tab.title}
+            onClick={() => onSwitch(tab.id)}
+            onKeyDown={activateOnKey(() => { onSwitch(tab.id) })}
+            onContextMenu={(event) => onContextMenu(event, tab)}
+            onAuxClick={(event) => {
+              if (event.button !== 1) return
+              event.preventDefault()
+              event.stopPropagation()
+              onClose(tab.id)
+            }}
+          >
+            <span className={previewCss.tabTitle} title={tab.path}>{tab.title}</span>
+            {tab.dirty && <span className={previewCss.tabDotDirty} title={t('preview.dirty')} />}
+            <span
+              className={previewCss.tabClose}
+              role="button"
+              tabIndex={0}
+              title={t('common.close')}
+              aria-label={t('common.close')}
+              onClick={(event) => {
+                event.stopPropagation()
+                onClose(tab.id)
+              }}
+              onKeyDown={activateOnKey(() => { onClose(tab.id) })}
+            >
+              <CloseIcon size={12} />
+            </span>
+          </div>
+        ))}
+        <div
+          className={previewCss.tabPlus}
+          role="button"
+          tabIndex={0}
+          onClick={onNewUrlTab}
+          onKeyDown={activateOnKey(onNewUrlTab)}
+          title={t('preview.newUrlTab')}
+        >
+          <PlusIcon size={14} />
+        </div>
+      </div>
+      <div className={previewCss.tabBarRight}>
+        {/* Maximize/restore (issue #315): the layout controller owns the grid
+            takeover, Esc and the restore path. */}
+        <div
+          className={previewCss.panelMaximize}
+          role="button"
+          tabIndex={0}
+          onClick={onMaximize}
+          onKeyDown={activateOnKey(onMaximize)}
+          title={t(maximized ? 'preview.restore' : 'preview.maximize')}
+          aria-label={t(maximized ? 'preview.restore' : 'preview.maximize')}
+        >
+          {maximized ? <RestoreIcon size={14} /> : <MaximizeIcon size={14} />}
+        </div>
+        <div
+          className={previewCss.panelCollapse}
+          role="button"
+          tabIndex={0}
+          onClick={onClosePanel}
+          onKeyDown={activateOnKey(onClosePanel)}
+          title={t('preview.collapsePanel')}
+          aria-label={t('preview.collapsePanel')}
+        >
+          <ShrinkIcon size={14} />
+        </div>
+      </div>
+      {fade.left && <div className={previewCss.tabFadeLeft} style={{ width: FADE_WIDTH }} />}
+      {fade.right && <div className={previewCss.tabFadeRight} style={{ width: FADE_WIDTH }} />}
+    </div>
+  )
+}

package/src/client/preview/PreviewToolbar.tsx

@@ -0,0 +1,160 @@
+/**
+ * The preview toolbar: 32px bar (padding 0 10). Left: source/preview toggle
+ * (markdown/html), split-screen toggle (editable types), download. Right: the
+ * refresh button (4-state: hidden/disabled/idle/updated — never a dead
+ * button) and save (editable + dirty, Cmd/Ctrl+S too).
+ * @module dsh-filemgr/client/preview/PreviewToolbar
+ */
+
+import type { JSX } from 'react'
+import type { PreviewContentType } from '../../core/types.ts'
+import { isEditableType } from '../fileType.ts'
+import { t } from '../locales.ts'
+import { CodeIcon, DownloadIcon, EyeIcon, RefreshIcon, SaveIcon, SplitIcon } from '../components/icons.tsx'
+import previewCss from '../styles/preview.module.css'
+
+/** Refresh button states (FileManager's 4-state machine). */
+export type RefreshState = 'hidden' | 'disabled' | 'idle' | 'updated'
+
+/** Derive the refresh state for one tab. */
+export function refreshStateFor(
+  contentType: PreviewContentType,
+  hasContent: boolean,
+  loading: boolean,
+  updated: boolean,
+): RefreshState {
+  // URL tabs reload their frame (cross-origin documents can only be
+  // re-navigated to the tab's address, never reloaded in place).
+  if (contentType === 'url') return 'idle'
+  if (contentType === 'word' || contentType === 'excel'
+    || contentType === 'ppt' || contentType === 'unsupported' || contentType === 'image') {
+    return 'hidden'
+  }
+  if (!hasContent || loading) return 'disabled'
+  return updated ? 'updated' : 'idle'
+}
+
+/** Download the current tab's content as a file. */
+export function downloadTab(tab: { title: string; content: string | null; contentType: PreviewContentType }): void {
+  if (tab.content === null) return
+  const isDataUrl = tab.content.startsWith('data:')
+  // Pdf tabs hold a same-origin raw-route URL: anchor it directly (the
+  // download attribute forces a save), no blob copy needed.
+  const isRouteUrl = tab.content.startsWith('/filemgr/raw')
+  const href = isDataUrl || isRouteUrl
+    ? tab.content
+    : URL.createObjectURL(new Blob([tab.content], { type: 'text/plain;charset=utf-8' }))
+  const anchor = document.createElement('a')
+  anchor.href = href
+  anchor.download = tab.title
+  anchor.style.display = 'none'
+  document.body.appendChild(anchor)
+  anchor.click()
+  anchor.remove()
+  if (!isDataUrl && !isRouteUrl) setTimeout(() => URL.revokeObjectURL(href), 10_000)
+}
+
+/** The toolbar. */
+export function PreviewToolbar({
+  contentType,
+  hasContent,
+  loading,
+  dirty,
+  updated,
+  viewMode,
+  canToggleView,
+  split,
+  canSplit,
+  onViewModeChange,
+  onSplitChange,
+  onRefresh,
+  onSave,
+  onDownload,
+}: {
+  contentType: PreviewContentType
+  hasContent: boolean
+  loading: boolean
+  dirty: boolean
+  updated: boolean
+  viewMode: 'source' | 'preview'
+  canToggleView: boolean
+  split: boolean
+  canSplit: boolean
+  onViewModeChange: (mode: 'source' | 'preview') => void
+  onSplitChange: (split: boolean) => void
+  onRefresh: () => void
+  onSave: () => void
+  onDownload: () => void
+}): JSX.Element {
+  const refreshState = refreshStateFor(contentType, hasContent, loading, updated)
+  const editable = isEditableType(contentType)
+
+  return (
+    <div className={previewCss.toolbar}>
+      {canToggleView && (
+        <>
+          <button
+            type="button"
+            className={`${previewCss.toolbarBtn}${viewMode === 'source' ? ` ${previewCss.toolbarBtnActive}` : ''}`}
+            onClick={() => onViewModeChange('source')}
+          >
+            <CodeIcon size={13} />
+            {t('preview.source')}
+          </button>
+          <button
+            type="button"
+            className={`${previewCss.toolbarBtn}${viewMode === 'preview' ? ` ${previewCss.toolbarBtnActive}` : ''}`}
+            onClick={() => onViewModeChange('preview')}
+          >
+            <EyeIcon size={13} />
+            {t('preview.preview')}
+          </button>
+        </>
+      )}
+      {canSplit && (
+        <button
+          type="button"
+          className={`${previewCss.toolbarBtn}${split ? ` ${previewCss.toolbarBtnActive}` : ''}`}
+          title={t('preview.split')}
+          onClick={() => onSplitChange(!split)}
+        >
+          <SplitIcon size={13} />
+          {t('preview.split')}
+        </button>
+      )}
+      <button
+        type="button"
+        className={previewCss.toolbarBtn}
+        title={t('preview.download')}
+        disabled={!hasContent}
+        onClick={onDownload}
+      >
+        <DownloadIcon size={13} />
+      </button>
+      <span className={previewCss.toolbarSpacer} />
+      {refreshState !== 'hidden' && (
+        <button
+          type="button"
+          className={`${previewCss.toolbarBtn}${refreshState === 'updated' ? ` ${previewCss.toolbarBtnWarn}` : ''}`}
+          title={refreshState === 'updated' ? t('preview.refresh.updated') : t('preview.refresh')}
+          disabled={refreshState === 'disabled'}
+          onClick={onRefresh}
+        >
+          <RefreshIcon size={13} />
+          {t('preview.refresh')}
+        </button>
+      )}
+      {editable && dirty && (
+        <button
+          type="button"
+          className={previewCss.toolbarBtn}
+          onClick={onSave}
+          disabled={loading}
+        >
+          <SaveIcon size={13} />
+          {t('preview.save')}
+        </button>
+      )}
+    </div>
+  )
+}