# picsview

**Repository Path**: shiter007/picsview

## Basic Information

- **Project Name**: picsview
- **Description**: Windows本地看图片应用（非商业应用，无广告、无需联网），by claude code.
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: v1.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-07
- **Last Updated**: 2025-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PicsView - 图片浏览器 by claude code

一个类似 XnView MP 的 Windows 图片浏览应用，基于 Electron 开发。 **无全屏看图功能。** 

## 特性亮点

- ⚡ **轻量快速** - 基于 Electron，启动迅速，操作流畅
- 🎨 **深色主题** - 护眼的暗色界面设计
- 🔄 **智能排序** - 5 种排序方式，排序后自动显示第一张
- 👆 **手势支持** - 完整的鼠标手势和触摸板手势，带防抖优化
- 📐 **1:1 显示** - 默认实际大小显示，不失真
- 🖼️ **缩略图预览** - 快速定位，排序同步更新
- 🔌 **拖拽加载** - 支持拖拽文件夹和图片直接打开

## 功能特性

### 核心功能
- 📁 **文件夹浏览** - 快速打开并浏览整个文件夹中的图片
- 🖼️ **图片查看** - 支持常见图片格式 (JPG, PNG, GIF, BMP, WEBP, SVG, ICO, TIFF)
- 🔍 **缩放控制** - 放大、缩小、适应窗口、实际大小，默认 1:1 显示
- 🎯 **缩略图视图** - 网格式缩略图浏览，快速定位图片
- 📂 **排序功能** - 支持按名称、创建时间、修改时间、大小、类型排序，可正序/倒序，排序后自动加载第一张
- ⌨️ **键盘快捷键** - 完整的键盘操作支持
- 🖱️ **鼠标操作** - 拖拽平移、滚轮缩放
- 👆 **手势支持** - 鼠标手势、触摸板双指手势切换图片（带延迟防抖）
- 📊 **信息显示** - 图片尺寸、文件大小、当前位置等信息

### 支持的图片格式
- JPEG/JPG
- PNG
- GIF
- BMP
- WEBP
- SVG
- ICO
- TIFF/TIF

## 安装使用

### 安装依赖
```bash
npm install
```

### 运行应用
```bash
npm start
```

### 打包应用
```bash
npm run package
```

打包后的可执行文件将在 `dist` 目录中生成。

## 使用说明

### 快速开始
1. 运行 `PicsView.exe`
2. 点击"打开文件夹"按钮或按 `Ctrl+O` 选择图片文件夹
3. 应用会自动显示排序后的第一张图片
4. 使用键盘方向键、鼠标手势或触摸板手势浏览图片

### 排序功能
- 使用工具栏的排序下拉框选择排序方式
- 点击箭头按钮切换正序/倒序
- 排序后自动跳转到第一张图片
- 缩略图视图会同步更新排序

### 手势操作
- **鼠标手势**：在图片上水平拖拽超过 50 像素切换图片
- **触摸板手势**：双指左右滑动切换图片，带 800ms 防抖
- **缩放**：鼠标滚轮或触摸板双指上下滑动

## 快捷键

### 文件操作
- `Ctrl + O` - 打开文件夹
- `Ctrl + F` - 打开文件
- `F5` - 刷新当前文件夹

### 图片导航
- `←` / `→` - 上一张/下一张图片
- `Home` - 第一张图片
- `End` - 最后一张图片

### 缩放控制
- `+` / `=` - 放大
- `-` - 缩小
- `1` / `0` - 实际大小 (100%)
- `F` - 适应窗口
- `鼠标滚轮` - 缩放

### 视图切换
- `Tab` - 在查看器和缩略图视图之间切换

### 鼠标操作
- **拖拽图片** - 平移查看大图片
- **鼠标手势** - 在图片上向左/右拖拽切换图片（拖拽距离超过50像素触发）
- **滚轮** - 缩放图片
- **点击缩略图** - 查看对应图片

### 触摸板手势
- **双指左滑** - 上一张图片
- **双指右滑** - 下一张图片
- **双指上下滑** - 缩放图片

### 拖放支持
- **拖放文件夹到窗口** - 打开文件夹，显示排序后的第一张
- **拖放图片到窗口** - 自动加载该图片所在文件夹的所有图片，并显示被拖拽的图片

## 界面说明

### 工具栏
- **打开文件夹** - 选择包含图片的文件夹（自动打开排序后的第一张）
- **打开文件** - 选择单个图片文件
- **切换视图** - 在查看器和缩略图视图之间切换
- **排序方式** - 选择排序依据（名称、创建时间、修改时间、大小、类型），改变后自动显示第一张
- **排序顺序** - 切换正序（↑）或倒序（↓），改变后自动显示第一张
- **刷新** - 重新读取文件夹内容，显示排序后的第一张
- **缩放控制** - 放大、缩小、适应窗口、实际大小

### 查看器模式
- 单图大图查看模式
- 支持缩放和平移
- 显示图片详细信息

### 缩略图模式
- 网格式缩略图显示
- 自动适应窗口大小
- 点击缩略图快速切换
- 排序后缩略图立即按新顺序重新排列

### 状态栏
- **左侧** - 当前图片位置 (如: 3 / 15 张图片)
- **右侧** - 图片尺寸和文件大小

## 技术栈

- **Electron** - 跨平台桌面应用框架
- **Node.js** - 文件系统操作
- **原生 JavaScript** - 无额外框架依赖
- **CSS3** - 现代化界面设计

## 项目结构

```
picsview/
├── main.js           # Electron 主进程
├── renderer.js       # 渲染进程逻辑
├── index.html        # 主窗口 HTML
├── styles.css        # 样式文件
├── package.json      # 项目配置
└── README.md         # 说明文档
```

## 开发说明

### 主要模块

#### main.js
- Electron 主进程
- 窗口管理
- IPC 通信处理
- 文件夹/文件打开对话框

#### renderer.js
- 图片加载和显示
- 缩放和平移控制
- 键盘和鼠标事件处理
- 触摸板手势支持（带防抖）
- 缩略图渲染
- 多种排序算法
- 状态管理

#### styles.css
- 深色主题设计
- 响应式布局
- 自定义滚动条
- 过渡动画效果

## 未来计划

- [ ] 图片编辑功能（旋转、裁剪）
- [ ] 幻灯片播放
- [ ] 更多图片格式支持
- [ ] 图片元数据显示（EXIF 信息）
- [ ] 批量重命名
- [ ] 收藏夹功能
- [ ] 多语言支持


## 贡献

欢迎提交 Issue 和 Pull Request！