ZenEcho
c2bb7e6ed8
- 新增 API 模块统一封装所有 IPC 调用，提高代码可维护性 - 创建 `src/types/index.ts` 集中定义核心业务类型（Game, NodeConfig 等） - 新增组合式函数 `useFilePicker`、`useGameScanner` 和 `useAppUpdater` 以复用逻辑 - 改进设置页面，新增侧边栏导航和多个设置模块（通用、网络、日志、关于） - 优化本地代理逻辑，增加节点列表变化监听和自动重启机制 - 扩展协议解析测试用例，覆盖更多 VMess、VLESS Reality 等场景 - 更新项目结构文档 `docs/src-structure.md` 说明模块职责 - 修复 Electron 主进程预加载路径兼容性问题
93 lines
4.8 KiB
Markdown
93 lines
4.8 KiB
Markdown
# Frontend (Vue) 项目结构说明
|
|
|
|
本文档详细描述了 `src/` 目录下的代码结构与模块功能。本项目采用 **Vue 3 + TypeScript + Vite** 技术栈，使用 **Composition API** 和 **Pinia** 进行状态管理。
|
|
|
|
## 目录树
|
|
|
|
```
|
|
src/
|
|
├── api/ # [接口层] 后端通信接口 (IPC 封装)
|
|
│ ├── index.ts # 统一导出所有 API 模块
|
|
│ └── *.ts # 各业务模块 API (如 games.ts, nodes.ts, singbox.ts)
|
|
│
|
|
├── assets/ # [资源层] 静态资源文件
|
|
│ ├── main.css # 全局样式入口
|
|
│ └── style.css # 基础样式定义
|
|
│
|
|
├── autoImport/ # [自动导入] 自动生成的类型声明
|
|
│ ├── auto-imports.d.ts # 自动导入函数的类型声明
|
|
│ └── components.d.ts # 自动导入组件的类型声明
|
|
│
|
|
├── components/ # [组件层] Vue 组件
|
|
│ ├── common/ # 通用基础组件 (图标选择器、主题切换等)
|
|
│ ├── dashboard/ # 仪表盘相关组件 (图表、节点选择器)
|
|
│ ├── library/ # 游戏库相关组件 (分类管理、编辑弹窗)
|
|
│ ├── node/ # 节点管理相关组件 (节点卡片、编辑/导入弹窗)
|
|
│ └── settings/ # 设置页面相关组件 (侧边栏、各设置模块)
|
|
│
|
|
├── composables/ # [逻辑层] 组合式函数 (Hooks)
|
|
│ ├── useAppUpdater.ts # 应用更新逻辑
|
|
│ ├── useFilePicker.ts # 文件选择逻辑
|
|
│ ├── useGameScanner.ts # 游戏扫描逻辑
|
|
│ └── useTheme.ts # 主题切换逻辑
|
|
│
|
|
├── constants/ # [常量层] 全局常量定义
|
|
│ └── index.ts # 常量统一导出
|
|
│
|
|
├── layouts/ # [布局层] 页面布局组件
|
|
│ └── MainLayout.vue # 主布局 (侧边栏 + 内容区)
|
|
│
|
|
├── locales/ # [国际化] i18n 语言包
|
|
│ ├── en-US.json # 英文翻译
|
|
│ └── zh-CN.json # 中文翻译
|
|
│
|
|
├── router/ # [路由层] 路由配置
|
|
│ └── index.ts # Vue Router 配置 (定义路由表)
|
|
│
|
|
├── stores/ # [状态层] Pinia 状态管理
|
|
│ ├── index.ts # Pinia 实例导出
|
|
│ ├── games.ts # 游戏数据状态
|
|
│ ├── nodes.ts # 节点数据状态
|
|
│ ├── settings.ts # 应用设置状态
|
|
│ └── local-proxy.ts # 本地代理状态
|
|
│
|
|
├── types/ # [类型层] TypeScript 类型定义
|
|
│ ├── electron.d.ts # Electron API 类型扩展
|
|
│ └── index.ts # 核心业务类型定义 (Game, NodeConfig 等)
|
|
│
|
|
├── utils/ # [工具层] 通用工具函数
|
|
│ ├── latency-session.ts # 延迟测试会话管理
|
|
│ ├── protocol.ts # 代理协议解析工具 (VMess, SS, VLESS 等)
|
|
│ ├── runtime-logger.ts # 运行时日志捕获工具
|
|
│ └── singbox-config.ts # sing-box 配置文件生成器
|
|
│
|
|
├── views/ # [视图层] 页面级组件
|
|
│ ├── dashboard/ # 仪表盘页面
|
|
│ ├── library/ # 游戏库页面
|
|
│ ├── nodes/ # 节点列表页面
|
|
│ └── settings/ # 设置中心页面
|
|
│
|
|
├── App.vue # 应用根组件
|
|
├── main.ts # 应用入口文件 (挂载 Vue, Pinia, Router)
|
|
└── vite-env.d.ts # Vite 环境类型声明
|
|
```
|
|
|
|
## 模块详细说明
|
|
|
|
### 1. 接口层 (`api/`)
|
|
- **IPC 封装**: 所有与 Electron 主进程的通信都通过 `window.electron` 等预加载脚本暴露的对象进行。
|
|
- **模块化**: 每个文件对应后端的 Service 模块，例如 `singbox.ts` 对应后端的 `SingboxService`。
|
|
|
|
### 2. 状态层 (`stores/`)
|
|
- **`games.ts`**: 管理本地游戏列表、当前选中游戏、加速状态。
|
|
- **`nodes.ts`**: 管理节点列表、节点延迟测试结果。
|
|
- **`settings.ts`**: 持久化存储用户设置（语言、主题、DNS 模式等）。
|
|
|
|
### 3. 工具层 (`utils/`)
|
|
- **`protocol.ts`**: 核心协议解析逻辑，负责将分享链接 (vmess://, ss://) 解析为标准节点配置对象。
|
|
- **`singbox-config.ts`**: 根据当前游戏规则和选中的节点，动态生成 sing-box 的 JSON 配置文件。
|
|
|
|
### 4. 逻辑层 (`composables/`)
|
|
- **Composition API**: 封装可复用的业务逻辑，例如 `useTheme.ts` 处理深色模式切换和主题色应用。
|
|
- **`useGameScanner.ts`**: 协调前端 UI 和后端扫描接口，处理扫描进度和结果展示。
|