|
| 1 | +# Skills Manager TUI - Blessed Version |
| 2 | + |
| 3 | +## 迁移到 Blessed |
| 4 | + |
| 5 | +TUI 已从 Ink (React) 迁移到 blessed,带来以下改进: |
| 6 | + |
| 7 | +### 优势 |
| 8 | + |
| 9 | +✅ **真正的局部刷新** - 只更新变化的部分,无全屏闪烁 |
| 10 | +✅ **异步加载** - Detail panel 可以异步加载内容,显示 "Loading..." 然后局部更新 |
| 11 | +✅ **更好的性能** - 更底层的控制,更快的渲染 |
| 12 | +✅ **更流畅的体验** - 类似 lazygit, k9s 等专业 TUI 工具 |
| 13 | + |
| 14 | +### 架构变化 |
| 15 | + |
| 16 | +**之前 (Ink):** |
| 17 | +- 基于 React 组件 |
| 18 | +- 每次状态变化重新渲染整个界面 |
| 19 | +- 异步加载需要 overlay 或全屏刷新 |
| 20 | + |
| 21 | +**现在 (Blessed):** |
| 22 | +- 直接操作 blessed boxes |
| 23 | +- 只更新变化的 box |
| 24 | +- 异步加载可以局部更新 detail panel |
| 25 | + |
| 26 | +### 使用方法 |
| 27 | + |
| 28 | +正式 CLI 命令名:`skills-manager` |
| 29 | + |
| 30 | +```bash |
| 31 | +# 在当前仓库里运行正式 CLI(推荐) |
| 32 | +npm exec skills-manager |
| 33 | + |
| 34 | +# 开发模式直接运行 blessed 源码(默认) |
| 35 | +npm start |
| 36 | + |
| 37 | +# 运行旧的 Ink 版本(备份) |
| 38 | +npm run start:ink |
| 39 | + |
| 40 | +# 构建 |
| 41 | +npm run build |
| 42 | +``` |
| 43 | + |
| 44 | +如果要从任意目录直接调用,可以在 `tui/` 里执行一次: |
| 45 | + |
| 46 | +```bash |
| 47 | +npm link |
| 48 | +``` |
| 49 | + |
| 50 | +之后即可全局运行: |
| 51 | + |
| 52 | +```bash |
| 53 | +skills-manager |
| 54 | +``` |
| 55 | + |
| 56 | +### 功能对比 |
| 57 | + |
| 58 | +| 功能 | Ink 版本 | Blessed 版本 | |
| 59 | +|------|---------|-------------| |
| 60 | +| 三栏布局 | ✅ | ✅ | |
| 61 | +| 键盘导航 | ✅ | ✅ | |
| 62 | +| Install/Uninstall | ✅ | ✅ | |
| 63 | +| Star/Unstar | ✅ | ✅ | |
| 64 | +| 异步加载详情 | ❌ (需要 overlay) | ✅ (局部更新) | |
| 65 | +| 无闪烁刷新 | ❌ | ✅ | |
| 66 | +| Sidebar 导航 | ✅ | ✅ | |
| 67 | +| 搜索 | ✅ | ✅ | |
| 68 | +| 版本历史 | ✅ | ✅ | |
| 69 | +| Discover 详情 overlay | ✅ | ✅ | |
| 70 | +| 在编辑器中打开本地 skill | ✅ | ✅ | |
| 71 | +| 在浏览器中打开 discover skill | ✅ | ✅ | |
| 72 | +| 源过滤 | ✅ | ✅ | |
| 73 | +| Agent 选择 overlay | ✅ | ✅ | |
| 74 | + |
| 75 | +### 键盘快捷键 |
| 76 | + |
| 77 | +- `h/l` - 切换面板 (sidebar ← → list ← → detail) |
| 78 | +- `j/k` 或 `↑/↓` - 上下移动 |
| 79 | +- `g/G` - 跳到第一个/最后一个 |
| 80 | +- `i` - 安装 skill |
| 81 | +- `x` - 卸载 skill |
| 82 | +- `s` - 标星/取消标星 |
| 83 | +- `H` - 打开本地 skill 的版本历史 |
| 84 | +- `d` - 打开 discover skill 的详情 overlay |
| 85 | +- `o` - 打开 skill 的源文件(优先用 `$EDITOR`,否则交给系统默认应用) |
| 86 | +- `O` - 在 Discover 视图里打开 skill 的 source 页面 |
| 87 | +- `/` - 搜索当前视图 |
| 88 | +- `f/F` - Switch Source:切换 discover 来源过滤 |
| 89 | +- `0` - Reset Source:重置 discover 来源过滤 |
| 90 | +- `Enter` - 与 `l` 一样仅用于切换面板 |
| 91 | +- `r` - 刷新 discover 目录(仅 discover 视图) |
| 92 | +- `R` - 完全刷新页面:重载本地 skills、agents、discover 目录,并强制整屏重绘 |
| 93 | +- 侧边栏 `Sources` - 区分 Local 与各个 Plugin bundle(`pluginSource · pluginName`) |
| 94 | +- 列表前缀 `L/P` - 区分 Local skill / Plugin resource;Pi extension 在 UI 上归类为 Plugin |
| 95 | +- `q` 或 `Ctrl+C` - 退出 |
| 96 | +- 当前 Blessed 版为键盘优先,默认禁用鼠标交互,避免出现“能点但不响应”的误导行为 |
| 97 | + |
| 98 | +### 待实现功能 |
| 99 | + |
| 100 | +- [ ] 搜索结果高亮匹配词 |
| 101 | +- [ ] 历史 overlay 的分页/滚动优化 |
| 102 | +- [ ] 更完整的浏览器/编辑器跨平台打开策略 |
| 103 | + |
| 104 | +### 文件结构 |
| 105 | + |
| 106 | +``` |
| 107 | +src/ |
| 108 | +├── app-blessed.ts # Blessed 版本主应用 |
| 109 | +├── index.ts # 主入口 (blessed) |
| 110 | +├── index-ink.tsx # Ink 版本入口 (备份) |
| 111 | +├── app.tsx # Ink 版本主应用 (备份) |
| 112 | +└── components/ # Ink 组件 (备份) |
| 113 | +``` |
| 114 | + |
| 115 | +## 开发说明 |
| 116 | + |
| 117 | +Blessed 版本使用命令式 API,不是声明式的 React。主要概念: |
| 118 | + |
| 119 | +1. **创建 boxes** - `blessed.box()`, `blessed.list()` 等 |
| 120 | +2. **更新内容** - `box.setContent()`, `list.setItems()` |
| 121 | +3. **渲染** - `screen.render()` 只渲染变化的部分 |
| 122 | +4. **键盘处理** - `screen.key(['j'], () => {...})` |
| 123 | + |
| 124 | +### 异步加载示例 |
| 125 | + |
| 126 | +```typescript |
| 127 | +// 显示 loading |
| 128 | +detail.setContent('Loading...') |
| 129 | +screen.render() |
| 130 | + |
| 131 | +// 异步加载 |
| 132 | +fetchData().then(data => { |
| 133 | + detail.setContent(data) |
| 134 | + screen.render() // 只更新 detail box |
| 135 | +}) |
| 136 | +``` |
| 137 | + |
| 138 | +这就是 blessed 的核心优势 - 局部更新,无闪烁! |
0 commit comments