Scbackend Dashboard

现代化的Scbackend管理面板，提供完整的实例管理、插件管理和运行器监控功能。

功能特性

🚀 核心功能

• 实例管理：创建、编辑、删除、启动/停止Scratch项目实例
• 插件管理：上传、启用/禁用、管理插件，支持为运行器单独配置插件
• 运行器监控：实时监控运行器状态，查看运行器详情和已启用插件
• 文件管理：上传和下载.sb3项目文件

🎨 用户体验

• 现代化UI：采用渐变色彩和卡片式设计，响应式布局
• 实时通知：Toast通知系统，替代传统alert弹窗
• 错误处理：完善的错误边界和加载状态显示
• 多语言支持：中英文界面自动切换

⚙️ 设置功能

• 后端配置：灵活配置后端服务地址
• 界面设置：语言切换、自动刷新配置
• 高级设置：数据重置和清理功能

技术栈

• 前端框架：React 19
• 路由管理：React Router DOM 7
• HTTP客户端：Axios
• 样式方案：CSS Modules + 现代化CSS特性
• 构建工具：Create React App

快速开始

环境要求

• Node.js 16+
• npm 或 yarn

安装依赖

cd dashboard
npm install
# 或
yarn install

开发环境运行

npm start
# 或
yarn start

应用将在 http://localhost:3000 启动。

生产环境构建

npm run build
# 或
yarn build

构建产物位于 build 目录。

配置说明

后端服务配置

1. 首次访问时，系统会提示输入后端地址
2. 默认地址：http://localhost:3000
3. 可在设置页面修改后端地址

登录认证

• 使用后端配置的用户名和密码登录
• 登录令牌自动保存，支持会话保持
• 令牌过期自动跳转登录页

项目结构

src/
├── App.js                 # 主应用组件
├── App.css               # 全局样式
├── index.js              # 应用入口
├── index.css             # 基础样式
├── axiosInstance.js      # Axios配置
├── globalState.js        # 全局状态管理
├── i18nmapping.js        # 多语言映射
├── components/
│   ├── common/           # 通用组件
│   │   ├── Card.css
│   │   ├── Card.jsx
│   │   ├── ErrorBoundary.css
│   │   ├── ErrorBoundary.jsx
│   │   ├── Loading.css
│   │   ├── Loading.jsx
│   │   ├── Toast.css
│   │   └── Toast.jsx
│   ├── dialog/           # 对话框组件
│   ├── home/             # 首页
│   ├── insts/            # 实例管理
│   ├── login/            # 登录组件
│   ├── plugins/          # 插件管理
│   └── settings/         # 设置页面
└── logo.png              # 应用Logo

主要组件说明

实例管理 (Insts)

• 显示所有项目实例列表
• 支持创建、编辑、删除实例
• 启动/停止运行器
• 下载.sb3项目文件
• 查看运行器详情和插件

插件管理 (Plugins)

• 显示所有插件列表
• 上传、更新、删除插件
• 启用/禁用插件
• 为运行器配置插件
• 查看插件信息和状态

运行器监控

• 实时状态更新（每5秒）
• 运行器详情查看
• 已启用插件管理
• 运行状态监控

设置页面 (Settings)

• 后端地址配置
• 语言切换（中/英）
• 自动刷新设置
• 高级设置和数据重置

API接口

前端与后端通过以下主要接口通信：

认证接口

• POST /login - 用户登录

项目管理

• GET /projects - 获取所有项目
• POST /create - 创建项目
• GET /project/:id - 获取项目文件
• POST /project/:id - 更新项目文件
• GET /project/delete/:id - 删除项目
• POST /project/update/:id - 更新项目描述

运行器管理

• GET /runner/add/:runnerId - 添加运行器
• GET /runner/remove/:runnerId - 移除运行器
• GET /runners - 获取所有运行器
• GET /runner/status/:runnerId - 获取运行器状态
• GET /runners/status - 获取所有运行器状态

插件管理

• GET /plugins - 获取所有插件
• POST /plugin/upload/:id - 上传插件
• GET /plugin/delete/:id - 删除插件
• GET /plugin/info/:id - 获取插件信息
• POST /plugin/enable/:id - 启用插件
• POST /plugin/disable/:id - 禁用插件
• POST /plugin/reload/:id - 重新加载插件
• POST /plugin/enable-for-runner/:id/:runnerId - 为运行器启用插件
• POST /plugin/disable-for-runner/:id/:runnerId - 为运行器禁用插件
• GET /runner/plugins/:runnerId - 获取运行器的插件

开发指南

添加新功能

1. 在 src/components 下创建新组件目录
2. 遵循现有组件的结构和样式规范
3. 使用 globalState 进行状态管理
4. 使用 axiosInstance 进行API调用
5. 使用 Toast 组件进行用户反馈

样式规范

• 使用CSS Modules进行样式隔离
• 遵循BEM命名规范
• 使用CSS变量和现代CSS特性
• 确保响应式设计

状态管理

• 使用 globalState.js 管理全局状态
• 组件内部使用React状态管理
• 避免过度使用全局状态

故障排除

常见问题

1. 无法连接后端

   • 检查后端服务是否运行
   • 确认后端地址配置正确
   • 检查网络连接和CORS配置

2. 登录失败

   • 确认用户名和密码正确
   • 检查后端认证配置
   • 清除浏览器缓存重新登录

3. 页面加载缓慢

   • 检查网络连接
   • 确认后端响应时间
   • 减少自动刷新频率

4. 样式异常

   • 清除浏览器缓存
   • 检查CSS文件是否正确加载
   • 确认浏览器支持现代CSS特性

调试工具

• 浏览器开发者工具
• React Developer Tools
• 网络请求监控
• 控制台日志

浏览器支持

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

许可证

本项目基于MIT许可证开源。

贡献指南

欢迎提交Issue和Pull Request！

1. Fork项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建Pull Request

更新日志

v0.1.0 (当前版本)

• 初始版本发布
• 完整的实例管理功能
• 插件管理系统
• 运行器状态监控
• 现代化UI设计
• 多语言支持
• 响应式布局