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

package/src/client/picker/file-picker.ts

@@ -1,86 +1,86 @@
-/**
- * File-picker bridge: the single channel between the '@' trigger source
- * (which asks for a directory) and the tree-browser modal (which renders it).
- *
- * Why a modal and not the inline trigger menu: the shell's trigger menu is a
- * flat candidate list with no tree affordance — picking a directory cannot
- * expand it (the menu closes on pick, and the shell only re-runs trigger
- * detection on keyboard input, not on programmatic draft writes). The modal
- * is the pi-desktop-style answer: a real directory tree with lazy expansion,
- * a search box, and one-click insertion.
- *
- * The bridge is framework-free (subscribe/getSnapshot/open/close) so the
- * trigger source can open the picker without touching React; the modal host
- * component subscribes and renders. Insertion happens through the
- * conversation input shell, replacing the exact `@` token span the picker
- * was opened from.
- * @module dsh-filemgr/client/picker/file-picker
- */
-
-import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
-
-/** The `@` token span captured when the picker opened (replace-on-insert). */
-export interface PickSpan {
-  /** Start offset of the `@` token in the draft. */
-  start: number
-  /** End offset (the caret). */
-  end: number
-}
-
-/** What the picker is currently anchored to. */
-export interface PickRequest {
-  /** Session whose draft the picker will edit. */
-  sessionId: SessionId
-  /** Project root (canonical cwd) everything is relative to. */
-  root: string
-  /** Directory to start browsing at ('' = root). */
-  initialDir: string
-  /** The `@` token span to replace on insert. */
-  span: PickSpan
-}
-
-/** The bridge's public snapshot. */
-export interface PickState {
-  open: boolean
-  req: PickRequest | null
-}
-
-/** Minimal listener shape. */
-type Listener = (state: PickState) => void
-
-/** Framework-free singleton store backing the modal. */
-class FilePickerBridge {
-  private state: PickState = { open: false, req: null }
-  private readonly listeners = new Set<Listener>()
-
-  /** Current snapshot (stable reference until the next open/close). */
-  getSnapshot(): PickState {
-    return this.state
-  }
-
-  /** Subscribe to open/close transitions. */
-  subscribe(listener: Listener): () => void {
-    this.listeners.add(listener)
-    return () => { this.listeners.delete(listener) }
-  }
-
-  /** Open the picker anchored to one `@` token. */
-  open(req: PickRequest): void {
-    this.state = { open: true, req }
-    this.emit()
-  }
-
-  /** Close the picker without inserting anything. */
-  close(): void {
-    if (!this.state.open) return
-    this.state = { open: false, req: null }
-    this.emit()
-  }
-
-  private emit(): void {
-    for (const listener of this.listeners) listener(this.state)
-  }
-}
-
-/** The shared singleton instance. */
-export const filePicker = new FilePickerBridge()
+/**
+ * File-picker bridge: the single channel between the '@' trigger source
+ * (which asks for a directory) and the tree-browser modal (which renders it).
+ *
+ * Why a modal and not the inline trigger menu: the shell's trigger menu is a
+ * flat candidate list with no tree affordance — picking a directory cannot
+ * expand it (the menu closes on pick, and the shell only re-runs trigger
+ * detection on keyboard input, not on programmatic draft writes). The modal
+ * is the pi-desktop-style answer: a real directory tree with lazy expansion,
+ * a search box, and one-click insertion.
+ *
+ * The bridge is framework-free (subscribe/getSnapshot/open/close) so the
+ * trigger source can open the picker without touching React; the modal host
+ * component subscribes and renders. Insertion happens through the
+ * conversation input shell, replacing the exact `@` token span the picker
+ * was opened from.
+ * @module dsh-filemgr/client/picker/file-picker
+ */
+
+import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+
+/** The `@` token span captured when the picker opened (replace-on-insert). */
+export interface PickSpan {
+  /** Start offset of the `@` token in the draft. */
+  start: number
+  /** End offset (the caret). */
+  end: number
+}
+
+/** What the picker is currently anchored to. */
+export interface PickRequest {
+  /** Session whose draft the picker will edit. */
+  sessionId: SessionId
+  /** Project root (canonical cwd) everything is relative to. */
+  root: string
+  /** Directory to start browsing at ('' = root). */
+  initialDir: string
+  /** The `@` token span to replace on insert. */
+  span: PickSpan
+}
+
+/** The bridge's public snapshot. */
+export interface PickState {
+  open: boolean
+  req: PickRequest | null
+}
+
+/** Minimal listener shape. */
+type Listener = (state: PickState) => void
+
+/** Framework-free singleton store backing the modal. */
+class FilePickerBridge {
+  private state: PickState = { open: false, req: null }
+  private readonly listeners = new Set<Listener>()
+
+  /** Current snapshot (stable reference until the next open/close). */
+  getSnapshot(): PickState {
+    return this.state
+  }
+
+  /** Subscribe to open/close transitions. */
+  subscribe(listener: Listener): () => void {
+    this.listeners.add(listener)
+    return () => { this.listeners.delete(listener) }
+  }
+
+  /** Open the picker anchored to one `@` token. */
+  open(req: PickRequest): void {
+    this.state = { open: true, req }
+    this.emit()
+  }
+
+  /** Close the picker without inserting anything. */
+  close(): void {
+    if (!this.state.open) return
+    this.state = { open: false, req: null }
+    this.emit()
+  }
+
+  private emit(): void {
+    for (const listener of this.listeners) listener(this.state)
+  }
+}
+
+/** The shared singleton instance. */
+export const filePicker = new FilePickerBridge()

