page/README.md

# 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. 提供详细的错误信息和环境信息