Spaces:
Paused
Paused
| # Hajimi UI - 多后端实例管理前端 | |
| ## 📋 项目概述 | |
| Hajimi UI 是 Hajimi 项目的前端界面，现已支持多后端实例管理功能。用户可以同时管理和切换多个 Hajimi 后端服务器，实现统一的管理界面。 | |
| ## ✨ 新功能特性 | |
| ### 🔧 多后端实例管理 | |
| - **实例添加**: 支持添加多个 Hajimi 后端实例 | |
| - **连接测试**: 自动测试后端连接状态 | |
| - **实时切换**: 在不同后端实例间无缝切换 | |
| - **状态监控**: 实时显示连接状态和活跃实例 | |
| ### 💾 配置管理 | |
| - **本地存储**: 配置自动保存到浏览器本地存储 | |
| - **导入导出**: 支持配置文件的导入导出 | |
| - **预设模板**: 提供常用配置预设 | |
| - **批量操作**: 支持批量测试连接 | |
| ### 🎨 用户界面 | |
| - **统一导航**: 新增顶部导航栏 | |
| - **实时指示**: 顶部显示当前活跃后端 | |
| - **响应式设计**: 完美适配移动端和桌面端 | |
| - **使用指南**: 内置详细的使用指南 | |
| ## 🚀 快速开始 | |
| ### 项目设置 | |
| ```sh | |
| npm install | |
| ``` | |
| ### 开发环境运行 | |
| ```sh | |
| npm run dev | |
| ``` | |
| ### 生产环境构建 | |
| ```sh | |
| npm run build | |
| ``` | |
| ### 1. 基本使用 | |
| 1. **访问前端**: 打开 Hajimi 前端界面 | |
| 2. **查看当前**: 顶部显示当前连接的后端实例 | |
| 3. **切换实例**: 使用顶部下拉菜单切换后端 | |
| 4. **管理实例**: 点击"后端管理"进入管理页面 | |
| ### 2. 添加新实例 | |
| 1. 进入"后端管理"页面 | |
| 2. 点击"添加实例"按钮 | |
| 3. 填写服务器信息： | |
| - 实例名称（如：生产服务器） | |
| - 服务器地址（如：https://your-hajimi.com） | |
| - 访问密码（可选） | |
| - 描述信息（可选） | |
| 4. 系统自动测试连接 | |
| 5. 添加成功后可立即切换使用 | |
| ### 3. 管理现有实例 | |
| - **测试连接**: 验证服务器是否可达 | |
| - **编辑信息**: 修改名称、地址、密码等 | |
| - **删除实例**: 移除不需要的实例 | |
| - **切换使用**: 设置为当前活跃实例 | |
| ## 📖 详细功能说明 | |
| ### 后端实例状态 | |
| 每个后端实例都有以下状态： | |
| - **已连接** ✅: 服务器响应正常 | |
| - **未连接** ❌: 服务器无法访问 | |
| - **活跃** ⚡: 当前正在使用的实例 | |
| ### 配置持久化 | |
| 所有配置都会自动保存到浏览器的 localStorage 中，包括： | |
| - 后端实例列表 | |
| - 当前活跃的实例 | |
| - 连接状态信息 | |
| - 用户偏好设置 | |
| ### 安全性考虑 | |
| - 访问密码加密存储在本地 | |
| - 不会向第三方发送敏感信息 | |
| - 支持 HTTPS 连接 | |
| - 建议使用强密码保护后端服务 | |
| ## 🛠️ 开发相关 | |
| ### 项目结构 | |
| ``` | |
| src/ | |
| ├── components/ | |
| │ ├── backend/ # 后端管理相关组件 | |
| │ │ ├── BackendManager.vue # 后端实例管理器 | |
| │ │ ├── BackendSwitcher.vue # 后端切换器 | |
| │ │ └── UserGuide.vue # 用户指南 | |
| │ ├── dashboard/ # 仪表盘组件 | |
| │ └── Navigation.vue # 导航组件 | |
| ├── stores/ | |
| │ ├── backend.js # 后端管理状态 | |
| │ └── dashboard.js # 仪表盘状态 | |
| ├── views/ | |
| │ ├── BackendView.vue # 后端管理页面 | |
| │ └── DashboardView.vue # 仪表盘页面 | |
| └── router/ | |
| └── index.js # 路由配置 | |
| ``` | |
| ### 核心技术栈 | |
| - **Vue 3**: 组合式 API | |
| - **Pinia**: 状态管理 | |
| - **Vue Router**: 路由管理 | |
| - **Vite**: 构建工具 | |
| ## 🔧 API 接口 | |
| ### 后端实例管理 | |
| 前端通过以下方式与后端交互： | |
| 1. **动态 API 端点**: 根据当前活跃实例动态构建 API URL | |
| 2. **统一错误处理**: 自动处理连接错误和超时 | |
| 3. **请求重试**: 失败时自动重试机制 | |
| 4. **状态同步**: 实时更新连接状态 | |
| ### 接口格式 | |
| ```javascript | |
| // 原有接口调用 | |
| fetch('/api/dashboard-data') | |
| // 新的多后端调用 | |
| backendStore.apiRequest('api/dashboard-data') | |
| ``` | |
| ## 📱 移动端适配 | |
| 界面完全响应式设计，支持： | |
| - 触摸友好的交互 | |
| - 适配小屏幕的布局 | |
| - 简化的移动端导航 | |
| - 优化的表单输入体验 | |
| ## 🆘 故障排除 | |
| ### 常见问题 | |
| 1. **无法连接后端** | |
| - 检查服务器地址是否正确 | |
| - 确认服务器是否运行中 | |
| - 验证网络连接是否正常 | |
| 2. **密码验证失败** | |
| - 确认密码是否正确 | |
| - 检查后端是否启用了认证 | |
| 3. **配置丢失** | |
| - 检查浏览器是否清除了本地存储 | |
| - 尝试重新导入配置文件 | |
| ### 调试方法 | |
| 1. 打开浏览器开发者工具 | |
| 2. 查看 Console 标签页的错误信息 | |
| 3. 检查 Network 标签页的网络请求 | |
| 4. 查看 Application > Local Storage 中的配置 | |
| ## 🔄 更新日志 | |
| ### v1.1.0 - 多后端支持 | |
| - ✨ 新增多后端实例管理功能 | |
| - 🎨 重新设计用户界面 | |
| - 📱 优化移动端体验 | |
| - 📚 添加详细使用指南 | |
| - 🔧 完善错误处理机制 | |
| ### v1.0.0 - 基础版本 | |
| - 📊 基本的仪表盘功能 | |
| - ⚙️ 配置管理 | |
| - 📈 统计图表 | |
| - 🌙 夜间模式 | |
| ## 🤝 贡献指南 | |
| 欢迎提交 Issue 和 Pull Request 来帮助改进项目！ | |
| 1. Fork 本仓库 | |
| 2. 创建功能分支 | |
| 3. 提交变更 | |
| 4. 推送到分支 | |
| 5. 创建 Pull Request | |
| ## 📞 技术支持 | |
| 如需技术支持，请： | |
| 1. 查看本文档的故障排除部分 | |
| 2. 搜索已有的 GitHub Issues | |
| 3. 创建新的 Issue 描述问题 | |
| 4. 提供详细的错误信息和环境信息 |