# MoneyClock

**Repository Path**: programmer-k/money-clock

## Basic Information

- **Project Name**: MoneyClock
- **Description**: 一个基于Vue + Electron技术栈的现代化桌面招财猫应用程序。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2025-11-14
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript, Electron, macOS, Windows

## README

# MoneyClock - 桌面宠物招财猫
一个基于Vue + Electron技术栈的现代化桌面招财猫应用程序。

<img src="assets/cat.png" alt="输入图片说明" width="200px">
<img src="assets/cat1.png" alt="输入图片说明" width="200px">
<img src="assets/cat2.png" alt="输入图片说明" width="200px">
<img src="assets/cat3.png" alt="输入图片说明" width="200px">
<img src="assets/cat4.png" alt="输入图片说明" width="200px">

### Mac/Windos 应用下载地址: https://gitee.com/programmer-k/money-clock/releases
<img src="assets/yanshi.gif" width="500" />

## 功能特性

### 🐱 核心功能
- **实时秒薪计算** - 根据月工资和工作时间，实时计算并显示每秒赚取的工资
- **累计金额显示** - 动态累加显示工作时间内的累计收入
- **多皮肤支持** - 提供多种招财猫皮肤选择，个性化您的桌面宠物
- **智能动画效果** - 流畅的金钱浮动动画，支持鼠标悬停暂停
- **自适应显示** - 自动调整字体大小，适应不同屏幕尺寸

### ⏰ 时间功能
- **实时时间显示** - 精确到秒的实时时间更新
- **工作时间设置** - 可自定义上班和下班时间
- **个性化工资配置** - 支持自定义月工资，自动计算时薪、分薪、秒薪

### 🖥️ 桌面功能
- **窗口置顶** - 可选择是否始终显示在最前端
- **系统托盘** - 支持最小化到系统托盘，跨平台托盘功能一致性适配
- **跨平台支持** - 支持Windows、macOS、Linux系统
- **聊天交互** - 内置聊天对话框，增加互动乐趣

### ⚡ 性能优化
- **低资源占用** - 优化内存和CPU使用，后台运行不卡顿
- **快速响应** - 流畅的动画和交互效果
- **轻量级设计** - 应用体积小，启动速度快

## 技术栈

- **前端框架**: Vue 3.3.8
- **桌面框架**: Electron 27.3.11
- **构建工具**: Vite 5.4.21
- **状态管理**: Pinia 2.1.7
- **样式**: CSS3 + CSS Variables
- **打包工具**: electron-builder 24.6.4, electron-packager 17.1.2

## 开发环境要求

- **Node.js**: 16.0 或更高版本
- **npm**: 7.0 或更高版本
- **操作系统**: Windows 10+, macOS 10.12+, Linux (Ubuntu 18.04+)
- **开发工具**: VS Code 推荐，支持 Vue 和 Electron 插件

## 安装和运行

### 1. 安装依赖(使用淘宝镜像加速)
```bash
npm install
```

### 2. 开发模式运行
```bash
npm run dev
```

### 3. 构建应用
```bash
# 构建Web版本
npm run build
```

### 4. 本地桌面启动
```bash
 npm run electron-dev
```

### Windows平台打包

```bash
# 方法一：超优化打包命令（体积最小化，推荐）
$env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
npm run pack-win-ultra

# 方法二：设置环境变量后使用优化命令
$env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
npm run pack-win-optimized
```

### MacOS平台打包

```bash

# 方法一：使用electron-builder打包（生成DMG格式，推荐）
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
npm run dist

# 方法二：使用electron-packager打包（生成应用目录）
npx electron-packager . MoneyClock --platform=darwin --arch=arm64 --out=dist-packaged --overwrite

# 方法三：使用electron-packager打包x64架构（适用于Intel芯片Mac）
npx electron-packager . MoneyClock --platform=darwin --arch=x64 --out=dist-packaged --overwrite
```

#### 打包结果
- **electron-builder**: `dist-electron/Money Clock-1.0.0-arm64.dmg`（优化后大小：84MB）或 `dist-electron/Money Clock-1.0.0-x64.dmg`
- **electron-packager**: `dist-packaged/MoneyClock-darwin-arm64/MoneyClock.app` 或 `dist-packaged/MoneyClock-darwin-x64/MoneyClock.app`

#### 运行应用
1. 双击DMG文件挂载磁盘镜像（如果使用electron-builder）
2. 将`MoneyClock.app`拖到Applications文件夹（推荐）
3. 双击`MoneyClock.app`即可运行

