# Hlol

**Repository Path**: kikolove/hlol

## Basic Information

- **Project Name**: Hlol
- **Description**: Hlol - 一款LOL资讯整合桌面软件
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-10-31
- **Last Updated**: 2026-01-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# HLOL

## 介绍

HLOL 是一个基于 **Electron + Vue 2** 的桌面应用程序练习项目。该项目旨在整理和展示热门游戏《英雄联盟》(League of Legends, LOL) 的相关资讯，并通过实际开发过程来进阶前端工程化技能（涵盖 Node.js、Vue、Electron 等技术栈）。

虽然项目初衷是用于个人技术练手，但其功能设计涵盖了桌面软件的常用场景，是一个完整的全栈（前后端 + 桌面客户端）实践案例。

## 功能特性

- **资讯聚合**：展示LOL英雄列表、资讯详情等，采用 Ant Design Vue 构建界面。
- **桌面级体验**：
  - **自定义窗口**：实现了无边框窗口、自定义标题栏及窗口控制（最小化、最大化、关闭）。
  - **系统托盘**：支持系统托盘运行。
  - **全局快捷键**：可通过设置快捷键快速触发预设动作。
  - **开机自启**：支持软件开机自动运行功能。
- **系统交互**：
  - **电源监控**：监听系统电源状态变化。
  - **屏幕获取**：支持截取屏幕或获取屏幕信息。
  - **文件操作**：本地目录浏览、文件选择与处理。
- **高级功能**：
  - **画中画窗口 (BrowserView)**：实现了在主窗口中嵌入子窗口的功能。
  - **扩展加载**：支持加载本地 Chrome 浏览器扩展。
- **后端服务**：内嵌基于 **Egg.js** 的 Node.js 后端，提供 API 接口和数据持久化支持（使用 Lowdb）。

## 技术栈

- **核心框架**：Electron
- **前端框架**：Vue 2.x
- **UI 组件库**：Ant Design Vue
- **后端框架**：Egg.js (Node.js)
- **数据库**：Lowdb (基于 JSON 的轻量级数据库)
- **构建工具**：Webpack / Vue CLI

## 项目结构

项目采用多进程架构，主要分为以下三个部分：

- **`electron/`**: 主进程代码。负责窗口管理、系统原生 API 调用（如快捷键、托盘、通知、文件操作）以及后端服务的启动。
- **`frontend/`**: 渲染进程代码。前端 Vue 应用，负责用户界面展示和与主进程的通信（IPC）。
- **`app/`**: 后端服务代码。Egg.js 应用，提供数据接口，处理业务逻辑。

## 快速开始

确保本地已安装 [Node.js](https://nodejs.org/) (建议 v14+) 和 [Yarn](https://yarnpkg.com/)。

1. **克隆项目**
   ```bash
   git clone https://gitee.com/kikolove/hlol.git
   ```

2. **安装依赖**
   ```bash
   cd hlol
   yarn install
   ```

3. **启动开发环境**
   ```bash
   yarn run dev
   ```
   该命令会同时启动前端热更新和 Electron 应用。

4. **构建生产版本**
   ```bash
   yarn run build
   ```

## 软件截图

> **声明**：软件仅用于展示内容，不包含任何修改游戏客户端或恶意代码。

### 首页
![首页截图](https://images.gitee.com/uploads/images/2021/1115/135706_b76f4d20_8841471.png "屏幕截图.png")

### 其他功能展示
![功能截图](https://images.gitee.com/uploads/images/2021/1115/135840_e8a835f2_8841471.png "其余部分内容截图.png")
![功能截图](https://images.gitee.com/uploads/images/2021/1115/140024_b9891096_8841471.png "其余部分内容截图.png")

## 许可证

本项目仅供学习交流使用。详细许可证信息请查看项目根目录下的 `LICENSE` 文件。