CNB 资源管理器是一个专为 CNB 平台设计的现代化资源管理工具，作为 uTools 插件提供无缝的用户体验。通过直观的界面和强大的功能，帮助开发者高效管理代码仓库、组织团队、云开发环境等资源。
- 🚀 性能优先: 采用多层缓存架构，实现 95%+ 性能提升
- 💎 用户体验: 现代化 UI 设计，响应式布局，零延迟操作
- 🔄 智能同步: 后台自动同步，确保数据实时性
- 📱 全平台适配: 完美适配桌面端和移动端
- 🛡️ 可靠稳定: 完善的错误处理和离线支持
| 功能模块 | 描述 | 状态 |
|---|---|---|
| 🔐 API密钥管理 | 安全配置和管理 CNB API 密钥，支持密钥验证和更新 | ✅ 完成 |
| 👤 个人资料管理 | 查看和编辑个人信息，包含20+项详细数据展示 | ✅ 完成 |
| 📦 仓库管理 | 智能仓库管理，支持搜索、筛选、排序和批量操作 | ✅ 完成 |
| 🐳 镜像同步 | Docker镜像同步功能，支持多架构和实时状态监控 | ✅ 完成 |
| 🏢 组织管理 | 管理所属组织和团队，查看组织详情 | 🚀 开发中 |
| ☁️ 云开发管理 | 工作空间创建、启动、停止和管理 | 🚀 开发中 |
| 💾 智能缓存 | 多层缓存策略，支持离线浏览和后台同步 | ✅ 完成 |
- Node.js >= 16.0.0
- npm >= 8.0.0
- uTools >= 2.0.0
# 克隆项目
git clone https://github.com/your-username/cnb-manager.git
cd cnb-manager
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 然后通过utools的开发者工具打开项目
-
安装插件
- 在 uTools 中搜索并安装 CNB 资源管理器
- 或者通过开发者模式安装本地版本
-
配置 API 密钥
1. 访问 CNB 平台 (https://cnb.cool) 2. 登录账户，进入设置页面 3. 生成或复制 API 密钥 4. 在插件中输入密钥并验证 -
开始使用
- 在 uTools 中输入
cnb或CNB管理 - 插件会自动加载您的个人资料和仓库信息
- 在 uTools 中输入
点击展开详细功能
核心功能:
- 📋 仓库列表: 显示所有仓库，支持分页加载
- 🔍 智能搜索: 按名称、描述搜索仓库
- 🏷️ 多维筛选: 按组织、可见性、语言筛选
- 📊 多种排序: 按更新时间、创建时间、星标数、名称排序
- ⭐ 快速操作: 星标、查看、编辑、删除等操作
使用技巧:
• 搜索支持模糊匹配和关键词高亮 • 可以通过组织筛选快速定位团队项目 • 点击仓库名称直接跳转到 CNB 平台 • 右上角显示缓存状态和最后更新时间
点击展开详细功能
核心功能:
- ⭐ 展示组织的信息: 组织名，仓库数，子组织树，成员数等。
使用技巧: • 点击组织名称直接跳转到 CNB 平台
点击展开详细功能
信息展示:
- 👤 基本信息: 头像、昵称、用户名、邮箱、个人简介
- 📊 账户统计: 仓库数、组织数、获得星标、任务数、关注数
- 🏆 认证状态: 身份认证、VIP会员状态
- 📈 活动数据: 关注仓库、任务、镜像仓库、获得赞赏
- 🔐 登录信息: 最后登录时间、IP地址、更新记录
编辑功能:
- ✏️ 资料编辑: 支持编辑昵称、简介、联系方式等
- 🔒 权限控制: 根据API返回的可编辑字段动态控制
- 💾 实时保存: 编辑后立即同步到CNB平台
- 🔄 缓存更新: 自动更新本地缓存数据
点击展开详细功能
同步功能:
- 🚀 一键同步: 输入镜像名称即可开始同步
- 🏗️ 多架构支持: 支持amd64和arm64架构
- 📊 实时监控: 实时显示同步状态和进度
- 📋 镜像清单: 查看仓库中的所有镜像包
- 📜 构建历史: 查看同步历史记录
- 🔗 快速复制: 一键复制镜像链接和Docker命令
管理功能:
- 🎯 仓库选择: 选择目标同步仓库
- ⚙️ 默认设置: 设置默认仓库提升效率
- 🔄 状态轮询: 自动监控同步进度
- 📈 使用统计: 镜像下载量统计
使用示例:
# 同步nginx镜像
镜像名称: nginx:latest
架构: amd64, arm64
# 同步MySQL镜像
镜像名称: mysql:8.0
架构: amd64
# 复制Docker命令
docker pull cnb.cool/username/repo/nginx:latest
点击展开详细功能
工作空间操作:
- 🚀 快速启动: 一键启动云开发环境
- 📝 创建工作空间: 基于仓库创建新的工作空间
- ⏹️ 停止管理: 停止运行中的工作空间
- 🔄 重建工作空间: 重新构建开发环境
- 📊 状态监控: 实时显示工作空间状态
管理功能:
- 📋 工作空间列表: 显示所有工作空间及其状态
- 🔍 详情查看: 查看工作空间详细信息
- 🗑️ 批量删除: 清理不需要的工作空间
- 📈 使用统计: 工作空间使用情况统计
cnb-manager/ ├── src/ │ ├── components/ # Vue 组件 │ │ ├── Common/ # 通用组件 │ │ │ ├── Loading.vue # 加载组件 │ │ │ ├── ErrorMessage.vue # 错误提示 │ │ │ └── ConfirmDialog.vue # 确认对话框 │ │ ├── Layout/ # 布局组件 │ │ │ ├── MainLayout.vue # 主布局 │ │ │ └── Sidebar.vue # 侧边栏 │ │ └── CNBManager/ # 业务组件 │ │ ├── CNBManager.vue # 主管理器 │ │ ├── Profile.vue # 个人资料 │ │ ├── Repositories.vue # 仓库管理 │ │ ├── Organizations.vue # 组织管理 │ │ └── Workspaces.vue # 工作空间 │ ├── services/ # 服务层 │ │ ├── cnbApi.js # CNB API 服务 │ │ ├── profileCache.js # Profile 缓存服务 │ │ ├── repositoryCache.js # 仓库缓存服务 │ │ └── storage.js # 本地存储服务 │ ├── utils/ # 工具函数 │ │ ├── constants.js # 常量定义 │ │ ├── helpers.js # 辅助函数 │ │ ├── validators.js # 数据验证 │ │ └── errorHandler.js # 错误处理 │ └── styles/ # 样式文件 │ ├── variables.css # CSS 变量 │ ├── common.css # 通用样式 │ └── element-plus-theme.css # Element Plus 主题 ├── public/ │ ├── plugin.json # uTools 插件配置 │ └── logo.png # 插件图标 └── tests/ # 测试文件 └── __tests__/ # 单元测试
| 技术 | 版本 | 用途 |
|---|---|---|
| Vue 3 | 3.5.13 | 前端框架，使用 Composition API |
| Element Plus | 2.10.4 | UI 组件库，提供丰富的组件 |
| Vite | 6.0.11 | 构建工具，快速的开发体验 |
| Vitest | 1.1.0 | 测试框架，与 Vite 完美集成 |
| uTools API | 6.1.0 | uTools 插件开发接口 |
-
克隆项目
git clone https://github.com/your-username/cnb-manager.git cd cnb-manager -
安装依赖
npm install -
启动开发
npm run dev
如果你觉得这个项目对你有帮助，你可以请作者喝杯咖啡 ☕️
| 支付宝 | 微信 |
|---|---|
 |  |
About
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
