Dashboard Upload Manager VSCode 插件
这是一个专为 Encompass Dashboard 管理设计的 VSCode 插件,支持 Dashboard 的上传、更新和下载功能。
功能特性
- 🔐 OAuth授权登录: 支持跳转到 uquai.com 进行授权登录
- 📊 Dashboard列表管理: 查看和管理你的 Dashboard 列表
- 📤 Dashboard上传: 支持上传新的 Dashboard(HTML、CSS、JS文件)
- 🔄 Dashboard更新: 支持更新现有 Dashboard 的文件
- 📥 Dashboard下载: 支持下载 Dashboard 的三个文件到本地
- 🔍 文件预览: 支持预览 Dashboard 文件内容
安装
从源码安装
- 克隆此仓库到本地
- 运行
npm install 安装依赖
- 运行
npm run compile 编译 TypeScript 代码
- 在 VS Code 中按 F5 启动调试模式
界面介绍
插件在 VS Code 左侧活动栏添加了 "Dashboard Manager" 图标,点击后展开 Dashboard 列表视图。
Dashboard 列表
- 显示你创建的所有 Dashboard
- 点击 Dashboard 名称可下载文件
- 右键点击 Dashboard 可进行更新操作
- 支持刷新 Dashboard 列表
状态栏
- 显示登录状态(已登录/未登录)
- 点击状态栏可打开快捷操作菜单
详细操作流程
1. 首次使用 - 登录授权
方法一:通过状态栏登录
- 查看 VS Code 底部状态栏,点击 "Dashboard未登录" 状态
- 浏览器自动打开 uquai.com 授权页面
- 完成授权后,将授权码复制到剪贴板
- 回到 VS Code,插件自动检测并完成登录
方法二:通过命令面板登录
- 按
Ctrl+Shift+P 打开命令面板
- 输入 "Dashboard: 登录授权" 并选择
- 按照上述步骤完成授权
登录成功后
- 状态栏显示 "Dashboard已登录" 状态
- 自动刷新 Dashboard 列表
- 显示 "登录成功,Dashboard列表已刷新!" 提示
2. Dashboard 管理
查看 Dashboard 列表
- 点击左侧 "Dashboard Manager" 图标
- 展开 "Dashboard 列表" 区域
- 查看所有创建的 Dashboard
上传新 Dashboard
- 点击状态栏快捷菜单中的 "上传新Dashboard"
- 依次选择 HTML、CSS、JavaScript 文件
- 等待上传完成
- Dashboard 列表自动刷新
更新 Dashboard
- 右键点击 Dashboard 名称
- 选择 "Dashboard: 更新Dashboard"
- 依次选择新的 HTML、CSS、JavaScript 文件
- 等待更新完成
下载 Dashboard
- 点击 Dashboard 名称
- 选择保存目录
- 插件自动下载三个文件并创建文件夹
- 可选择在文件夹中打开或在 VSCode 中打开
刷新 Dashboard 列表
- 点击 Dashboard 区域标题栏的刷新按钮
- 或使用命令 "Dashboard: 刷新列表"
3. 退出登录
- 按
Ctrl+Shift+P 打开命令面板
- 输入 "Dashboard: 退出登录" 并选择
- 确认退出操作
文件结构
下载的 Dashboard 文件结构:
Dashboard_[名称]_[ID]/
├── index.html # HTML 文件
├── style.css # CSS 文件
└── script.js # JavaScript 文件
配置说明
- 自动登录: 插件会自动保存登录令牌,下次启动时自动登录
- 网络配置: 确保网络连接正常以访问 uquai.com API
- 文件权限: 确保有足够的文件系统权限进行文件操作
故障排除
登录问题
- 确保网络连接正常
- 检查 uquai.com 服务状态
- 尝试重新授权登录
上传失败
- 检查文件格式是否正确(HTML、CSS、JS)
- 确保文件内容不为空
- 确保网络连接稳定
下载失败
- 检查 Dashboard 是否仍然存在
- 确保有足够的磁盘空间
- 验证网络连接
API 接口说明
当前实现状态
所有 API 方法目前为模拟实现,返回符合预期结构的数据:
getTableView(): 获取 UserID(模拟)
getDashboardList(userId): 获取 Dashboard 列表(模拟)
uploadDashboard(html, css, js, dashboardId?): 上传/更新 Dashboard(模拟)
downloadDashboard(dashboardId): 下载 Dashboard 文件(模拟)
后续完善
所有模拟方法都标注了 TODO 注释,便于后续替换为真实的 API 实现。
许可证
MIT License
支持
如有问题或建议,请通过以下方式联系:
| |