xusuyang030218/dsh-preview-ui

dsh-preview-ui

DeepSeek Harness（DSH）文件在线预览与修改插件：在浏览器内直接浏览工作区文件树、预览常见文件格式、在线编辑文本文件，并保留本地版本历史。

一个用于 DeepSeek Harness Web 的 DSH 插件。以文件树形式浏览当前活动工作区，直接在浏览器中预览常见文件格式，在线编辑文本文件，搜索文件内容，并恢复本地版本快照——无需外部工具。

功能 / Features

- 文件树浏览：树形展示工作区目录，支持文件名过滤与懒加载子目录
- 多格式预览：
- 代码 / 文本（自写 tokenizer 语法高亮）
- Markdown（标题、列表、表格、引用、代码块、链接、图片）
- 图片（PNG/JPG/GIF/SVG/WebP/BMP/ICO）
- PDF（浏览器原生查看器）
- Office（DOCX / XLSX / PPTX，OOXML ZIP 解析）
- HTML（iframe 沙箱预览，禁用脚本执行）
- 二进制（前 4KB 十六进制 dump）
- 在线编辑：textarea + 高亮 overlay，Ctrl+S 保存，保存前自动创建版本快照
- 版本历史：快照存储于 .dsh-preview-ui/versions/，支持回滚，单文件最多保留 50 个版本
- 全文搜索：按文件名或文件内容搜索工作区
- 拖入预览：将文档或整个项目文件夹拖入面板，递归生成本地文件树并预览
- Agent 工具：注册 list_files 与 preview_file 工具，Agent 可主动触发预览面板

安装 / Install

本地链接安装（实时同步）
pnpm dsh plugin --profile web add "dsh-preview-ui@link:d:/dsh-preview-ui"

或从 GitHub 安装
pnpm dsh plugin --profile web add "github:xusuyang030218/dsh-preview-ui"

构建：

cd d:\dsh-preview-ui
pnpm install
pnpm run build

重启 DSH Web 服务后，访问 http://127.0.0.1:3080，输入框左侧会出现「预览」按钮。客户端 bundle 由 /plugins/dsh-preview-ui/client.js 提供。

目录结构 / Structure

dsh-preview-ui/
├── src/
│   ├── host/
│   │   ├── index.ts    # Host 半：list_files / preview_file 工具
│   │   ├── web.ts      # Web 半：/dsh-preview-ui/api/* 路由
│   │   ├── fs.ts       # 文件系统封装（树/读/写/搜索/路径校验）
│   │   ├── version.ts  # 版本快照管理
│   │   └── parse.ts    # 二进制嗅探 + 语言检测 + Office 解析
│   └── client/
│       └── index.tsx   # Client 半：文件树 + 预览面板 + 编辑器
├── lib/                # 构建产物（esbuild / tsdown）
├── cordis.patch.yml    # DSH bundle patch
├── tsdown.config.ts
└── package.json

安全 / Security

- 所有 API 均锚定在 DSH 配置的工作区根目录
- 拒绝绝对路径、路径穿越、直接访问版本快照目录
- HTML 预览使用无脚本权限的 iframe 沙箱
- raw 端点按扩展名返回安全 MIME，并附带 X-Content-Type-Options: nosniff

License

MIT