Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions plugins/batch-image-tools/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# Dependencies
node_modules/

# Build / pack outputs
dist/
*.zip

# Logs & caches
*.log
.DS_Store
Thumbs.db
.vite/
25 changes: 25 additions & 0 deletions plugins/batch-image-tools/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# Changelog

## [1.1.0] - 2026-08-25

### Added

- 批量重命名(序号模板 / 查找替换,原地改名,冲突跳过)
- 任务结果提示框与错误提示可关闭
- 顶部「重置」:清空队列、结果、错误并恢复默认参数

## [1.0.0] - 2026-08-25

### Added

- 批量图片压缩(质量调节 / 目标体积)
- 格式转换(JPEG、PNG、WebP、AVIF、TIFF、GIF、BMP、ICO)
- 更改尺寸(像素 / 百分比)
- 旋转、翻转
- 固定比例裁剪 / **拖拽裁剪**
- 文字 / 图片水印
- 圆角、边框、边距
- 合并长图 / PDF / 动画 GIF
- 支持拖入文件、文件夹、粘贴图片触发
- 本地打包脚本 `npm run pack`(生成 zip 导入 ZTools)
- 固定高度布局,底部操作栏常驻
169 changes: 169 additions & 0 deletions plugins/batch-image-tools/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
# 批量图片处理

ZTools 插件:批量压缩、格式转换、缩放、裁剪、水印、合并等图片处理工具。

![主界面](static/images/overview.png)

## 功能预览

### 图片压缩

质量滑块 / 目标体积(KB),支持保持原格式或指定输出。

![图片压缩](static/images/feature-compress.png)

### 格式转换

JPEG / PNG / WebP / AVIF / TIFF / GIF / BMP / ICO。

![格式转换](static/images/feature-convert.png)

### 更改尺寸

像素或百分比缩放,可锁定宽高比、禁止放大。

![更改尺寸](static/images/feature-resize.png)

### 旋转翻转

任意角度旋转,水平 / 垂直翻转。

![旋转翻转](static/images/feature-rotate.png)

### 裁剪图片

拖拽裁剪框调整区域,或使用快捷比例 / 比例居中裁剪。

![裁剪图片](static/images/feature-crop.png)

### 添加水印

文字或图片水印,可调透明度与位置。

![添加水印](static/images/feature-watermark.png)

### 圆角边框

圆角、描边、边距与透明度。

![圆角边框](static/images/feature-style.png)

### 合并图片

纵向 / 横向长图、PDF、动画 GIF。

![合并图片](static/images/feature-merge.png)

### 批量重命名

序号模板(前缀 + 起始序号 + 位数)或查找替换;原地改名,目标名冲突则跳过。

## 功能列表

- 批量选择图片或文件夹(支持递归子目录)
- 拖入图片文件 / 文件夹到 ZTools 触发
- 粘贴图片到 ZTools 触发
- 图片压缩(质量 10–100 / 目标体积)
- 格式转换(保持原格式或指定输出)
- 更改尺寸(像素 / 百分比)
- 旋转、水平 / 垂直翻转
- **拖拽裁剪**(自由调整区域,或快捷比例锁定)
- 比例居中裁剪
- 文字 / 图片水印
- 圆角、边框、边距
- 合并长图 / PDF / 动画 GIF
- **批量重命名**(序号模板 / 查找替换)
- 结果提示与错误提示可关闭;顶部可一键重置
- 保存方式:同目录另存、覆盖原图、指定输出目录

## 触发指令

- 文本:`批量图片` / `图片处理` / `图片压缩`
- 拖入图片文件
- 拖入文件夹
- 粘贴图片

## 本地安装(推荐自测)

```bash
npm run setup
npm run pack
```

生成 `batch-image-tools.zip` 后:

1. 打开 ZTools → **设置 → 已安装插件**
2. 右上角 **更多 → 导入本地插件**
3. 选择 `batch-image-tools.zip`(不支持选择文件夹)
4. 搜索「批量图片」打开插件

