+
+ {toolDef.label}
+ 参数设置
+
+
+ {loading ? 文件队列
+ {images.length > 0 && {images.length} 项}
+ 加载中...
: null}
+
+ 开发预览模式：请在 ZTools 中搜索「批量图片」打开插件以使用完整功能
+
+ )}
+
+ 请先添加图片，然后拖拽裁剪框调整范围
+
+ )
+ }
+
+ const pixelW = imageWidth ? Math.round(value.width * imageWidth) : 0
+ const pixelH = imageHeight ? Math.round(value.height * imageHeight) : 0
+
+ const stageStyle =
+ imageWidth && imageHeight
+ ? { aspectRatio: `${imageWidth} / ${imageHeight}` }
+ : undefined
+
+ return (
+
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/common/FieldRow.tsx b/plugins/batch-image-tools/src/BatchImage/components/common/FieldRow.tsx
new file mode 100644
index 000000000..c1b896221
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/common/FieldRow.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+
+export function FieldRow({
+ label,
+ children,
+ wide
+}: {
+ label: string
+ children: ReactNode
+ wide?: boolean
+}) {
+ return (
+
+ {loading && 
}
+
+ 预览加载中...
}
+ {preview && startDrag('move', e)}
+ >
+
+ {(['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'] as Handle[]).map((handle) => (
+ startDrag(handle, e)}
+ />
+ ))}
+
+
+ 裁剪区域 {Math.round(value.width * 100)}% × {Math.round(value.height * 100)}%
+ {imageWidth && imageHeight ? ` · 约 ${pixelW}×${pixelH}px` : ''}
+ 批量时按相对比例应用到每张图
+
+
+
+
+ )
+}
+
+export function SegmentedButtons{children}
+
+ {options.map((option) => (
+
+ ))}
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/common/OutputSettings.tsx b/plugins/batch-image-tools/src/BatchImage/components/common/OutputSettings.tsx
new file mode 100644
index 000000000..f8b81d7b6
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/common/OutputSettings.tsx
@@ -0,0 +1,68 @@
+import type { OutputMode } from '../../types'
+import { FieldRow } from './FieldRow'
+
+interface OutputSettingsProps {
+ outputMode: OutputMode
+ outputDir: string
+ suffix: string
+ disabled?: boolean
+ onOutputModeChange: (mode: OutputMode) => void
+ onOutputDirChange: (dir: string) => void
+ onSuffixChange: (suffix: string) => void
+ onPickOutputDir: () => void
+}
+
+export default function OutputSettings({
+ outputMode,
+ outputDir,
+ suffix,
+ disabled,
+ onOutputModeChange,
+ onOutputDirChange,
+ onSuffixChange,
+ onPickOutputDir
+}: OutputSettingsProps) {
+ return (
+ <>
+
+ onOutputDirChange(e.target.value)}
+ />
+
+
+
+ !
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/layout/FileTable.tsx b/plugins/batch-image-tools/src/BatchImage/components/layout/FileTable.tsx
new file mode 100644
index 000000000..d03500b34
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/layout/FileTable.tsx
@@ -0,0 +1,68 @@
+import type { ImageItem } from '../../types'
+import { formatBytes } from '../../utils'
+
+interface FileTableProps {
+ images: ImageItem[]
+ disabled?: boolean
+ onRemove: (path: string) => void
+ onClear?: () => void
+}
+
+export default function FileTable({ images, disabled, onRemove, onClear }: FileTableProps) {
+ if (images.length === 0) {
+ return (
+ {message}
+
+
+
+ )
+ }
+
+ return (
+ 🖼
+ 尚未添加图片
+ 点击底部「添加图片」或「添加文件夹」开始 +
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/layout/ResultBanner.tsx b/plugins/batch-image-tools/src/BatchImage/components/layout/ResultBanner.tsx
new file mode 100644
index 000000000..9515bb35c
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/layout/ResultBanner.tsx
@@ -0,0 +1,65 @@
+import type { ProcessResult } from '../../types'
+import { formatBytes, pathBasename, savingsPercent } from '../../utils'
+
+interface ResultBannerProps {
+ results: ProcessResult[]
+ mode?: 'process' | 'rename'
+ maxItems?: number
+ onOpenInFolder?: () => void
+ onDismiss: () => void
+}
+
+function formatResultLine(item: ProcessResult, mode: 'process' | 'rename') {
+ if (!item.success) return item.error || '处理失败'
+
+ const from = pathBasename(item.inputPath || '')
+ const to = pathBasename(item.outputPath || item.inputPath || '')
+
+ if (mode === 'rename') {
+ return from === to ? `${to}（文件名未变化）` : `${from} → ${to}`
+ }
+
+ return `${from || to} · ${formatBytes(item.inputSize || 0)} → ${formatBytes(item.outputSize || 0)} (${savingsPercent(item.inputSize || 0, item.outputSize || 0)}%)`
+}
+
+export default function ResultBanner({
+ results,
+ mode = 'process',
+ maxItems = 6,
+ onOpenInFolder,
+ onDismiss
+}: ResultBannerProps) {
+ if (results.length === 0) return null
+
+ const successCount = results.filter((item) => item.success).length
+
+ return (
+
+ 文件名
+ 尺寸
+ 大小
+
+ 操作
+ {onClear && images.length > 0 && (
+
+ )}
+
+
+ -
+ {images.map((item) => (
+
-
+ + {item.thumb ? ( ++ {item.width}×{item.height} + {formatBytes(item.size)} + +
+ ) : ( + + )} +
+ + {item.name} + + {item.format.toUpperCase()} ++
+ ))}
+
+
+ 成功 {successCount}/{results.length}
+
+
+
+ {onOpenInFolder ? (
+
+ ) : null}
+
+
+ -
+ {results.slice(0, maxItems).map((item) => (
+
- + {formatResultLine(item, mode)} + + ))} +
+
+ patch({ quality: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ {options.quality}
+
+
+
+
+ patch({ targetSizeKb: e.target.value ? Number(e.target.value) : null })
+ }
+ disabled={disabled}
+ />
+ KB
+
+
+
+
+
+
+ patch({ outputMode })}
+ onOutputDirChange={(outputDir) => patch({ outputDir })}
+ onSuffixChange={(suffix) => patch({ suffix })}
+ onPickOutputDir={onPickOutputDir}
+ />
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/panels/ConvertPanel.tsx b/plugins/batch-image-tools/src/BatchImage/components/panels/ConvertPanel.tsx
new file mode 100644
index 000000000..aabba66e6
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/panels/ConvertPanel.tsx
@@ -0,0 +1,57 @@
+import { FORMAT_OPTIONS } from '../../config/tools'
+import type { ConvertOptions } from '../../types'
+import { FieldRow } from '../common/FieldRow'
+import OutputSettings from '../common/OutputSettings'
+
+interface PanelProps {
+ options: ConvertOptions
+ disabled?: boolean
+ onChange: (options: ConvertOptions) => void
+ onPickOutputDir: () => void
+}
+
+export default function ConvertPanel({ options, disabled, onChange, onPickOutputDir }: PanelProps) {
+ const patch = (partial: Partial
+
+
+
+
+
+ patch({ quality: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ {options.quality}
+
+
+ patch({ outputMode })}
+ onOutputDirChange={(outputDir) => patch({ outputDir })}
+ onSuffixChange={(suffix) => patch({ suffix })}
+ onPickOutputDir={onPickOutputDir}
+ />
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/panels/CropPanel.tsx b/plugins/batch-image-tools/src/BatchImage/components/panels/CropPanel.tsx
new file mode 100644
index 000000000..43dbfce8a
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/panels/CropPanel.tsx
@@ -0,0 +1,192 @@
+import { CROP_PRESETS, FORMAT_OPTIONS } from '../../config/tools'
+import type { CropOptions, ImageItem } from '../../types'
+import CropEditor from '../common/CropEditor'
+import { FieldRow, SegmentedButtons } from '../common/FieldRow'
+import OutputSettings from '../common/OutputSettings'
+
+interface PanelProps {
+ options: CropOptions
+ previewImage?: ImageItem | null
+ disabled?: boolean
+ onChange: (options: CropOptions) => void
+ onPickOutputDir: () => void
+}
+
+export default function CropPanel({
+ options,
+ previewImage,
+ disabled,
+ onChange,
+ onPickOutputDir
+}: PanelProps) {
+ const patch = (partial: Partial
+
+ patch({ cropMode })}
+ disabled={disabled}
+ />
+
+
+ {(options.cropMode || 'manual') === 'manual' ? (
+ <>
+
+
+
+
+
+
+
+ patch({ cropRatioW: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ :
+ patch({ cropRatioH: Number(e.target.value) })}
+ disabled={disabled}
+ />
+
+
+ )}
+
+
+
+
+
+ patch({ outputMode })}
+ onOutputDirChange={(outputDir) => patch({ outputDir })}
+ onSuffixChange={(suffix) => patch({ suffix })}
+ onPickOutputDir={onPickOutputDir}
+ />
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/panels/MergePanel.tsx b/plugins/batch-image-tools/src/BatchImage/components/panels/MergePanel.tsx
new file mode 100644
index 000000000..77a9184a7
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/panels/MergePanel.tsx
@@ -0,0 +1,73 @@
+import { MERGE_MODE_OPTIONS } from '../../config/tools'
+import type { MergeOptions } from '../../types'
+import { FieldRow } from '../common/FieldRow'
+import OutputSettings from '../common/OutputSettings'
+
+interface PanelProps {
+ options: MergeOptions
+ disabled?: boolean
+ onChange: (options: MergeOptions) => void
+ onPickOutputDir: () => void
+}
+
+export default function MergePanel({ options, disabled, onChange, onPickOutputDir }: PanelProps) {
+ const patch = (partial: Partial
+ {CROP_PRESETS.map((preset) => (
+
+ ))}
+
+
+
+ 0 && options.cropRatioH > 0
+ ? options.cropRatioW / options.cropRatioH
+ : null
+ }
+ disabled={disabled}
+ onChange={(rect) =>
+ patch({
+ cropLeft: rect.left,
+ cropTop: rect.top,
+ cropWidth: rect.width,
+ cropHeight: rect.height
+ })
+ }
+ />
+
+
+ ) : (
+ <>
+
+ {CROP_PRESETS.map((preset) => (
+
+ ))}
+
+
+
+
+
+
+ {options.mergeMode === 'gif-animated' && (
+
+ patch({ gifDelay: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ ms
+
+ )}
+
+ {options.mergeMode !== 'pdf' && options.mergeMode !== 'gif-animated' && (
+
+ patch({ quality: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ {options.quality}
+
+ )}
+
+ patch({ outputMode })}
+ onOutputDirChange={(outputDir) => patch({ outputDir })}
+ onSuffixChange={(suffix) => patch({ suffix })}
+ onPickOutputDir={onPickOutputDir}
+ />
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/panels/RenamePanel.tsx b/plugins/batch-image-tools/src/BatchImage/components/panels/RenamePanel.tsx
new file mode 100644
index 000000000..3b7a2cfc5
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/panels/RenamePanel.tsx
@@ -0,0 +1,134 @@
+import { useMemo } from 'react'
+import type { RenameOptions } from '../../types'
+import { FieldRow, SegmentedButtons } from '../common/FieldRow'
+import { pathBasename } from '../../utils'
+
+interface PanelProps {
+ options: RenameOptions
+ sampleName?: string
+ disabled?: boolean
+ onChange: (options: RenameOptions) => void
+}
+
+function previewName(options: RenameOptions, sampleName: string, index: number) {
+ const extMatch = /\.[^.]+$/.exec(sampleName)
+ const ext = extMatch ? extMatch[0] : ''
+ const base = sampleName.slice(0, sampleName.length - ext.length)
+
+ if (options.renameMode === 'replace') {
+ const findText = options.findText || ''
+ if (!findText) return `${base || '文件名'}${ext || '.jpg'}`
+ return `${base.split(findText).join(options.replaceText || '')}${ext || '.jpg'}`
+ }
+
+ const pad = Math.max(1, options.padLength || 3)
+ const start = Number.isFinite(options.startIndex) ? options.startIndex : 1
+ const number = String(start + index).padStart(pad, '0')
+ const prefix = options.prefix || ''
+ const separator = options.separator ?? '_'
+ const nextBase = prefix ? `${prefix}${separator}${number}` : number
+ return `${nextBase}${ext || '.jpg'}`
+}
+
+export default function RenamePanel({ options, sampleName, disabled, onChange }: PanelProps) {
+ const patch = (partial: Partial
+
+ patch({ renameMode })}
+ disabled={disabled}
+ />
+
+
+ {options.renameMode === 'sequence' ? (
+ <>
+
+ patch({ prefix: e.target.value })}
+ disabled={disabled}
+ />
+
+
+ patch({ startIndex: Number(e.target.value) })}
+ disabled={disabled}
+ />
+
+
+ patch({ padLength: Number(e.target.value) })}
+ disabled={disabled}
+ />
+
+
+ patch({ separator: e.target.value })}
+ disabled={disabled}
+ />
+
+
+ ) : (
+ <>
+
+ patch({ findText: e.target.value })}
+ disabled={disabled}
+ />
+
+
+ patch({ replaceText: e.target.value })}
+ disabled={disabled}
+ />
+
+
+ )}
+
+
+
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/panels/ResizePanel.tsx b/plugins/batch-image-tools/src/BatchImage/components/panels/ResizePanel.tsx
new file mode 100644
index 000000000..40fca640b
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/panels/ResizePanel.tsx
@@ -0,0 +1,114 @@
+import { FORMAT_OPTIONS } from '../../config/tools'
+import type { ResizeOptions } from '../../types'
+import { FieldRow, SegmentedButtons } from '../common/FieldRow'
+import OutputSettings from '../common/OutputSettings'
+
+interface PanelProps {
+ options: ResizeOptions
+ disabled?: boolean
+ onChange: (options: ResizeOptions) => void
+ onPickOutputDir: () => void
+}
+
+export default function ResizePanel({ options, disabled, onChange, onPickOutputDir }: PanelProps) {
+ const patch = (partial: Partial
+
+ 示例：{pathBasename(sample)}
+ -
+ {previews.map((name, index) => (
+
- + {index + 1}. {name} + + ))} +
原地改名，保留扩展名；目标名已存在则跳过该文件。
+
+
+ patch({ resizeMode })}
+ disabled={disabled}
+ />
+
+
+ {options.resizeMode === 'percent' ? (
+
+ patch({ scalePercent: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ %
+
+ ) : (
+ <>
+
+ patch({ width: e.target.value })}
+ disabled={disabled}
+ />
+
+
+ patch({ height: e.target.value })}
+ disabled={disabled}
+ />
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ patch({ outputMode })}
+ onOutputDirChange={(outputDir) => patch({ outputDir })}
+ onSuffixChange={(suffix) => patch({ suffix })}
+ onPickOutputDir={onPickOutputDir}
+ />
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/panels/RotatePanel.tsx b/plugins/batch-image-tools/src/BatchImage/components/panels/RotatePanel.tsx
new file mode 100644
index 000000000..3bc10aab3
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/panels/RotatePanel.tsx
@@ -0,0 +1,91 @@
+import { FORMAT_OPTIONS } from '../../config/tools'
+import type { RotateOptions } from '../../types'
+import { FieldRow } from '../common/FieldRow'
+import OutputSettings from '../common/OutputSettings'
+
+interface PanelProps {
+ options: RotateOptions
+ disabled?: boolean
+ onChange: (options: RotateOptions) => void
+ onPickOutputDir: () => void
+}
+
+export default function RotatePanel({ options, disabled, onChange, onPickOutputDir }: PanelProps) {
+ const patch = (partial: Partial
+
+ patch({ rotateAngle: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ °
+
+
+
+ {[90, 180, 270, -90].map((angle) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ patch({ outputMode })}
+ onOutputDirChange={(outputDir) => patch({ outputDir })}
+ onSuffixChange={(suffix) => patch({ suffix })}
+ onPickOutputDir={onPickOutputDir}
+ />
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/panels/StylePanel.tsx b/plugins/batch-image-tools/src/BatchImage/components/panels/StylePanel.tsx
new file mode 100644
index 000000000..df0c2ad59
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/panels/StylePanel.tsx
@@ -0,0 +1,103 @@
+import { FORMAT_OPTIONS } from '../../config/tools'
+import type { StyleOptions } from '../../types'
+import { FieldRow } from '../common/FieldRow'
+import OutputSettings from '../common/OutputSettings'
+
+interface PanelProps {
+ options: StyleOptions
+ disabled?: boolean
+ onChange: (options: StyleOptions) => void
+ onPickOutputDir: () => void
+}
+
+export default function StylePanel({ options, disabled, onChange, onPickOutputDir }: PanelProps) {
+ const patch = (partial: Partial
+
+ patch({ borderRadius: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ {options.borderRadius ?? 0}%
+
+
+
+ patch({ borderWidth: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ patch({ borderColor: e.target.value })}
+ disabled={disabled}
+ />
+
+
+
+ patch({ padding: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ px
+
+
+
+ patch({ paddingColor: e.target.value })}
+ disabled={disabled}
+ />
+ patch({ paddingOpacity: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ {options.paddingOpacity ?? 100}%
+
+
+
+
+
+
+ patch({ outputMode })}
+ onOutputDirChange={(outputDir) => patch({ outputDir })}
+ onSuffixChange={(suffix) => patch({ suffix })}
+ onPickOutputDir={onPickOutputDir}
+ />
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/components/panels/ToolPanel.tsx b/plugins/batch-image-tools/src/BatchImage/components/panels/ToolPanel.tsx
new file mode 100644
index 000000000..be444010e
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/components/panels/ToolPanel.tsx
@@ -0,0 +1,118 @@
+import type { ImageItem, ToolId, ToolOptions } from '../../types'
+import CompressPanel from './CompressPanel'
+import ConvertPanel from './ConvertPanel'
+import CropPanel from './CropPanel'
+import MergePanel from './MergePanel'
+import RenamePanel from './RenamePanel'
+import ResizePanel from './ResizePanel'
+import RotatePanel from './RotatePanel'
+import StylePanel from './StylePanel'
+import WatermarkPanel from './WatermarkPanel'
+
+interface ToolPanelProps {
+ activeTool: ToolId
+ options: ToolOptions
+ previewImage?: ImageItem | null
+ disabled?: boolean
+ onChange: (options: ToolOptions) => void
+ onPickOutputDir: () => void
+ onPickWatermarkImage: () => void
+}
+
+export default function ToolPanel({
+ activeTool,
+ options,
+ previewImage,
+ disabled,
+ onChange,
+ onPickOutputDir,
+ onPickWatermarkImage
+}: ToolPanelProps) {
+ switch (activeTool) {
+ case 'compress':
+ return (
+
+
+ patch({ watermarkType })}
+ disabled={disabled}
+ />
+
+
+ {options.watermarkType === 'text' ? (
+ <>
+
+ patch({ watermarkText: e.target.value })}
+ disabled={disabled}
+ />
+
+
+ patch({ watermarkFontSize: Number(e.target.value) })}
+ disabled={disabled}
+ />
+
+
+ patch({ watermarkColor: e.target.value })}
+ disabled={disabled}
+ />
+
+
+ ) : (
+
+
+ )}
+
+
+ patch({ watermarkOpacity: Number(e.target.value) })}
+ disabled={disabled}
+ />
+ {options.watermarkOpacity ?? 50}%
+
+
+
+
+
+
+
+
+
+
+ patch({ outputMode })}
+ onOutputDirChange={(outputDir) => patch({ outputDir })}
+ onSuffixChange={(suffix) => patch({ suffix })}
+ onPickOutputDir={onPickOutputDir}
+ />
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/config/tools.ts b/plugins/batch-image-tools/src/BatchImage/config/tools.ts
new file mode 100644
index 000000000..74a5d60e2
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/config/tools.ts
@@ -0,0 +1,191 @@
+import type {
+ CompressOptions,
+ ConvertOptions,
+ CropOptions,
+ MergeOptions,
+ RenameOptions,
+ ResizeOptions,
+ RotateOptions,
+ StyleOptions,
+ ToolDefinition,
+ ToolId,
+ ToolOptions,
+ WatermarkOptions
+} from '../types'
+
+export const TOOLS: ToolDefinition[] = [
+ { id: 'compress', label: '图片压缩', icon: '压', description: '调节质量或目标体积', minImages: 1, batchMode: 'single' },
+ { id: 'convert', label: '格式转换', icon: '转', description: '批量转换输出格式', minImages: 1, batchMode: 'single' },
+ { id: 'resize', label: '更改尺寸', icon: '尺', description: '像素或百分比缩放', minImages: 1, batchMode: 'single' },
+ { id: 'rotate', label: '旋转翻转', icon: '旋', description: '旋转角度与镜像', minImages: 1, batchMode: 'single' },
+ { id: 'crop', label: '裁剪图片', icon: '裁', description: '固定比例居中裁剪', minImages: 1, batchMode: 'single' },
+ { id: 'watermark', label: '添加水印', icon: '印', description: '文字或图片水印', minImages: 1, batchMode: 'single' },
+ { id: 'style', label: '圆角边框', icon: '饰', description: '圆角、边框与边距', minImages: 1, batchMode: 'single' },
+ { id: 'merge', label: '合并图片', icon: '合', description: '长图 / PDF / GIF', minImages: 2, batchMode: 'merge' },
+ { id: 'rename', label: '批量重命名', icon: '名', description: '序号模板或查找替换', minImages: 1, batchMode: 'single' }
+]
+
+export const FORMAT_OPTIONS = [
+ { value: 'original', label: '保持原格式' },
+ { value: 'jpeg', label: 'JPEG' },
+ { value: 'png', label: 'PNG' },
+ { value: 'webp', label: 'WebP' },
+ { value: 'avif', label: 'AVIF' },
+ { value: 'tiff', label: 'TIFF' },
+ { value: 'gif', label: 'GIF' },
+ { value: 'bmp', label: 'BMP' },
+ { value: 'ico', label: 'ICO' }
+] as const
+
+export const MERGE_MODE_OPTIONS = [
+ { value: 'long-vertical', label: '纵向长图' },
+ { value: 'long-horizontal', label: '横向长图' },
+ { value: 'pdf', label: '合并 PDF' },
+ { value: 'gif-animated', label: '动画 GIF' }
+] as const
+
+export const WATERMARK_POSITIONS = [
+ { value: 'northwest', label: '左上' },
+ { value: 'north', label: '上' },
+ { value: 'northeast', label: '右上' },
+ { value: 'west', label: '左' },
+ { value: 'center', label: '居中' },
+ { value: 'east', label: '右' },
+ { value: 'southwest', label: '左下' },
+ { value: 'south', label: '下' },
+ { value: 'southeast', label: '右下' }
+] as const
+
+export const CROP_PRESETS = [
+ { label: '1:1', w: 1, h: 1 },
+ { label: '4:3', w: 4, h: 3 },
+ { label: '3:4', w: 3, h: 4 },
+ { label: '16:9', w: 16, h: 9 },
+ { label: '9:16', w: 9, h: 16 }
+] as const
+
+const baseOutput = {
+ outputMode: 'same-folder' as const,
+ outputDir: '',
+ suffix: '_processed'
+}
+
+export function createDefaultOptions(tool: ToolId): ToolOptions {
+ switch (tool) {
+ case 'compress':
+ return {
+ tool: 'compress',
+ quality: 80,
+ targetSizeKb: null,
+ format: 'original',
+ ...baseOutput
+ } satisfies CompressOptions
+ case 'convert':
+ return {
+ tool: 'convert',
+ format: 'webp',
+ quality: 90,
+ ...baseOutput
+ } satisfies ConvertOptions
+ case 'resize':
+ return {
+ tool: 'resize',
+ resizeMode: 'pixel',
+ width: '',
+ height: '',
+ scalePercent: 100,
+ keepAspectRatio: true,
+ withoutEnlargement: true,
+ format: 'original',
+ quality: 90,
+ ...baseOutput
+ } satisfies ResizeOptions
+ case 'rotate':
+ return {
+ tool: 'rotate',
+ rotateAngle: 90,
+ flipHorizontal: false,
+ flipVertical: false,
+ format: 'original',
+ quality: 90,
+ ...baseOutput
+ } satisfies RotateOptions
+ case 'crop':
+ return {
+ tool: 'crop',
+ cropMode: 'manual',
+ cropRatioW: 1,
+ cropRatioH: 1,
+ cropLeft: 0.1,
+ cropTop: 0.1,
+ cropWidth: 0.8,
+ cropHeight: 0.8,
+ format: 'original',
+ quality: 90,
+ ...baseOutput
+ } satisfies CropOptions
+ case 'watermark':
+ return {
+ tool: 'watermark',
+ watermarkType: 'text',
+ watermarkText: 'Watermark',
+ watermarkFontSize: 32,
+ watermarkColor: '#ffffff',
+ watermarkOpacity: 50,
+ watermarkPosition: 'southeast',
+ watermarkScale: 20,
+ format: 'original',
+ quality: 90,
+ ...baseOutput
+ } satisfies WatermarkOptions
+ case 'style':
+ return {
+ tool: 'style',
+ borderRadius: 0,
+ borderWidth: 0,
+ borderColor: '#333333',
+ padding: 0,
+ paddingColor: '#ffffff',
+ paddingOpacity: 100,
+ format: 'original',
+ quality: 90,
+ ...baseOutput
+ } satisfies StyleOptions
+ case 'merge':
+ return {
+ tool: 'merge',
+ mergeMode: 'long-vertical',
+ gifDelay: 500,
+ format: 'jpeg',
+ quality: 90,
+ ...baseOutput,
+ suffix: '_merged'
+ } satisfies MergeOptions
+ case 'rename':
+ return {
+ tool: 'rename',
+ renameMode: 'sequence',
+ prefix: 'image',
+ startIndex: 1,
+ padLength: 3,
+ separator: '_',
+ findText: '',
+ replaceText: '',
+ ...baseOutput,
+ suffix: ''
+ } satisfies RenameOptions
+ default:
+ return createDefaultOptions('compress')
+ }
+}
+
+export function createDefaultOptionsMap(): Record
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/types.ts b/plugins/batch-image-tools/src/BatchImage/types.ts
new file mode 100644
index 000000000..bf7d0b0a1
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/types.ts
@@ -0,0 +1,175 @@
+export type ToolId =
+ | 'compress'
+ | 'convert'
+ | 'resize'
+ | 'rotate'
+ | 'crop'
+ | 'watermark'
+ | 'style'
+ | 'merge'
+ | 'rename'
+
+export type RenameMode = 'sequence' | 'replace'
+
+export type OutputMode = 'same-folder' | 'overwrite' | 'output-dir'
+
+export type ImageFormat =
+ | 'original'
+ | 'jpeg'
+ | 'jpg'
+ | 'png'
+ | 'webp'
+ | 'avif'
+ | 'tiff'
+ | 'gif'
+ | 'bmp'
+ | 'ico'
+
+export type MergeMode = 'long-vertical' | 'long-horizontal' | 'pdf' | 'gif-animated'
+
+export interface EnterAction {
+ code?: string
+ type?: string
+ payload?: string | Array<{ path: string }>
+}
+
+export interface ImageItem {
+ path: string
+ name: string
+ size: number
+ width: number
+ height: number
+ format: string
+ thumb?: string
+}
+
+export interface BaseProcessOptions {
+ tool: ToolId
+ outputMode: OutputMode
+ outputDir?: string
+ suffix?: string
+}
+
+export interface CompressOptions extends BaseProcessOptions {
+ tool: 'compress'
+ quality: number
+ targetSizeKb?: number | null
+ format: ImageFormat
+}
+
+export interface ConvertOptions extends BaseProcessOptions {
+ tool: 'convert'
+ format: ImageFormat
+ quality: number
+}
+
+export interface ResizeOptions extends BaseProcessOptions {
+ tool: 'resize'
+ resizeMode: 'pixel' | 'percent'
+ width?: string
+ height?: string
+ scalePercent?: number
+ keepAspectRatio: boolean
+ withoutEnlargement: boolean
+ format: ImageFormat
+ quality: number
+}
+
+export interface RotateOptions extends BaseProcessOptions {
+ tool: 'rotate'
+ rotateAngle: number
+ flipHorizontal: boolean
+ flipVertical: boolean
+ format: ImageFormat
+ quality: number
+}
+
+export interface CropOptions extends BaseProcessOptions {
+ tool: 'crop'
+ cropMode: 'ratio' | 'manual'
+ cropRatioW: number
+ cropRatioH: number
+ /** 相对原图的裁剪框，取值 0–1 */
+ cropLeft: number
+ cropTop: number
+ cropWidth: number
+ cropHeight: number
+ format: ImageFormat
+ quality: number
+}
+
+export interface WatermarkOptions extends BaseProcessOptions {
+ tool: 'watermark'
+ watermarkType: 'none' | 'text' | 'image'
+ watermarkText?: string
+ watermarkImagePath?: string
+ watermarkFontSize?: number
+ watermarkColor?: string
+ watermarkOpacity?: number
+ watermarkPosition?: string
+ watermarkScale?: number
+ format: ImageFormat
+ quality: number
+}
+
+export interface StyleOptions extends BaseProcessOptions {
+ tool: 'style'
+ borderRadius?: number
+ borderWidth?: number
+ borderColor?: string
+ padding?: number
+ paddingColor?: string
+ paddingOpacity?: number
+ format: ImageFormat
+ quality: number
+}
+
+export interface MergeOptions extends BaseProcessOptions {
+ tool: 'merge'
+ mergeMode: MergeMode
+ gifDelay?: number
+ format: ImageFormat
+ quality: number
+}
+
+/** 原地重命名；outputMode/suffix 仅占位以兼容统一处理入口 */
+export interface RenameOptions extends BaseProcessOptions {
+ tool: 'rename'
+ renameMode: RenameMode
+ prefix: string
+ startIndex: number
+ padLength: number
+ separator: string
+ findText: string
+ replaceText: string
+}
+
+export type ToolOptions =
+ | CompressOptions
+ | ConvertOptions
+ | ResizeOptions
+ | RotateOptions
+ | CropOptions
+ | WatermarkOptions
+ | StyleOptions
+ | MergeOptions
+ | RenameOptions
+
+export interface ProcessResult {
+ inputPath?: string
+ inputPaths?: string[]
+ outputPath?: string
+ success: boolean
+ inputSize?: number
+ outputSize?: number
+ error?: string
+}
+
+export interface ToolDefinition {
+ id: ToolId
+ label: string
+ icon: string
+ description: string
+ minImages: number
+ batchMode: 'single' | 'merge'
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/utils.ts b/plugins/batch-image-tools/src/BatchImage/utils.ts
new file mode 100644
index 000000000..267b59e43
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/utils.ts
@@ -0,0 +1,29 @@
+export function formatBytes(bytes: number) {
+ if (bytes < 1024) return bytes + ' B'
+ if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+ return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
+}
+
+export function savingsPercent(input: number, output: number) {
+ if (!input) return 0
+ return Math.round(((input - output) / input) * 100)
+}
+
+export function pathBasename(filePath: string) {
+ const parts = filePath.split(/[/\\]/)
+ return parts[parts.length - 1] || filePath
+}
+
+export function resolveEnterPaths(action: {
+ type?: string
+ payload?: string | Array<{ path: string }>
+}) {
+ if (action.type === 'files' && Array.isArray(action.payload)) {
+ return action.payload.map((item) => item.path)
+ }
+ if (action.type === 'img' && typeof action.payload === 'string') {
+ const saved = window.services.saveBase64Image(action.payload)
+ return [saved]
+ }
+ return []
+}
diff --git a/plugins/batch-image-tools/src/BatchImage/utils/filePicker.ts b/plugins/batch-image-tools/src/BatchImage/utils/filePicker.ts
new file mode 100644
index 000000000..b9fbf7d3f
--- /dev/null
+++ b/plugins/batch-image-tools/src/BatchImage/utils/filePicker.ts
@@ -0,0 +1,163 @@
+const IMAGE_EXTENSIONS = [
+ 'jpg',
+ 'jpeg',
+ 'png',
+ 'webp',
+ 'gif',
+ 'bmp',
+ 'tiff',
+ 'avif',
+ 'svg',
+ 'ico'
+]
+
+type OpenDialogOptions = Parameters
+
+ 图
+
+
+ 批量图片处理
+{toolDef.description}
+
+ {images.length > 0 && (
+
+
+ {images.length}
+ 张 · {formatBytes(totalInputSize)}
+
+ )}
+
+
+
+
+
+
+
+
+
+ setResults([])}
+ />
+
+ setError('')} />
+
+
+
+