# electron-vite-tem

**Repository Path**: keons/electron-vite-tem

## Basic Information

- **Project Name**: electron-vite-tem
- **Description**: electron-vite-tem
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-10
- **Last Updated**: 2026-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Identification - 票据识别管理系统

基于 Electron + Vue 3 + TypeScript 构建的桌面端票据识别与管理系统，提供票据录入、识别、详情查看、截图复制等一站式管理功能。

## 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | [Electron](https://www.electronjs.org/) 25 + [Vue 3](https://vuejs.org/) 3.3 |
| 语言 | [TypeScript](https://www.typescriptlang.org/) |
| 构建 | [electron-vite](https://electron-vite.org/) + [electron-builder](https://www.electron.build/) |
| 状态管理 | [Pinia](https://pinia.vuejs.org/) (支持持久化) |
| 路由 | [Vue Router](https://router.vuejs.org/) 4 (Hash 模式) |
| UI 组件 | [Element Plus](https://element-plus.org/) |
| HTTP 请求 | [Axios](https://axios-http.com/) (含请求/响应拦截) |
| 自动更新 | [electron-updater](https://www.electron.build/auto-update) |
| 工具库 | lodash-es, decimal.js, crypto-js, howler, clipboard 等 |
| CSS 预处理器 | Less / Sass |
| 包管理器 | pnpm |

## 项目结构

```text
├── build/                    # 应用图标与 Mac 授权文件
├── resources/                # 额外资源文件
├── src/
│   ├── main/                 # 主进程 (Electron)
│   │   ├── index.ts          # 主进程入口，窗口管理、IPC 通信
│   │   └── auth.ts           # Token 认证管理 (electron-store)
│   ├── preload/              # 预加载脚本
│   │   └── index.ts          # contextBridge 暴露 API
│   └── renderer/             # 渲染进程 (Vue 应用)
│       ├── env/              # 环境变量配置
│       ├── src/
│       │   ├── api/          # API 接口层
│       │   ├── assets/       # 静态资源 (图片、音频、样式)
│       │   ├── components/   # 公共组件
│       │   ├── router/       # 路由配置
│       │   ├── store/        # Pinia 状态管理
│       │   ├── utils/        # 工具函数
│       │   └── views/        # 页面视图
│       └── index.html        # 渲染进程入口 HTML
├── updates/                  # 自动更新文件
├── electron-builder.yml      # 打包配置
├── electron.vite.config.ts   # Vite 构建配置
├── package.json
└── tsconfig.json
```

## 功能特性

- **用户认证** - 登录/登出，Token 管理，路由守卫
- **票据识别** - 待处理与已完成票据列表展示与切换
- **票据详情** - 弹窗查看票据完整信息
- **票据正反面** - 独立窗口展示票据正面/背面详情
- **截图复制** - 一键截取票据正反面并复制到剪贴板
- **公司管理** - 公司列表维护（新增/删除）
- **数据统计** - 公司数量、票据数量、总金额概览
- **自动更新** - 应用启动时自动检查并安装更新
- **全局快捷键** - `Ctrl+F12` 切换开发者工具

## 路由说明

| 路径 | 说明 |
|------|------|
| `/login` | 登录页面 |
| `/` | 主应用布局，默认重定向到 `/companyBill` |
| `/companyBill` | 票据识别管理主页 |
| `/billDetail` | 票据详情窗口（独立窗口） |
| `/billFront` | 票据正面详情窗口（独立窗口） |
| `/billBack` | 票据背面详情窗口（独立窗口） |

## 快速开始

### 环境准备

- [Node.js](https://nodejs.org/) >= 18
- [pnpm](https://pnpm.io/) (推荐) 或 npm

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

### 代码检查

```bash
pnpm lint
```

### 类型检查

```bash
pnpm typecheck
```

### 构建打包

```bash
# Windows 安装包
pnpm build:win

# macOS 安装包
pnpm build:mac

# Linux 安装包
pnpm build:linux
```

### 预览构建结果

```bash
pnpm start
```

## 环境变量

项目在 `src/renderer/env/` 目录下管理环境变量：

| 文件 | 说明 |
|------|------|
| `.env` | 公共环境变量 |
| `.env.development` | 开发环境 |
| `.env.production` | 生产环境 |

关键变量：

- `VITE_BASE_URL` - 后端 API 基础地址
- 开发环境默认代理到 `http://192.168.1.16:8888/`
- 生产环境默认连接 `http://47.103.137.203`

## IPC 通信

主进程与渲染进程通过 `ipcMain.handle` / `ipcRenderer.invoke` 进行通信，主要通道：

| 通道 | 说明 |
|------|------|
| `auth-getToken` / `auth-setToken` / `auth-clearToken` | Token 读写 |
| `auth-isLoggedIn` / `auth-isTokenExpired` | 登录状态检查 |
| `create-bill-details-window` | 打开票据详情窗口 |
| `create-bill-front-details-window` | 打开票据正面详情窗口 |
| `create-bill-back-details-window` | 打开票据背面详情窗口 |
| `create-bill-copy-window` | 截图复制票据正面 |
| `create-bill-back-copy-window` | 截图复制票据背面 |
| `show-bill-window` / `close-bill-window` | 显示/关闭票据窗口 |
| `bill-deleted` / `refresh-bill-list` | 票据删除后刷新列表 |

## 自动更新

应用使用 `electron-updater` 实现自动更新功能：

- 生产环境下启动时自动检查更新
- 更新服务器地址：`http://47.103.137.203/updates/`
- 下载完成后弹出提示，用户确认后自动重启安装

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)

## License

[MIT](LICENSE)