feat: 文件预览(MD渲染/TXT/PDF/图片 + 标签去重) + 预设3改左二右一对话 + 服务端MIME补pdf/markdown

01_content/src/client/index.tsx

@@ -72,7 +72,7 @@ const OVER_SIDE_PX = 80
 const PRESET_DEFS = [
   { id: '2h', leftCount: 0, topCount: 0, contentCount: 1, chatFull: false },
   { id: '3h', leftCount: 0, topCount: 0, contentCount: 2, chatFull: false },
-  { id: 'l2', leftCount: 1, topCount: 1, contentCount: 0, chatFull: false },
+  { id: 'l2', leftCount: 0, topCount: 1, contentCount: 1, chatFull: true },
   { id: 't2', leftCount: 0, topCount: 1, contentCount: 1, chatFull: false },
   { id: 'grid', leftCount: 0, topCount: 2, contentCount: 1, chatFull: false },
   { id: 't3', leftCount: 0, topCount: 1, contentCount: 2, chatFull: true },
@@ -153,13 +153,14 @@ function presetThumb(defId: string) {
     )
   }
   if (defId === 'l2') {
+    // 左二右一：左侧上下两个内容窗，右侧整列对话（💬）
     return (
       <span className="dsh-wt_thumb dsh-wt_thumbCols">
-        <span className="dsh-wt_thumbCol">{cell(false, 'a')}</span>
         <span className="dsh-wt_thumbCol">
+          <span className="dsh-wt_thumbRow">{cell(false, 'a')}</span>
           <span className="dsh-wt_thumbRow">{cell(false, 'b')}</span>
-          <span className="dsh-wt_thumbRow">{cell(true, 'c')}</span>
         </span>
+        <span className="dsh-wt_thumbCol">{cell(true, 'c')}</span>
       </span>
     )
   }

01_content/src/client/locales.ts