改代码后重复 `npm run pack` 并重新导入即可覆盖。

## 开发

```bash
npm run setup
npm run dev
```

开发服务器默认:`http://127.0.0.1:5173/index.html`

已导入本地插件时,`plugin.json` 中的 `development.main` 会走 Vite 热更新(UI)。
**preload / sharp 相关改动**需重新 `npm run pack` 导入,或同步到插件目录后重启插件。

浏览器直接打开 Vite 地址仅可预览 UI,完整图片处理请在 ZTools 中运行。

## 构建

```bash
npm run build
```

产物在 `dist/`。也可用:

```bash
npm run pack # build + 打 zip
```

## 发布到插件中心

参考 [ZTools 第一个插件文档](https://ztoolscenter.github.io/ZTools-doc/first-plugin.html):

```bash
# 工作区需干净(勿提交 dist/、*.zip)
git add .
git commit -m "your changes"
git push

ztools publish
```

发布前请更新 `CHANGELOG.md` 与 `public/plugin.json` 中的 `version`。

## 项目结构

```
batch-image-tools/
├── static/images/ # README 功能截图
│ ├── overview.png
│ ├── feature-compress.png
│ ├── feature-convert.png
│ ├── feature-resize.png
│ ├── feature-rotate.png
│ ├── feature-crop.png
│ ├── feature-watermark.png
│ ├── feature-style.png
│ └── feature-merge.png
├── public/ # 插件静态资源
│ ├── plugin.json
│ ├── logo.png
│ └── preload/
├── scripts/
├── src/BatchImage/
├── CHANGELOG.md
└── package.json
```

## License

MIT
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Rename / Reset / Dismiss Implementation Plan

> For agent: implement steps below; design: `docs/superpowers/specs/2026-08-25-rename-reset-dismiss-design.md`

**Goal:** Batch rename tool, dismissible result/error banners, header reset.

**Architecture:** `rename.js` isolated from sharp; hooks own `reset()`; `BatchImage` orchestrates.

## Tasks

1. Types + tools registry + RenamePanel + ToolPanel
2. preload `renameOne` + services + env/dev-mock
3. useBatchProcess / useImageQueue reset + path updates
4. ResultBanner / ErrorBanner + header reset UI
5. CHANGELOG 1.1.0 + README + verify build
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# 批量重命名 / 结果可关闭 / 全局重置 — 设计说明

**日期:** 2026-08-25
**状态:** 已批准

## 目标

1. 新增工具「批量重命名」:序号模板 + 查找替换;原地改名;冲突跳过。
2. 任务完成提示框可关闭;错误条可关闭。
3. 顶部右上角「重置」:清空队列、结果、错误、进度,并恢复各工具默认参数与默认工具。

## 架构原则

- **高内聚**:重命名逻辑独立 `processors/rename.js`,不进入 sharp pipeline。
- **低耦合**:`useImageQueue.reset` / `useBatchProcess.reset` 各自重置;`BatchImage` 只编排;`ResultBanner` 纯展示 + `onDismiss`。

## 重命名

- `ToolId: 'rename'`,`batchMode: 'single'`
- `RenameOptions`:`renameMode: 'sequence' | 'replace'`;sequence 用 `prefix` / `startIndex` / `padLength` / `separator`;replace 用 `findText` / `replaceText`
- 保留扩展名;非法字符替换为 `_`
- 目标路径已存在 → `success: false, error: '目标文件名已存在,已跳过'`
- 成功后由队列 `applyPathUpdates` 同步更新列表中的 path/name
- UI 不展示 OutputSettings

## UI

- `ResultBanner`:关闭 → `setResults([])`
- 错误条关闭 → `setError('')`
- Header 右侧:统计 +「重置」按钮

## 非目标

- 不支持另存副本 / 覆盖目录输出
- 不自动解决文件名冲突
11 changes: 11 additions & 0 deletions plugins/batch-image-tools/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading
Loading