# trans_desktop

**Repository Path**: joker_dj/trans_desktop

## Basic Information

- **Project Name**: trans_desktop
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-02
- **Last Updated**: 2025-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Trans Desktop 应用程序

## 项目简介

Trans Desktop 是一个基于 Electron、Vite 和 Vue 3 构建的现代桌面应用程序。它提供了一个跨平台的桌面环境，具有自定义标题栏、系统托盘集成和基本的路由导航功能。

## 功能特点

- **自定义标题栏**：替代了系统默认标题栏，提供了一致的用户界面体验
- **系统托盘集成**：应用可以最小化到系统托盘，点击托盘图标可以快速恢复窗口
- **单实例应用**：确保只有一个应用实例在运行，避免重复启动
- **响应式界面**：基于 Vue 3 构建的现代化响应式用户界面
- **路由导航**：使用 Vue Router 实现的页面导航系统
- **日志系统**：内置日志记录功能，方便排查问题和监控应用状态

## 技术栈

- **Electron**: 跨平台桌面应用框架
- **Vue 3**: 前端框架
- **Vite**: 现代前端构建工具
- **Vue Router**: 页面路由管理

## 开发环境配置

### 前提条件

- Node.js (推荐 v16 或更高版本)
- npm 或 yarn 包管理器

### 安装依赖

```bash
npm install
# 或
yarn install
```

## 启动应用

### 开发模式

启动开发服务器和 Electron 应用：

```bash
npm start
# 或
yarn start
```

这个命令会同时启动 Vite 开发服务器和 Electron 应用，并启用热重载功能。

### 仅启动前端开发服务器

```bash
npm run dev
# 或
yarn dev
```

### 仅启动 Electron

```bash
npm run electron:dev
# 或
yarn electron:dev
```

## 构建应用

### 构建生产版本

```bash
npm run electron:build
# 或
yarn electron:build
```

这个命令会执行以下操作：
1. 使用 Vite 构建前端资源
2. 使用 electron-builder 打包应用程序

构建完成后，可以在 `release` 目录下找到打包好的应用程序。

### 打包配置

打包配置在 `package.json` 文件的 `build` 部分定义，包括：

- **Windows**: 使用 NSIS 安装程序，支持自定义安装目录
- **macOS**: 打包为 DMG 格式
- **Linux**: 打包为 AppImage 格式

## 应用结构

```
├── build/                # 构建资源目录，包含应用图标
├── dist/                 # 前端构建输出目录
├── electron/             # Electron 主进程代码
│   ├── main.js           # 主进程入口文件
│   ├── preload.js        # 预加载脚本
│   └── logger.js         # 日志模块
├── public/               # 静态资源目录
├── release/              # 应用打包输出目录
├── src/                  # 前端源代码
│   ├── assets/           # 前端资源文件
│   ├── router/           # 路由配置
│   ├── views/            # 页面组件
│   ├── App.vue           # 根组件
│   └── main.js           # 前端入口文件
├── index.html            # HTML 模板
├── package.json          # 项目配置和依赖
└── vite.config.js        # Vite 配置
```

## 自定义和扩展

### 修改应用图标

替换 `build/icon.ico` 文件（Windows）或相应平台的图标文件。

### 添加新页面

1. 在 `src/views` 目录下创建新的 Vue 组件
2. 在 `src/router/index.js` 中添加新的路由配置

### 修改窗口设置

编辑 `electron/main.js` 文件中的 `createWindow` 函数来调整窗口大小、行为等。

## 注意事项

- 应用使用自定义标题栏，窗口控制按钮（最小化、最大化、关闭）通过 IPC 通信实现
- 关闭窗口时应用会最小化到系统托盘而不是完全退出
- 通过系统托盘菜单的「退出」选项可以完全退出应用

## 日志系统

应用内置了日志系统，可以记录应用运行过程中的各种事件和错误，方便排查问题。

### 日志位置

日志文件保存在应用安装目录下的 `logs` 文件夹中：

- 例如: `C:\Program Files\Trans Desktop\logs\app-yyyy-mm-dd.log`

日志文件按日期命名，每天创建一个新的日志文件。

### 日志格式

日志条目格式如下：

```
[时间戳] [日志级别] 日志内容
```

例如：

```
[2023-08-02T15:30:45.123Z] [INFO] 应用程序启动
```

### 在渲染进程中使用日志

在 Vue 组件中，可以通过 `window.electron.log` 接口记录日志：

```javascript
// 记录普通信息
window.electron.log.info('这是一条信息日志');

// 记录警告
window.electron.log.warn('这是一条警告日志');

// 记录错误
window.electron.log.error('发生错误', new Error('错误详情'));
```

### 日志级别

日志系统支持以下级别：

- `INFO`: 普通信息，记录应用正常运行的事件
- `WARN`: 警告信息，记录可能的问题但不影响应用运行
- `ERROR`: 错误信息，记录应用运行中的错误和异常

### 自动记录的事件

系统会自动记录以下事件：

- 应用启动和退出
- 窗口创建、显示和隐藏
- 页面加载成功和失败
- 未捕获的异常和Promise拒绝
- 渲染进程崩溃
- 子进程异常退出
- 页面JavaScript错误
- 控制台错误信息

### 错误日志记录

系统会自动捕获并记录以下类型的错误：

1. **主进程错误**：
   - 未捕获的异常
   - 未处理的Promise拒绝
   - 应用程序崩溃

2. **渲染进程错误**：
   - JavaScript运行时错误
   - 未处理的Promise拒绝
   - 页面加载失败
   - 渲染进程崩溃
   - 控制台错误信息

3. **子进程错误**：
   - 子进程异常退出
   - 子进程崩溃

所有错误都会记录详细信息，包括错误消息、堆栈跟踪（如果可用）、发生位置和时间戳，便于排查问题。

## 许可证

[ISC License](https://opensource.org/licenses/ISC)