@@ -61,7 +61,9 @@ export const zh = {
   'pane.open': '打开',
   'pane.wip': '开发中（后续版本接入）',
   'pane.explorerNoCwd': '当前会话没有工作目录',
-  'pane.openLater': '文件打开将在后续版本支持',
+  'pane.openLater': '该类型暂不支持预览',
+  'file.loading': '加载中…',
+  'file.fail': '文件读取失败',
   'pane.gitNotRepo': '当前目录不是 git 仓库',
   'pane.gitClean': '工作区干净',
   'pane.jobsEmpty': '当前会话暂无后台任务',
@@ -137,7 +139,9 @@ export const en = {
   'pane.open': 'Open',
   'pane.wip': 'Coming in a later version',
   'pane.explorerNoCwd': 'No working directory for the current session',
-  'pane.openLater': 'Opening files comes in a later version',
+  'pane.openLater': 'Preview not supported for this type',
+  'file.loading': 'Loading…',
+  'file.fail': 'Failed to read file',
   'pane.gitNotRepo': 'Not a git repository',
   'pane.gitClean': 'Working tree clean',
   'pane.jobsEmpty': 'No background jobs in the current session',

01_content/src/client/split.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Terminal } from 'xterm'
 import 'xterm/css/xterm.css'
+import MarkdownIt from 'markdown-it'
 
 /**
  * dsh-worktable 乐高式工作区 M1：通用分栏引擎（PRD §13）。
@@ -17,6 +18,7 @@ export type BuiltinType = 'browser' | 'explorer' | 'scm' | 'tasks' | 'terminal'
 export type SplitContent =
   | { kind: 'iframe'; url: string }
   | { kind: 'builtin'; type: BuiltinType }
+  | { kind: 'file'; path: string }
 
 /** 一个内容标签页 */
 export type PaneTab = { id: string; title: string; content: SplitContent }
@@ -125,6 +127,7 @@ const BUILTIN_LABEL_KEYS: Record<BuiltinType, string> = {
 
 function tabTitleOf(content: SplitContent): string {
   if (content.kind === 'builtin') return T(BUILTIN_LABEL_KEYS[content.type])
+  if (content.kind === 'file') return basenameOf(content.path)
   try {
     const u = new URL(content.url)
     return u.hostname || content.url
@@ -133,6 +136,20 @@ function tabTitleOf(content: SplitContent): string {
   }
 }
 
+/** 取路径最后一段作为标签标题 */
+function basenameOf(p: string): string {
+  const parts = String(p).replace(/[\\/]+$/, '').split(/[\\/]/)
+  return parts[parts.length - 1] || String(p)
+}
+
+/** 内容同一性（openTab 去重：同窗内同内容只保留一个标签，再次打开切过去） */
+function sameContent(a: SplitContent, b: SplitContent): boolean {
+  if (a.kind === 'iframe' && b.kind === 'iframe') return a.url === b.url
+  if (a.kind === 'file' && b.kind === 'file') return a.path === b.path
+  if (a.kind === 'builtin' && b.kind === 'builtin') return a.type === b.type
+  return false
+}
+
 /** 分栏 UI 文案提供者（由工作台注入 locale t） */
 let uiT: ((key: string) => string) | null = null
 export function setSplitT(fn: ((key: string) => string) | null) {
@@ -546,6 +563,9 @@ export const splitStore: SplitState = {
     if (!spec) return
     const mutate = (pane: SplitPane): SplitPane => {
       const tabs = [...(pane.tabs ?? [])]
+      // 去重：同内容已有标签 → 直接激活
+      const existing = tabs.findIndex((t) => sameContent(t.content, content))
+      if (existing >= 0) return { ...pane, content: null, tabs, active: existing }
       const tab: PaneTab = { id: 't' + Date.now().toString(36), title: tabTitleOf(content), content }
       tabs.push(tab)
       return { ...pane, content: null, tabs, active: tabs.length - 1 }
@@ -910,6 +930,8 @@ function ExplorerPane(props: { row: PaneRow; index: number }) {
               if (e.isDir) { toggle(e.path); return }
               if (/\.html?$/i.test(e.name)) {
                 splitStore.openTab(props.row, props.index, { kind: 'iframe', url: '/api/worktable/file?path=' + encodeURIComponent(e.path) })
+              } else if (/\.(md|markdown|mdown|txt|log|pdf|png|jpe?g|gif|webp|svg|bmp|ico)$/i.test(e.name)) {
+                splitStore.openTab(props.row, props.index, { kind: 'file', path: e.path })
               } else {
                 setError(T('pane.openLater'))
               }
@@ -1070,12 +1092,80 @@ function TerminalPane() {
   return <div ref={hostRef} className="dsh-wt_termHost" />
 }
 
+const mdRenderer = new MarkdownIt({ linkify: true })
+
+const IMAGE_EXTS = /[.](png|jpe?g|gif|webp|svg|bmp|ico)$/i
+const MD_EXTS = /[.](md|markdown|mdown)$/i
+
+/** 本地文件预览：PDF 走原生 iframe、图片居中展示、MD 渲染预览、其余按纯文本 */
+function FileViewer(props: { path: string }) {
+  const ext = (props.path.split('.').pop() || '').toLowerCase()
+  const fileUrl = '/api/worktable/file?path=' + encodeURIComponent(props.path)
+  if (ext === 'pdf') {
+    return <iframe className="dsh-wt_paneFrame" src={fileUrl} title={basenameOf(props.path)} />
+  }
+  if (IMAGE_EXTS.test('.' + ext)) {
+    return (
+      <div className="dsh-wt_imgView">
+        <img src={fileUrl} alt={basenameOf(props.path)} />
+      </div>
+    )
+  }
+  return <TextViewer path={props.path} fileUrl={fileUrl} isMd={MD_EXTS.test('.' + ext)} />
+}
+
+/** MD/TXT 文本预览（fetch 原文 → MD 渲染或 <pre> 等宽展示） */
+function TextViewer(props: { path: string; fileUrl: string; isMd: boolean }) {
+  const [text, setText] = useState<string | null>(null)
+  const [error, setError] = useState('')
+  useEffect(() => {
+    let dead = false
+    setText(null)
+    setError('')
+    fetch(props.fileUrl)
+      .then((r) => {
+        if (!r.ok) throw new Error('HTTP ' + r.status)
+        return r.text()
+      })
+      .then((t) => { if (!dead) setText(t) })
+      .catch((e) => { if (!dead) setError(String(e)) })
+    return () => { dead = true }
+  }, [props.fileUrl])
+  if (error) {
+    return <div className="dsh-wt_paneWip"><span className="dsh-wt_paneWipText">{T('file.fail')}：{error}</span></div>
+  }
+  if (text == null) {
+    return <div className="dsh-wt_paneWip"><span className="dsh-wt_paneWipText">{T('file.loading')}</span></div>
+  }
+  if (props.isMd) {
+    return (
+      <div className="dsh-wt_fileView">
+        <div
+          className="dsh-wt_md"
+          dangerouslySetInnerHTML={{ __html: mdRenderer.render(text) }}
+          onClick={(e: any) => {
+            const a = e.target && e.target.closest ? (e.target.closest('a') as HTMLAnchorElement | null) : null
+            if (!a) return
+            e.preventDefault()
+            const href = a.getAttribute('href') || ''
+            if (/^(https?:|mailto:)/i.test(href)) window.open(href, '_blank', 'noopener')
+          }}
+        />
+      </div>
+    )
+  }
+  return <div className="dsh-wt_fileView"><pre className="dsh-wt_txt">{text}</pre></div>
+}
+
 /** 单个标签页的内容渲染 */
 function PaneTabBody(props: { tab: PaneTab; row: PaneRow; index: number }) {
   const content = props.tab.content
   if (content.kind === 'iframe') {
     return <iframe className="dsh-wt_paneFrame" src={content.url} title={props.tab.title} />
   }
+  if (content.kind === 'file') {
+    return <FileViewer path={content.path} />
+  }
   if (content.type === 'browser') return <BrowserPane />
   if (content.type === 'explorer') return <ExplorerPane row={props.row} index={props.index} />
   if (content.type === 'scm') return <GitPane />

01_content/src/client/styles.ts

@@ -76,6 +76,30 @@ export const css = [
   '.dsh-wt_splitClose{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--dsw-alias-label-secondary,#9aa4b2);font-size:12px;cursor:pointer}',
   '.dsh-wt_splitClose:hover{color:var(--dsw-alias-label-primary,#e6e8eb);background:var(--dsw-alias-fill-l1,rgba(255,255,255,.06))}',
   '.dsh-wt_pane{display:flex;flex-direction:column;box-sizing:border-box;border:1px solid var(--dsw-alias-border-l1,#262b36);border-radius:8px;background:var(--dsw-alias-bg-base,#0b0e14);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}',
+  // 文件预览：文本/MD 滚动容器 + MD 排版 + 图片居中
+  '.dsh-wt_fileView{flex:1;min-height:0;overflow:auto;padding:12px 14px;background:var(--dsw-alias-bg-base,#0b0e14);color:var(--dsw-alias-label-primary,#e6e8eb);font-size:12.5px;line-height:1.7}',
+  '.dsh-wt_txt{margin:0;font-family:var(--dsw-font-mono,Consolas,Menlo,monospace);font-size:12px;line-height:1.65;white-space:pre-wrap;word-break:break-word}',
+  '.dsh-wt_md h1,.dsh-wt_md h2,.dsh-wt_md h3,.dsh-wt_md h4{margin:14px 0 8px;line-height:1.3;font-weight:600;color:var(--dsw-alias-label-primary,#e6e8eb)}',
+  '.dsh-wt_md h1{font-size:20px;border-bottom:1px solid var(--dsw-alias-border-l1,#262b36);padding-bottom:6px}',
+  '.dsh-wt_md h2{font-size:16.5px;border-bottom:1px solid var(--dsw-alias-border-l1,#262b36);padding-bottom:5px}',
+  '.dsh-wt_md h3{font-size:14.5px}',
+  '.dsh-wt_md h4{font-size:13px}',
+  '.dsh-wt_md p{margin:6px 0}',
+  '.dsh-wt_md a{color:var(--dsw-alias-state-accent-primary,#4f8ef7);text-decoration:none}',
+  '.dsh-wt_md a:hover{text-decoration:underline}',
+  '.dsh-wt_md code{font-family:var(--dsw-font-mono,Consolas,Menlo,monospace);font-size:11.5px;background:var(--dsw-alias-fill-l1,rgba(255,255,255,.06));padding:1px 5px;border-radius:4px}',
+  '.dsh-wt_md pre{background:var(--dsw-alias-fill-l1,rgba(255,255,255,.04));border:1px solid var(--dsw-alias-border-l1,#262b36);border-radius:8px;padding:10px 12px;overflow:auto;margin:8px 0}',
+  '.dsh-wt_md pre code{background:transparent;padding:0;font-size:12px}',
+  '.dsh-wt_md blockquote{margin:8px 0;padding:2px 12px;border-left:3px solid var(--dsw-alias-state-accent-primary,#4f8ef7);background:var(--dsw-alias-fill-l1,rgba(255,255,255,.03));color:var(--dsw-alias-label-secondary,#9aa4b2)}',
+  '.dsh-wt_md ul,.dsh-wt_md ol{margin:6px 0;padding-left:22px}',
+  '.dsh-wt_md li{margin:2px 0}',
+  '.dsh-wt_md table{border-collapse:collapse;margin:8px 0;font-size:12px}',
+  '.dsh-wt_md th,.dsh-wt_md td{border:1px solid var(--dsw-alias-border-l1,#262b36);padding:4px 10px;text-align:left}',
+  '.dsh-wt_md th{background:var(--dsw-alias-fill-l1,rgba(255,255,255,.05))}',
+  '.dsh-wt_md hr{border:none;border-top:1px solid var(--dsw-alias-border-l1,#262b36);margin:12px 0}',
+  '.dsh-wt_md img{max-width:100%}',
+  '.dsh-wt_imgView{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:10px;background:var(--dsw-alias-bg-base,#0b0e14)}',
+  '.dsh-wt_imgView img{max-width:100%;max-height:100%;object-fit:contain}',
   '.dsh-wt_pane[data-drop-hover=true]{border-color:var(--dsw-alias-state-accent-primary,#4f8ef7);box-shadow:0 0 0 2px rgba(79,142,247,.4),var(--dsw-shadow-lv2,0 8px 24px rgba(0,0,0,.4));transform:scale(1.012)}',
   '.dsh-wt_paneBar{flex:none;display:flex;align-items:center;height:22px;padding:0 8px;border-bottom:1px solid var(--dsw-alias-border-l1,#262b36);background:var(--dsw-alias-fill-l1,rgba(255,255,255,.02))}',
   '.dsh-wt_paneTitle{flex:1;min-width:0;font-size:11px;font-weight:600;color:var(--dsw-alias-label-secondary,#9aa4b2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',

01_content/src/index.ts

@@ -208,8 +208,8 @@ export function apply(ctx: Context) {
         const types: Record<string, string> = {
           html: 'text/html; charset=utf-8', htm: 'text/html; charset=utf-8',
           css: 'text/css; charset=utf-8', js: 'text/javascript; charset=utf-8', mjs: 'text/javascript; charset=utf-8',
-          json: 'application/json; charset=utf-8', md: 'text/plain; charset=utf-8', txt: 'text/plain; charset=utf-8',
-          svg: 'image/svg+xml', png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp',
+          json: 'application/json; charset=utf-8', md: 'text/markdown; charset=utf-8', markdown: 'text/markdown; charset=utf-8', txt: 'text/plain; charset=utf-8', log: 'text/plain; charset=utf-8',
+          pdf: 'application/pdf', svg: 'image/svg+xml', png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp', bmp: 'image/bmp', ico: 'image/x-icon',
         }
         res.writeHead(200, { 'content-type': types[ext] ?? 'application/octet-stream', 'cache-control': 'no-store' })
         res.end(data)