dsh-aionui-panel — DSH Web GUI 右侧面板系统

AionUi 右侧面板的像素级复刻（Apache-2.0 授权参考实现，非抄录）：Explorer 项目面板（文件树 / 文件名搜索 / Git 变更）+ Preview 预览面板（10+ 格式多 tab 预览）+ 统一拖拽布局系统，按项目隔离的偏好持久化。

安装

推荐直接安装全家桶聚合包 @captain1275/dsh-web-ui-all（一个包装齐全部功能插件与皮肤），或单独安装本插件：

# 推荐：直接从 npm 安装
dsh plugin --profile web add @captain1275/dsh-client-ui-aionui-panel

# 或从仓库安装（开发调试）
git clone https://github.com/zhu1090093659/dsh-web-ui.git
cd dsh-web-ui
pnpm install && pnpm -r build
dsh plugin --profile web add link:$(pwd)/packages/dsh-aionui-panel

安装后重启 dsh web，打开项目会话即可看到聊天区右侧的「预览」与「文件/变更」两块面板。

使用

项目会话（当前会话有工作目录）打开后，聊天区右侧出现两块面板：

• Explorer（最右栏，默认 260px，范围 220~500px）：文件 / 变更 双 tab； 文件树整行点击展开/收起文件夹，点击文件在预览面板打开，顶部按文件名搜索 （150ms 防抖，点击结果 = 定位到树中，不打断思路）；变更 tab 读取真实 git 状态，支持 stage / unstage / discard（untracked 走删除，tracked 走 restore，批量放弃有确认）。
• 拖拽文件到输入框：文件树中的文件行可拖拽（目录行除外），拖到聊天 输入框区域松手即把相对路径（如 deploy/base/deployment.yaml）插入当前 会话草稿的光标处，agent 收到消息后会自行读取该文件，无需手动输入路径； 拖拽过程中输入框上方显示高亮提示条。
• Preview（右二栏，默认 480px，范围 340~1200px）：多 tab 预览，支持 markdown / html / code / diff / csv / pdf / word / excel / ppt / 图片 / 文本 / url；源码/预览切换、分屏编辑（比例持久化）、保存（mtime 冲突检测）、下载、 刷新（4 态：不渲染死按钮）、dirty 点、中键关闭、右键菜单批量关闭 （dirty 确认）、tab 溢出渐变指示器。

交互细节：

• 拖拽左缘把手调宽（rAF 每帧合并，body user-select:none）；双击把手复位默认宽度。
• 两级宽度钳位（Explorer 先、Preview 后）数学保证聊天区 >= 360px；超限值回写持久化。
• 折叠 = 宽度缩 0 且组件保持挂载（树展开态 / 预览 tab 不丢），无过渡动画； 折叠后右侧出现浮动展开按钮。
• 明暗双主题跟随 GUI（body[data-ds-dark-theme]），prefers-reduced-motion 全局禁用动画。
• 偏好按项目隔离持久化（localStorage keys 与 AionUi 一致）： chat-workspace-width-px / chat-preview-width-px / preview-panel-split-ratio / project-panel-collapse: / explorer-ui: / scm-ui: / preview-ui:（LRU 上限 12 scope）。读取一律范围校验，非法值回退默认。

数据源

真实文件系统与真实 git 仓库，无任何 mock：

• host 半区（src/index.ts + src/host/）经 /aionui-panel/* HTTP 路由提供 目录列举、文件读取（文本 80k 字符上限 / 图片 data URL）、写入（mtime 冲突 检测）、文件名搜索（跳过 .git / node_modules）、git status（porcelain v1 -z） / stage / unstage / discard，以及 SSE 变更流（fs 监听 + git 轮询）。