Hajimi UI - 多后端实例管理前端

📋 项目概述

Hajimi UI 是 Hajimi 项目的前端界面，现已支持多后端实例管理功能。用户可以同时管理和切换多个 Hajimi 后端服务器，实现统一的管理界面。

✨ 新功能特性

🔧 多后端实例管理

实例添加: 支持添加多个 Hajimi 后端实例
连接测试: 自动测试后端连接状态
实时切换: 在不同后端实例间无缝切换
状态监控: 实时显示连接状态和活跃实例

💾 配置管理

本地存储: 配置自动保存到浏览器本地存储
导入导出: 支持配置文件的导入导出
预设模板: 提供常用配置预设
批量操作: 支持批量测试连接

🎨 用户界面

统一导航: 新增顶部导航栏
实时指示: 顶部显示当前活跃后端
响应式设计: 完美适配移动端和桌面端
使用指南: 内置详细的使用指南

🚀 快速开始

项目设置

npm install

开发环境运行

npm run dev

生产环境构建

npm run build

1. 基本使用

访问前端: 打开 Hajimi 前端界面
查看当前: 顶部显示当前连接的后端实例
切换实例: 使用顶部下拉菜单切换后端
管理实例: 点击"后端管理"进入管理页面

2. 添加新实例

进入"后端管理"页面
点击"添加实例"按钮
填写服务器信息：
- 实例名称（如：生产服务器）
- 服务器地址（如：https://your-hajimi.com）
- 访问密码（可选）
- 描述信息（可选）
系统自动测试连接
添加成功后可立即切换使用

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 接口

后端实例管理

前端通过以下方式与后端交互：

动态 API 端点: 根据当前活跃实例动态构建 API URL
统一错误处理: 自动处理连接错误和超时
请求重试: 失败时自动重试机制
状态同步: 实时更新连接状态

接口格式

// 原有接口调用
fetch('/api/dashboard-data')

// 新的多后端调用
backendStore.apiRequest('api/dashboard-data')

📱 移动端适配

界面完全响应式设计，支持：

触摸友好的交互
适配小屏幕的布局
简化的移动端导航
优化的表单输入体验

🆘 故障排除

常见问题

无法连接后端
- 检查服务器地址是否正确
- 确认服务器是否运行中
- 验证网络连接是否正常
密码验证失败
- 确认密码是否正确
- 检查后端是否启用了认证
配置丢失
- 检查浏览器是否清除了本地存储
- 尝试重新导入配置文件

调试方法

打开浏览器开发者工具
查看 Console 标签页的错误信息
检查 Network 标签页的网络请求
查看 Application > Local Storage 中的配置

🔄 更新日志

v1.1.0 - 多后端支持

✨ 新增多后端实例管理功能
🎨 重新设计用户界面
📱 优化移动端体验
📚 添加详细使用指南
🔧 完善错误处理机制

v1.0.0 - 基础版本

📊 基本的仪表盘功能
⚙️ 配置管理
📈 统计图表
🌙 夜间模式

🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目！

Fork 本仓库
创建功能分支
提交变更
推送到分支
创建 Pull Request

📞 技术支持

如需技术支持，请：

查看本文档的故障排除部分
搜索已有的 GitHub Issues
创建新的 Issue 描述问题
提供详细的错误信息和环境信息