dsh-file-explorer

dsh-file-explorer 🗂️

工作区文件浏览器 for DeepSeek Harness Web GUI —— 文件预览与管理为主,附赠 macOS 风格毛玻璃工作台:

• 🗂️ 文件浏览器(核心):自动扫描当前会话工作区,左右分栏(左侧文件树 / 右侧内容预览),面板宽度与分栏宽度均可拖拽调整;目录展开、按扩展名着色、轻量语法高亮、编辑保存
• ⚡ 快速设置栏:右下角胶囊 —— 文件浏览器开关 / 主题切换(浅色·深色·跟随系统)/ 皮肤切换(循环已注册皮肤)
• 💻 跟随工作区:切换会话/工作区自动重载文件树;无工作区时显示空状态

✨ 效果

功能	说明
快速设置栏	右下角悬浮胶囊:🗂️ 文件浏览器 · 🌙/☀️/🌗 主题 · 🎨 皮肤
文件浏览器	右滑面板,懒加载目录树(跳过 node_modules/.git),扩展名彩色圆点,点击查看代码(语法高亮),「编辑→保存」写回工作区
安全	文件 API 只允许工作区根目录内路径(realpath 防符号链接逃逸);写入需 x-dsh-hok-fs 头(防跨站写入);二进制/超大文件只读

🚀 安装 / Install

# 1. 构建
cd dsh-file-explorer
npm install
npm run build

# 2. 安装到 web profile
dsh plugin --profile web add <abs-path-of-dsh-file-explorer>

# 3. 在 ~/.dsh/profiles/web/cordis.patch.yml 追加:
#    - insert:
#        - id: file-explorer
#          name: 'dsh-file-explorer'

重启 dsh web 或刷新页面。右下角出现玻璃胶囊,点 🗂️ 打开文件浏览器。

⚠️ 客户端 bundle 会热更新(刷新即生效);host 半(文件 API)改动需要重启 dsh web 才生效。文件浏览器显示的根目录 = 当前会话的工作区;重启前可能显示启动目录。

🔧 使用 / Usage

• 🗂️ 文件浏览器:点目录展开,点文件查看(代码高亮),点「编辑」修改、「保存」写回。二进制与超大文件自动只读。
• 🌙/☀️/🌗:浅色 / 深色 / 跟随系统循环切换。
• 🎨 皮肤:循环切换已注册皮肤(装了 dsh-skin-hok 就是 8 个王者皮肤)。

🛠 工作原理 / How it works

• Host half (src/index.ts):在 webserver 上注册 /hok-fs/* 路由 —— 目录列表 / 读文件 / 写文件,工作区根 = DSH_WORKSPACE 或启动目录,路径含 realpath 防逃逸,原子写入(tmp+rename)。
• Styles (src/glass-css.ts):面板与快速栏的实底样式(无毛玻璃),跟随主题 token。
• Client (src/client.tsx):QuickBar + Explorer 注册进布局的空闲 shell.overlay 槽位;主题桥接经 window 事件同步;目录/文件缓存于 React 状态,懒加载。
• Colors (src/colors.ts):扩展名→颜色映射 + 轻量正则语法高亮(注释/字符串/数字/关键字,JS/TS/Python/JSON/MD/HTML/CSS/YAML/Shell)。

📦 项目结构 / Structure

src/
├── index.ts        # host half:/hok-fs 文件 API 路由
├── glass-css.ts    # 玻璃核心 CSS + 半透明 token 层 + 组件样式
├── colors.ts       # 扩展名配色 + 语法高亮
└── client.tsx      # 快速设置栏 + 文件浏览器(React)
build.mjs           # esbuild 构建
test/
├── loader-sim.mjs  # 客户端装载模拟
├── host-fs.mjs     # host 路由端到端测试
└── components.mjs  # jsdom 组件交互测试(React 18)

🤝 开源 / License

MIT —— 自由使用、修改、分发。王者荣耀皮肤场景版权归腾讯天美工作室,本插件仅在其已安装时作为壁纸使用其 CSS 效果。

Build against @deepseek-ai/dsh 0.1.0-rc.6,React 18.3.