### 跨平台托盘功能说明

✅ **已实现跨平台托盘功能一致性适配**

- **Windows系统**: 完整的托盘功能，包括图标、上下文菜单、通知等
- **macOS系统**: 与Windows系统保持完全一致的视觉呈现和功能表现
- **平台规范**: 遵循各自系统的UI设计规范
- **API差异**: 解决了平台间的API差异问题
- **兼容性**: 已进行充分的兼容性测试验证

#### 托盘功能特点
- 点击托盘图标显示/隐藏主窗口
- 右键菜单提供快速操作选项
- 支持动态更新托盘状态
- 跨平台一致的用户体验
- 符合各平台系统规范

## 项目结构

```
MoneyClock/
├── assets/               # 静态资源目录
│   ├── mac-tray/         # macOS托盘图标
│   │   ├── money-24.png
│   │   ├── money-24@2x.png
│   │   └── money-48.png
│   ├── cat.png           # 默认猫咪皮肤
│   ├── cat1.png          # 猫咪皮肤1
│   ├── cat2.png          # 猫咪皮肤2
│   ├── cat3.png          # 猫咪皮肤3
│   ├── cat4.png          # 猫咪皮肤4
│   ├── money.ico         # Windows应用图标
│   └── money.png         # 主应用图标
├── electron/             # Electron主进程文件
│   ├── main.js           # 主进程入口
│   └── preload.js        # 预加载脚本
├── public/               # 公共静态资源
│   └── cat.svg           # SVG猫咪图标
├── src/                  # Vue源代码
│   ├── components/       # Vue组件
│   │   ├── ChatDialog.vue      # 聊天对话框组件
│   │   ├── ClockDisplay.vue    # 时钟显示组件
│   │   ├── SalaryModal.vue     # 工资设置模态框
│   │   ├── SettingsModal.vue   # 系统设置模态框
│   │   └── SkinSelector.vue     # 皮肤选择器
│   ├── App.vue           # 根组件
│   ├── main.js           # Vue入口文件
│   └── style.css         # 全局样式
├── .gitignore            # Git忽略配置
├── CHAT_DIALOG_FLOAT_TEST.md # 聊天对话框浮动测试文档
├── index.html            # HTML模板
├── LICENSE               # 许可证文件
├── package.json          # 项目配置和依赖管理
├── package-lock.json     # 依赖锁定文件
├── README.md             # 项目说明文档
├── vite.config.js        # Vite配置文件
└── vite.config.mjs       # Vite配置文件（ES模块格式）
```

### 打包输出目录（执行打包命令后生成）

```
MoneyClock/
├── dist/                 # Web构建输出目录
├── dist-electron/        # electron-builder打包输出（生成DMG文件）
│   └── Money Clock-1.0.0-arm64.dmg # macOS ARM64 DMG包（优化后大小：84MB）
├── dist-packaged/        # 标准打包输出
│   └── MoneyClock-win32-x64/ # Windows 64位打包结果
└── dist-optimized/       # 优化打包输出（推荐）
    └── MoneyClock-win32-x64/ # Windows 64位优化打包结果
```

## 使用说明

### 基本操作
1. **拖拽移动** - 点击窗口任意位置可拖拽移动窗口
2. **最小化** - 点击右上角的 "−" 按钮
3. **关闭** - 点击右上角的 "×" 按钮
4. **置顶切换** - 点击图钉图标切换置顶状态

### 设置功能
1. **时间格式** - 点击底部按钮切换12/24小时制
2. **透明度** - 点击"透明度"按钮调节窗口透明度
3. **主题切换** - 点击"主题"按钮选择不同主题风格

### 快捷操作
- 所有设置都会自动保存，下次启动时恢复
- 支持系统托盘右键菜单快速操作
- 窗口大小可自由调整

## 开发说明

### 主要组件说明

#### ClockDisplay.vue
- 主要的时钟显示组件
- 包含时间显示、日期显示、控制按钮
- 处理实时时间更新和用户交互

#### SettingsModal.vue
- 设置模态框组件
- 提供完整的设置选项界面
- 处理主题、格式、透明度等设置

### Electron集成
- 使用IPC通信实现主进程和渲染进程数据交互
- 通过preload脚本暴露安全的API接口
- 实现窗口控制、透明度调节等原生功能

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request来改进这个项目！