logo
0
0
WeChat Login

CNB Welcome

Open VSX Made with reactive-vscode shadcn-vue Vite Vitest Open VSX Downloads License: Apache-2.0

CNB 云原生开发环境的 VS Code 欢迎页扩展,提供环境信息展示、倒计时、文件漫游、仓库模版等功能。

官方版本: https://cnb.cool/cnb/cool/cnb-welcome

功能

  • Welcome 页面 — 首次进入自动打开,展示环境配置、仓库信息、一键迁移和模版列表
  • Sidebar 面板 — 环境资源、运行倒计时、关闭环境、文件漫游、文档链接、系统监控(v0.12+)
  • 状态栏 — 显示当前仓库 slug,点击跳转仓库页面
  • 终端 — 首次激活自动打开终端并执行欢迎命令

系统监控(v0.12.0+)

在「开发环境」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 时采集器自动暂停,回到「开发环境」立即恢复。

配置项

SettingDefaultRange说明
cnb-welcome.sysmon.enabledtrue-是否启用系统监控;关闭后卡片不渲染、采集器不启动
cnb-welcome.sysmon.refreshInterval21-10采样间隔(秒)

采集策略灵感来自 lcx-0504/sysmonitor(MIT), 本扩展用 TypeScript 独立实现并针对 CNB 云原生环境做 cgroup-aware 改造。

Commands

CommandTitle
cnb.welcomeCNB Welcome
cnb.openTerminalCNB: Open Terminal
cnb.resetFirstRunCNB: Reset First Run
cnb.shutdownEnvironmentCNB: Shutdown Environment
cnb.openRepoPageCNB: Open Repo Page
cnb.openVscodeCNB: Open VS Code Client
cnb.openExtensionSettingsCNB: Open Extension Settings

技术栈

技术
Extension HostTypeScript + reactive-vscode
Webview UIVue 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

License

Apache-2.0 License © 2026-PRESENT wwvo

About

自用 cnb-welcome 扩展 CNB 云原生开发环境的 VS Code 欢迎页扩展,提供环境信息展示、倒计时、文件漫游、仓库模版等功能。

Language
MDX44.6%
HTML27.2%
TypeScript15.7%
Python6.4%
Others6.1%