✨ feat(sidebar): 标题栏右上角新增齿轮按钮跳转扩展设置页
CNB 云原生开发环境的 VS Code 欢迎页扩展，提供环境信息展示、倒计时、文件漫游、仓库模版等功能。
- Welcome 页面 — 首次进入自动打开，展示环境配置、仓库信息、一键迁移和模版列表
- Sidebar 面板 — 环境资源、运行倒计时、关闭环境、文件漫游、文档链接、系统监控（v0.12+）
- 状态栏 — 显示当前仓库 slug，点击跳转仓库页面
- 终端 — 首次激活自动打开终端并执行欢迎命令
在「开发环境」tab 关闭按钮下方实时显示：
- CPU — 利用率 + 1/5/15 分钟 loadavg（cgroup-aware，CNB 容器真实视角）
- RAM — 已用 / 可用 / 总计
- 磁盘 — 多挂载点容量 + 实时 R/W 速率（自动过滤容器注入的 bind mount）
- 服务器网络 — 实时 ↑/↓ 速率
- 本机 SSH — 流量（仅 SSH 远程环境，CNB 显示「不可用」）
- GPU — NVIDIA 利用率 / VRAM / 温度 / 功耗（需
nvidia-smi）
CPU / RAM / 磁盘 IO / 网络 4 张数值卡片带 sparkline 背景趋势图（5 分钟滑窗）。 切到其他 tab 时采集器自动暂停，回到「开发环境」立即恢复。
配置项：
| Setting | Default | Range | 说明 |
|---|---|---|---|
cnb-welcome.sysmon.enabled | true | - | 是否启用系统监控；关闭后卡片不渲染、采集器不启动 |
cnb-welcome.sysmon.refreshInterval | 2 | 1-10 | 采样间隔（秒） |
采集策略灵感来自 lcx-0504/sysmonitor（MIT）， 本扩展用 TypeScript 独立实现并针对 CNB 云原生环境做 cgroup-aware 改造。
| Command | Title |
|---|---|
cnb.welcome | CNB Welcome |
cnb.openTerminal | CNB: Open Terminal |
cnb.resetFirstRun | CNB: Reset First Run |
cnb.shutdownEnvironment | CNB: Shutdown Environment |
cnb.openRepoPage | CNB: Open Repo Page |
cnb.openVscode | CNB: Open VS Code Client |
cnb.openExtensionSettings | CNB: Open Extension Settings |
| 层 | 技术 |
|---|---|
| Extension Host | TypeScript + reactive-vscode |
| Webview UI | Vue 3 + Vite 8 + Tailwind CSS v4 + shadcn-vue + Reka UI |
| 构建 | tsdown (ext host) + Vite (webview) |
| 测试 | Vitest |
├── src/ # Extension Host 源码
│ ├── commands/ # 命令注册
│ ├── shared/ # 与 webview 共享的类型与纯逻辑（messages / countdown / resourceFormat）
│ ├── statusbar/ # 状态栏：仓库标识与环境倒计时
│ ├── utils/ # 工具函数（env / api / webview / roaming / gitSafety / shutdownFlow 等）
│ └── views/ # Webview 面板（sidebar / welcome）
├── webview-ui/ # Webview 前端 (Vue 3 SPA)
│ └── src/
│ ├── assets/ # Tailwind v4 + shadcn 主题变量
│ ├── components/ # UI 组件（ui / welcome / sidebar）
│ ├── composables/ # 组合式函数（与 ext-host 消息桥接）
│ ├── dev/ # 浏览器开发态 mock 数据
│ ├── lib/ # 前端工具（cn / gitUrl / fileDisplay）
│ ├── types/ # 消息类型再导出（保留 @shared 别名屏蔽相对路径）
│ └── views/ # 顶层视图（WelcomeView / SidebarView）
├── test/ # Extension Host 单元测试
└── docs/ # 设计文档
# 安装依赖
pnpm install
# 开发 webview UI (HMR)
pnpm --filter webview-ui dev
# 构建
pnpm build
# 运行测试
pnpm test
# 打包 VSIX（输出 cnb-welcome-<version>.vsix 到仓库根目录）
pnpm ext:package
Apache-2.0 License © 2026-PRESENT wwvo
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
