243 lines
5.1 KiB
Markdown
243 lines
5.1 KiB
Markdown
# 前端 API
|
||
|
||
## 概述
|
||
|
||
DeEarthX-CE 的前端模块使用 Vue 3 + Vite 开发，提供了用户界面和与后端的交互功能。本章节将详细介绍前端模块的 API 接口。
|
||
|
||
## 项目结构
|
||
|
||
前端模块包含以下主要目录：
|
||
|
||
- `src/components/` - 组件目录
|
||
- `src/views/` - 页面视图目录
|
||
- `src/utils/` - 工具函数目录
|
||
- `src/assets/` - 资源文件目录
|
||
- `lang/` - 语言文件目录
|
||
|
||
## 组件
|
||
|
||
### ModeSelector.vue
|
||
|
||
**功能**：模式选择组件，用于选择不同的操作模式
|
||
|
||
**属性**：
|
||
|
||
- `modes` - 模式数组，包含模式名称和图标
|
||
- `selectedMode` - 当前选中的模式
|
||
- `@mode-change` - 模式变更事件
|
||
|
||
**方法**：
|
||
|
||
- `selectMode(mode: string): void` - 选择指定模式
|
||
|
||
### ProgressCard.vue
|
||
|
||
**功能**：进度卡片组件，用于显示操作进度
|
||
|
||
**属性**：
|
||
|
||
- `title` - 卡片标题
|
||
- `progress` - 进度值（0-100）
|
||
- `status` - 状态（loading, success, error）
|
||
- `message` - 状态消息
|
||
|
||
**方法**：
|
||
|
||
- `updateProgress(progress: number): void` - 更新进度
|
||
- `setStatus(status: string, message: string): void` - 更新状态
|
||
|
||
### StepIndicator.vue
|
||
|
||
**功能**：步骤指示器组件，用于显示多步骤操作的进度
|
||
|
||
**属性**：
|
||
|
||
- `steps` - 步骤数组
|
||
- `currentStep` - 当前步骤索引
|
||
|
||
**方法**：
|
||
|
||
- `goToStep(step: number): void` - 跳转到指定步骤
|
||
|
||
### WebSocketHandler.vue
|
||
|
||
**功能**：WebSocket 处理组件，用于与后端进行实时通信
|
||
|
||
**属性**：
|
||
|
||
- `url` - WebSocket 服务器 URL
|
||
- `@message` - 接收消息事件
|
||
- `@connected` - 连接成功事件
|
||
- `@disconnected` - 连接断开事件
|
||
|
||
**方法**：
|
||
|
||
- `sendMessage(data: any): void` - 发送消息
|
||
- `connect(): void` - 建立连接
|
||
- `disconnect(): void` - 断开连接
|
||
|
||
## 页面视图
|
||
|
||
### Main.vue
|
||
|
||
**功能**：主页面组件
|
||
|
||
**方法**：
|
||
|
||
- `initializeApp(): void` - 初始化应用
|
||
- `loadUserSettings(): void` - 加载用户设置
|
||
- `handleModeChange(mode: string): void` - 处理模式变更
|
||
|
||
### DeEarthView.vue
|
||
|
||
**功能**：DeEarth 模式页面
|
||
|
||
**方法**：
|
||
|
||
- `loadMods(): void` - 加载模组列表
|
||
- `addMod(): void` - 添加模组
|
||
- `removeMod(modId: string): void` - 移除模组
|
||
- `toggleMod(modId: string): void` - 切换模组状态
|
||
|
||
### GalaxyView.vue
|
||
|
||
**功能**：Galaxy 模式页面
|
||
|
||
**方法**：
|
||
|
||
- `loadTemplates(): void` - 加载模板列表
|
||
- `createTemplate(): void` - 创建模板
|
||
- `applyTemplate(templateId: string): void` - 应用模板
|
||
- `exportTemplate(templateId: string): void` - 导出模板
|
||
|
||
### SettingView.vue
|
||
|
||
**功能**：设置页面
|
||
|
||
**方法**：
|
||
|
||
- `loadSettings(): void` - 加载设置
|
||
- `saveSettings(): void` - 保存设置
|
||
- `changeLanguage(language: string): void` - 更改语言
|
||
|
||
### AboutView.vue
|
||
|
||
**功能**：关于页面
|
||
|
||
**方法**：
|
||
|
||
- `loadVersionInfo(): void` - 加载版本信息
|
||
- `checkForUpdates(): void` - 检查更新
|
||
|
||
### TemplateView.vue
|
||
|
||
**功能**：模板管理页面
|
||
|
||
**方法**：
|
||
|
||
- `loadTemplates(): void` - 加载模板列表
|
||
- `createTemplate(): void` - 创建模板
|
||
- `editTemplate(templateId: string): void` - 编辑模板
|
||
- `deleteTemplate(templateId: string): void` - 删除模板
|
||
|
||
### ErrorView.vue
|
||
|
||
**功能**：错误页面
|
||
|
||
**属性**：
|
||
|
||
- `error` - 错误信息
|
||
|
||
**方法**：
|
||
|
||
- `retry(): void` - 重试操作
|
||
- `goHome(): void` - 返回首页
|
||
|
||
## 工具函数
|
||
|
||
### axios.ts
|
||
|
||
**功能**：HTTP 请求工具
|
||
|
||
**方法**：
|
||
|
||
- `get<T>(url: string, params?: any): Promise<T>` - 发送 GET 请求
|
||
- `post<T>(url: string, data?: any): Promise<T>` - 发送 POST 请求
|
||
- `put<T>(url: string, data?: any): Promise<T>` - 发送 PUT 请求
|
||
- `delete<T>(url: string): Promise<T>` - 发送 DELETE 请求
|
||
|
||
### i18n.ts
|
||
|
||
**功能**：国际化工具
|
||
|
||
**方法**：
|
||
|
||
- `loadLanguage(language: string): Promise<void>` - 加载指定语言
|
||
- `t(key: string): string` - 翻译指定键
|
||
- `getCurrentLanguage(): string` - 获取当前语言
|
||
|
||
### router.ts
|
||
|
||
**功能**：路由工具
|
||
|
||
**方法**：
|
||
|
||
- `navigateTo(path: string): void` - 导航到指定路径
|
||
- `goBack(): void` - 返回上一页
|
||
- `getCurrentRoute(): string` - 获取当前路由
|
||
|
||
## 状态管理
|
||
|
||
前端使用 Vue 的响应式系统进行状态管理，主要状态包括：
|
||
|
||
- `mods` - 模组列表
|
||
- `templates` - 模板列表
|
||
- `settings` - 用户设置
|
||
- `currentMode` - 当前模式
|
||
- `isLoading` - 加载状态
|
||
- `error` - 错误信息
|
||
|
||
## API 调用
|
||
|
||
前端通过以下方式与后端进行交互：
|
||
|
||
1. **HTTP 请求**：使用 axios 发送 RESTful API 请求
|
||
2. **WebSocket**：使用 WebSocketHandler 组件进行实时通信
|
||
3. **本地存储**：使用 localStorage 存储用户设置和缓存数据
|
||
|
||
## 语言支持
|
||
|
||
前端支持多种语言，语言文件位于 `lang/` 目录：
|
||
|
||
- `zh_cn.json` - 简体中文
|
||
- `zh_tw.json` - 繁体中文
|
||
- `zh_hk.json` - 香港中文
|
||
- `en_us.json` - 英文
|
||
- `ja_jp.json` - 日文
|
||
- `fr_fr.json` - 法文
|
||
- `es_es.json` - 西班牙文
|
||
- `de_de.json` - 德文
|
||
|
||
## 主题与样式
|
||
|
||
前端使用 Tailwind CSS 进行样式管理，支持响应式布局和主题定制。
|
||
|
||
## 构建与部署
|
||
|
||
### 开发模式
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产版本
|
||
|
||
```bash
|
||
npm run preview
|
||
``` |