主界面修改及代理模块初始化
This commit is contained in:
zhongluofeng
+111
-27
@@ -13,13 +13,42 @@
|
||||
|
||||
### 模块系统
|
||||
|
||||
项目采用模块化架构，每个模块包含前端组件和 Rust 后端命令：
|
||||
项目采用统一的模块注册机制。每个模块通过 `src/modules/<name>/index.ts` 导出 `ModuleConfig` 配置，由 `src/modules/registry.ts` 中的 `moduleRegistry` 单例统一管理。
|
||||
|
||||
```
|
||||
src/modules/<module-name>/ # 前端模块
|
||||
src-tauri/src/commands/<name>.rs # Rust 命令
|
||||
src/modules/<module-name>/
|
||||
├── index.ts # 模块配置（ModuleConfig）
|
||||
├── ModuleComponent.vue # 前端组件
|
||||
src-tauri/src/commands/ # Rust 命令（可选）
|
||||
```
|
||||
|
||||
#### 模块配置类型
|
||||
|
||||
```typescript
|
||||
// src/types/module.ts
|
||||
interface ModuleConfig {
|
||||
id: string // 唯一标识
|
||||
name: string // 显示名称
|
||||
icon: string // 图标标识（对应 icons.ts 中的 key）
|
||||
description: string // 模块描述
|
||||
category: ModuleCategory // 分类：'network' | 'tool' | 'system' | 'media'
|
||||
defaultEnabled?: boolean // 默认是否启用
|
||||
builtin?: boolean // 是否内置模块（不可禁用）
|
||||
loader?: () => Promise<{ default: Component }> // 懒加载
|
||||
component?: Component // 直接组件引用（内置模块）
|
||||
searchItems?: SearchIndexItem[] // 全局搜索项
|
||||
process?: ModuleProcessConfig // 进程配置（需要子进程的模块）
|
||||
lifecycle?: ModuleLifecycle // 生命周期钩子
|
||||
order?: number // 排序权重
|
||||
}
|
||||
```
|
||||
|
||||
#### 注册新模块
|
||||
|
||||
1. 创建 `src/modules/<name>/index.ts`，导出 `moduleConfig`
|
||||
2. 在 `src/modules/index.ts` 中添加导入
|
||||
3. 在 `src/modules/icons.ts` 中添加图标映射
|
||||
|
||||
### IPC 通信
|
||||
|
||||
前端通过 Tauri API 调用 Rust 命令：
|
||||
@@ -75,18 +104,30 @@ export const useModuleStore = defineStore('moduleName', {
|
||||
创建 `src/modules/<module-name>/` 目录，包含以下文件：
|
||||
|
||||
```typescript
|
||||
// index.ts - 模块注册
|
||||
import type { ModuleConfig } from '@/types'
|
||||
import ModuleComponent from './ModuleComponent.vue'
|
||||
// index.ts - 模块配置
|
||||
import type { ModuleConfig } from '@/types/module'
|
||||
|
||||
export const moduleConfig: ModuleConfig = {
|
||||
id: 'module-name',
|
||||
name: '模块名称',
|
||||
icon: 'icon-name',
|
||||
component: ModuleComponent
|
||||
icon: 'module-name', // 需在 icons.ts 中添加映射
|
||||
description: '模块描述',
|
||||
category: 'tool', // 'network' | 'tool' | 'system' | 'media'
|
||||
defaultEnabled: true,
|
||||
loader: () => import('./ModuleComponent.vue'),
|
||||
searchItems: [
|
||||
{
|
||||
title: '功能名称',
|
||||
description: '功能描述',
|
||||
keywords: ['关键词1', '关键词2']
|
||||
}
|
||||
],
|
||||
order: 100
|
||||
}
|
||||
```
|
||||
|
||||
> 注册模块时，还需在 `src/modules/index.ts` 中添加导入，在 `src/modules/icons.ts` 中添加图标映射。
|
||||
|
||||
```vue
|
||||
<!-- ModuleComponent.vue - 主组件 -->
|
||||
<script setup lang="ts">
|
||||
@@ -224,23 +265,67 @@ pub fn run() {
|
||||
|
||||
## 进程管理
|
||||
|
||||
对于需要管理外部进程的模块（如 mihomo、aria2），使用 `tauri-plugin-shell`：
|
||||
对于需要管理外部进程的模块（如 mihomo、aria2），使用内置的 `ProcessManager`：
|
||||
|
||||
```rust
|
||||
use tauri_plugin_shell::ShellExt;
|
||||
### 架构
|
||||
|
||||
#[tauri::command]
|
||||
pub fn start_process(app: tauri::AppHandle) -> Result<(), String> {
|
||||
let mut cmd = app.shell().command("path/to/executable");
|
||||
cmd.arg("--config").arg("config.yaml");
|
||||
|
||||
let child = cmd.spawn().map_err(|e| e.to_string())?;
|
||||
|
||||
// 保存进程句柄
|
||||
Ok(())
|
||||
- **Rust 端** (`src-tauri/src/process_manager.rs`)：`ProcessManager` 通过 `std::process::Command` 管理子进程，支持启动、停止、崩溃检测和自动重启
|
||||
- **前端** (`src/stores/processStore.ts`)：Pinia store，通过 `invoke` 调用 Rust 命令，通过 `listen` 接收进程状态变更事件
|
||||
- **模块配置**：在模块的 `index.ts` 中通过 `ModuleProcessConfig` 声明进程信息
|
||||
|
||||
### 模块配置
|
||||
|
||||
```typescript
|
||||
// src/modules/proxy/index.ts
|
||||
export const moduleConfig: ModuleConfig = {
|
||||
// ...
|
||||
process: {
|
||||
name: 'mihomo',
|
||||
executable: '', // 运行时确定
|
||||
args: ['-f', 'config.yaml'],
|
||||
autoStart: false, // 模块启用时是否自动启动
|
||||
restartOnCrash: true, // 崩溃后自动重启
|
||||
maxRestarts: 3 // 最大重启次数（0 = 不限制）
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 前端 API
|
||||
|
||||
```typescript
|
||||
import { useProcessStore } from '@/stores/processStore'
|
||||
|
||||
const processStore = useProcessStore()
|
||||
|
||||
// 通过模块 ID 启动进程（自动读取模块配置）
|
||||
await processStore.startByModule('proxy')
|
||||
|
||||
// 停止进程
|
||||
await processStore.stopByModule('proxy')
|
||||
|
||||
// 获取进程状态
|
||||
const status = processStore.getProcessStatus('proxy')
|
||||
|
||||
// 监听状态变更（在 main.ts 中已初始化）
|
||||
// processStore.initListener()
|
||||
```
|
||||
|
||||
### Rust 命令
|
||||
|
||||
| 命令 | 参数 | 返回值 |
|
||||
|------|------|--------|
|
||||
| `start_process` | `StartProcessParams` | `ProcessInfo` |
|
||||
| `stop_process` | `id: String` | `()` |
|
||||
| `get_process_status` | `id: String` | `Option<ProcessInfo>` |
|
||||
| `get_all_process_status` | - | `Vec<ProcessInfo>` |
|
||||
| `stop_all_processes` | - | `()` |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 载荷 | 触发时机 |
|
||||
|--------|------|----------|
|
||||
| `process-status-changed` | `ProcessInfo` | 进程状态变更（崩溃、重启、停止） |
|
||||
|
||||
## 数据存储
|
||||
|
||||
### 配置文件
|
||||
@@ -323,13 +408,12 @@ let path = Path::new("data").join("config.json");
|
||||
|
||||
## 开发流程
|
||||
|
||||
1. **创建模块目录**：`src/modules/<module-name>/` 和 `src-tauri/src/commands/<name>.rs`
|
||||
2. **实现前端组件**：创建 Vue 组件和 Pinia store
|
||||
3. **实现 Rust 命令**：编写后端逻辑和命令
|
||||
4. **注册命令**：在 `lib.rs` 中注册新命令
|
||||
5. **配置权限**：更新 `capabilities/default.json`
|
||||
6. **测试**：运行 `bun run tauri dev` 测试
|
||||
7. **构建**：运行 `bun run tauri build` 构建生产版本
|
||||
1. **创建模块目录**：`src/modules/<module-name>/`，编写组件和 `index.ts` 配置
|
||||
2. **注册模块**：在 `src/modules/index.ts` 中添加导入，在 `src/modules/icons.ts` 中添加图标映射
|
||||
3. **实现 Rust 命令**：在 `src-tauri/src/` 中编写后端逻辑，在 `lib.rs` 中注册命令
|
||||
4. **配置权限**：更新 `capabilities/default.json`（如需要）
|
||||
5. **测试**：运行 `bun run tauri dev` 测试
|
||||
6. **构建**：运行 `bun run tauri build` 构建生产版本
|
||||
|
||||
## 模板代码生成
|
||||
|
||||
|
||||
Reference in New Issue
Block a user