package/src/client/preview/PreviewPanel.tsx

@@ -28,7 +28,11 @@ interface AddToChatState {
 }
 
 /** The preview panel (mounted in the preview grid column). */
-export function PreviewPanel({ stores, onAddFileReference }: { stores: PanelStores; onAddFileReference: (selection: FileReferenceSelection) => boolean }): JSX.Element {
+export function PreviewPanel({ stores, onAddFileReference, onInsertSheetReference }: {
+  stores: PanelStores
+  onAddFileReference: (selection: FileReferenceSelection) => boolean
+  onInsertSheetReference: (path: string, sheetName: string, range: string) => boolean
+}): JSX.Element {
   const preview = stores.preview
   const state = useStore(preview)
   const layoutState = useStore(stores.layout)
@@ -70,6 +74,7 @@ export function PreviewPanel({ stores, onAddFileReference }: { stores: PanelStor
       }
       const ref = findFileReferenceSelection(el, selection, activeTab)
       if (ref === null) {
+
         setAddToChat(null)
         return
       }
@@ -188,6 +193,7 @@ export function PreviewPanel({ stores, onAddFileReference }: { stores: PanelStor
             canToggleView={activeTab.contentType === 'markdown' || activeTab.contentType === 'html'}
             split={split}
             canSplit={isEditableType(activeTab.contentType) && activeTab.content !== null}
+            editable={isEditableType(activeTab.contentType)}
             onViewModeChange={setViewMode}
             onSplitChange={setSplit}
             onRefresh={() => void preview.reloadTab(activeTab.id)}
@@ -198,6 +204,7 @@ export function PreviewPanel({ stores, onAddFileReference }: { stores: PanelStor
             tab={activeTab}
             viewMode={viewMode}
             split={split}
+            onInsertSheetReference={onInsertSheetReference}
             onContentChange={(content) => preview.updateContent(activeTab.id, content)}
             onSave={() => void preview.saveTab(activeTab.id)}
           />

package/src/client/preview/PreviewTabs.tsx

@@ -1,159 +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>
-  )
-}
+/**
+ * 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

@@ -8,7 +8,6 @@
 
 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'
@@ -65,6 +64,7 @@ export function PreviewToolbar({
   canToggleView,
   split,
   canSplit,
+  editable,
   onViewModeChange,
   onSplitChange,
   onRefresh,
@@ -80,6 +80,8 @@ export function PreviewToolbar({
   canToggleView: boolean
   split: boolean
   canSplit: boolean
+  /** The tab can be edited and saved back (text kinds + editable .xlsx). */
+  editable: boolean
   onViewModeChange: (mode: 'source' | 'preview') => void
   onSplitChange: (split: boolean) => void
   onRefresh: () => void
@@ -87,7 +89,6 @@ export function PreviewToolbar({
   onDownload: () => void
 }): JSX.Element {
   const refreshState = refreshStateFor(contentType, hasContent, loading, updated)
-  const editable = isEditableType(contentType)
 
   return (
     <div className={previewCss.toolbar}>

package/src/client/preview/content.tsx

@@ -23,6 +23,7 @@ import {
   watchShellTheme,
 } from './mermaid.ts'
 import previewCss from '../styles/preview.module.css'
+import { OfficeViewer } from './office.tsx'
 
 /** Split-ratio persistence key (FileManager contract). */
 export const KEY_SPLIT_RATIO = 'preview-panel-split-ratio'
@@ -32,12 +33,15 @@ export function TabContent({
   tab,
   viewMode,
   split,
+  onInsertSheetReference,
   onContentChange,
   onSave,
 }: {
   tab: PreviewTabState
   viewMode: 'source' | 'preview'
   split: boolean
+  /** Insert a 文件!Sheet!Range chip from an Excel selection. */
+  onInsertSheetReference: (path: string, sheetName: string, range: string) => boolean
   onContentChange: (content: string) => void
   onSave: () => void
 }): JSX.Element {
@@ -93,9 +97,10 @@ export function TabContent({
       )}
       {tab.contentType === 'pdf' && tab.content !== null && <PdfViewer dataUrl={tab.content} title={tab.title} />}
       {tab.contentType === 'url' && <UrlViewer tab={tab} />}
-      {(tab.contentType === 'word' || tab.contentType === 'excel' || tab.contentType === 'ppt' || tab.contentType === 'unsupported') && (
-        <UnsupportedViewer tab={tab} />
+      {(tab.contentType === 'word' || tab.contentType === 'excel' || tab.contentType === 'ppt') && tab.content !== null && (
+        <OfficeViewer key={tab.id} tab={tab} onInsertSheetReference={onInsertSheetReference} />
       )}
+      {tab.contentType === 'unsupported' && <UnsupportedViewer tab={tab} />}
       {tab.content === null && !tab.loading && (
         <div className={previewCss.placeholder}>
           <div className={previewCss.placeholderTitle}>{tab.title}</div>