项目搭建与开发｜Cursor 图片压缩应用（Electron）

项目搭建与开发

Date: August 2, 2025

准备工作

Cursor版本：1.2.4

开启 Cursor 的自动运行模式（老版本叫 yolo），记得开启文件删除保护功能，并配置 Command

Denylist 用于控制删除命令。

原因：减少项目运行中的手动命令的配置，提升效率。但是实际工作中建议关闭，可能会自动修改些非必要的文件，导致问题。

项目构建

创建项目结构

根据需求分析、技术文档、UI设计文档进行开发：

@Analysis.md @Technical.md @/ui 
请根据以上文档，搭建项目结构和主要页面的布局。

生成项目目录如下：

.
├── Analysis.md
├── electron-builder.yml
├── package-lock.json
├── package.json
├── projectTree.md
├── README.md
├── src
│   ├── main
│   │   ├── fileManager.cjs
│   │   ├── imageProcessor.cjs
│   │   ├── main.cjs
│   │   └── preload.cjs
│   └── renderer
│       ├── index.html
│       └── src
├── structure.md
├── Technical.md
├── ui
│   ├── 历史记录-查看页面.md
│   ├── 批量处理-任务队列.md
│   ├── 设置-偏好配置.md
│   ├── 图片处理-对比视图.md
│   ├── 主页面-上传区.md
│   └── 主页面-图片列表.md
└── vite.config.js

6 directories, 20 files

启动项目

当然启动项目后会有问题，可以见后面。查看 package.json 可知启动命令如下：

npm run dev

正常启动后：

1）主页面：

2）图片上传列表页：

*）其他页面如之前所说一致

问题1: 项目启动页面不显示问题

项目已经正常启动，但是浏览器地址：http://localhost:5173/ 页面上显示“找不到 localhost 的网页”
请分析问题，并提供解决方案。

问题2: ImageList 组件问题修复

问题：

nathanchen@192 electron-zip % npm run dev

> electron-zip@1.0.0 dev
> vite

  VITE v4.5.2  ready in 130 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.10.103:5173/
  ➜  press h to show help
Error:   Failed to scan for dependencies from entries:
  /Users/nathanchen/Documents/1Front-End/AI-Prjs/electron-zip/src/renderer/index.html

  ✘ [ERROR] Unexpected end of file

    src/renderer/src/pages/ImageList.jsx:151:76504:
      151 │ ...kAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg

修复：

@ImageList.jsx 请修复该文件问题

基础功能研发

尽管 Cursor 生成的项目页面已经较为完全，但是经过测试来看，大部分功能无法正常使用。

所以，我们需要逐个比对 UI 设计图进行测试，打磨功能。

开发策略：

由于页面UI设计尚可，但是很多功能存在或多或少的问题，所以我们优先打通功能的主流程，也就是实现压缩图片即可，至于其他功能则放在之后进行打磨。

**开发技巧：**为每个功能模块单独建立窗口用于研发，避免长上下文的混淆

主页面

上传区

正常的功能：

• 图片上传

问题功能：

• 选择文件上传
• 选择文件夹

问题修复：

1）

UpLoad组件中存在问题：
1）选择图片上传点击无法正常弹出系统文件夹
2）选择文件夹无法正常弹出系统文件夹
请分析问题，并提供解决方案。

原因：Antd v5 目前官方只支持 React 16-18，项目用的是 React 19

图片列表

将图片上传后显示的页面

选择图片后，点击开始压缩就会进入批量处理页面

批量处理

问题功能：

• 任务进度无法正常加载

问题&修复：

问题：
当用户在点击“开始压缩”后，在batch页面中，图片压缩的任务进度一直为0。
请分析问题，并提供解决方案。

修复后：继续报错

chunk-BVI7NZOO.js?v=361503f6:16670 Uncaught TypeError: Cannot read properties of undefined (reading 'ipcRenderer')
    at Module.onCompressionProgress (electronService.js:82:26)
    at BatchProcess.jsx:50:41
chunk-BVI7NZOO.js?v=361503f6:16670 Uncaught TypeError: Cannot read properties of undefined (reading 'ipcRenderer')
    at Module.onCompressionProgress (electronService.js:82:26)
    at BatchProcess.jsx:50:41
2
hook.js:608 The above error occurred in the <BatchProcess> component:

成功修复：由于“当前不在Electron环境中，无法打开目录”，之后我们需要在PC端进行调试

核心功能研发

图像压缩对比功能

**目标：**实现图像压缩的前后对比。

功能说明：

- **对比视图**：提供原始图片和压缩后图片的对比展示
- **视图模式切换**：支持并排对比、滑动对比和放大镜对比三种模式
- **图片信息面板**：显示原始和压缩后图片的详细信息
  - 尺寸（分辨率）
  - 文件大小
  - 图片格式
  - 压缩率
- **操作按钮**：
  - 调整设置：快速返回压缩设置面板
  - 导出对比报告：生成当前图片的压缩前后对比报告
  - 返回列表：返回图片列表视图
  - 保存：保存当前压缩结果
- **导航控件**：在批量处理的图片之间切换

**目前问题：**图片压缩页面可以显示，但是功能存在多种问题：

• 图片预览

问题分析&解决：

1）图片预览

@主页面-图片列表.md @ImageList.jsx 
当用户在list页面中，点击图片后，并没有显示图片预览。
请分析问题，并提供解决方案。

继续处理问题：

@ImageList.jsx 
当用户选择图片列表中的图片后，图片预览中无法正常显示图片。
浏览器报错如下：
1）
 GET safe-file://undefined net::ERR_UNKNOWN_URL_SCHEME
2）
图片加载失败 SyntheticBaseEvent {_reactName: 'onError', _targetInst: null, type: 'error', nativeEvent: Event, target: img.ant-image-img.css-dev-only-do-not-override-rkyzst, …}
3）
GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6
需求：
当用户选择图片列表中的图片后，图片预览中无法正常显示图片。
请分析问题，并提供解决方案。

继续处理问题：

@Upload.jsx 
结合上一问，
问题背景：当用户上传图片时，报错如下：
处理文件失败: Cannot read properties of undefined (reading 'ipcRenderer')
请分析问题，并提供解决方案。

经验总结

Cursor调试经验：

• Cursor能够快速构建项目，但是项目技术栈的兼容可能在问题
• 调试bug时，需要提供控制台与浏览器的日志信息
• 复杂问题需要拆分成多个子问题逐个击破

技术方案选型：

**技术选型：**Antd v5 目前官方只支持 React 16-18