julian/watermark-wizard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

locale

Browse Source
This commit is contained in:
Julian Freeman
2026-01-19 09:32:12 -04:00
parent 2a468518af
commit 0b8f060c6f
4 changed files with 32 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@@ -33,7 +33,7 @@ async function openFolder() {
async function exportBatch() { async function exportBatch() {
if (store.images.length === 0) return; if (store.images.length === 0) return;
if (!store.watermarkSettings.text) { if (!store.watermarkSettings.text) {
alert("Please enter watermark text."); alert("请输入水印文字。");
return; return;
} }
@@ -41,7 +41,7 @@ async function exportBatch() {
const outputDir = await open({ const outputDir = await open({
directory: true, directory: true,
multiple: false, multiple: false,
title: "Select Output Directory" title: "选择输出目录"
}); });
if (outputDir && typeof outputDir === 'string') { if (outputDir && typeof outputDir === 'string') {
@@ -69,11 +69,11 @@ async function exportBatch() {
watermark: rustWatermarkSettings, watermark: rustWatermarkSettings,
outputDir: outputDir outputDir: outputDir
}); });
alert("Batch export completed!"); alert("批量导出完成！");
} }
} catch (e) { } catch (e) {
console.error("Export failed:", e); console.error("Export failed:", e);
alert("Export failed: " + e); alert("导出失败: " + e);
} finally { } finally {
isExporting.value = false; isExporting.value = false;
} }
@@ -84,7 +84,7 @@ async function exportBatch() {
<div class="h-screen w-screen bg-gray-900 text-white overflow-hidden flex flex-col"> <div class="h-screen w-screen bg-gray-900 text-white overflow-hidden flex flex-col">
<header class="h-14 bg-gray-800 flex items-center justify-between px-6 border-b border-gray-700 shrink-0 shadow-md z-10"> <header class="h-14 bg-gray-800 flex items-center justify-between px-6 border-b border-gray-700 shrink-0 shadow-md z-10">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<h1 class="text-lg font-bold tracking-wider bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">WATERMARK WIZARD</h1> <h1 class="text-lg font-bold tracking-wider bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">水印精灵</h1>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
@@ -93,7 +93,7 @@ async function exportBatch() {
class="flex items-center gap-2 bg-gray-700 hover:bg-gray-600 text-gray-200 px-4 py-2 rounded-md text-sm font-medium transition-all hover:shadow-lg" class="flex items-center gap-2 bg-gray-700 hover:bg-gray-600 text-gray-200 px-4 py-2 rounded-md text-sm font-medium transition-all hover:shadow-lg"
> >
<FolderOpen class="w-4 h-4" /> <FolderOpen class="w-4 h-4" />
Open Folder 打开文件夹
</button> </button>
<button <button
@@ -103,7 +103,7 @@ async function exportBatch() {
> >
<Download class="w-4 h-4" v-if="!isExporting" /> <Download class="w-4 h-4" v-if="!isExporting" />
<div v-else class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div> <div v-else class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
{{ isExporting ? 'Exporting...' : 'Export Batch' }} {{ isExporting ? '导出中...' : '批量导出' }}
</button> </button>
</div> </div>
</header> </header>

2
src/components/HeroView.vue
View File

@@ -302,7 +302,7 @@ const stopDrawing = () => {
></canvas> ></canvas>
</div> </div>
<div v-else class="text-gray-500 flex flex-col items-center"> <div v-else class="text-gray-500 flex flex-col items-center">
<p>No image selected</p> <p>未选择图片</p>
</div> </div>
</div> </div>
</template> </template>

46
src/components/SettingsPanel.vue
View File

@@ -40,7 +40,7 @@ const currentColor = computed({
}); });
const applyAll = () => { const applyAll = () => {
if (confirm("Apply current settings (Size, Opacity, Color) to ALL images?")) { if (confirm("是否将当前设置（大小、透明度、颜色）应用到所有图片？")) {
store.applySettingsToAll(); store.applySettingsToAll();
} }
}; };
@@ -56,14 +56,14 @@ const applyAll = () => {
class="flex-1 py-3 text-sm font-medium flex items-center justify-center gap-2 transition-colors" class="flex-1 py-3 text-sm font-medium flex items-center justify-center gap-2 transition-colors"
:class="store.editMode === 'add' ? 'bg-gray-700 text-blue-400 border-b-2 border-blue-400' : 'text-gray-400 hover:bg-gray-750'" :class="store.editMode === 'add' ? 'bg-gray-700 text-blue-400 border-b-2 border-blue-400' : 'text-gray-400 hover:bg-gray-750'"
> >
<PlusSquare class="w-4 h-4" /> Add <PlusSquare class="w-4 h-4" /> 添加
</button> </button>
<button <button
@click="store.editMode = 'remove'" @click="store.editMode = 'remove'"
class="flex-1 py-3 text-sm font-medium flex items-center justify-center gap-2 transition-colors" class="flex-1 py-3 text-sm font-medium flex items-center justify-center gap-2 transition-colors"
:class="store.editMode === 'remove' ? 'bg-gray-700 text-red-400 border-b-2 border-red-400' : 'text-gray-400 hover:bg-gray-750'" :class="store.editMode === 'remove' ? 'bg-gray-700 text-red-400 border-b-2 border-red-400' : 'text-gray-400 hover:bg-gray-750'"
> >
<Eraser class="w-4 h-4" /> Remove <Eraser class="w-4 h-4" /> 移除
</button> </button>
</div> </div>
@@ -75,20 +75,20 @@ const applyAll = () => {
<h2 class="text-lg font-bold flex items-center justify-between"> <h2 class="text-lg font-bold flex items-center justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Settings class="w-5 h-5" /> <Settings class="w-5 h-5" />
Watermark 水印设置
</div> </div>
<button <button
@click="applyAll" @click="applyAll"
title="Apply Settings to All Images" title="应用设置到所有图片"
class="bg-gray-700 hover:bg-gray-600 p-1.5 rounded text-xs text-blue-300 transition-colors flex items-center gap-1" class="bg-gray-700 hover:bg-gray-600 p-1.5 rounded text-xs text-blue-300 transition-colors flex items-center gap-1"
> >
<Copy class="w-3 h-3" /> All <Copy class="w-3 h-3" /> 全部
</button> </button>
</h2> </h2>
<!-- Text Input --> <!-- Text Input -->
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Content</label> <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">水印内容</label>
<div class="flex gap-2"> <div class="flex gap-2">
<div class="relative flex-1"> <div class="relative flex-1">
<Type class="absolute left-3 top-2.5 w-4 h-4 text-gray-500" /> <Type class="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
@@ -96,13 +96,13 @@ const applyAll = () => {
type="text" type="text"
v-model="store.watermarkSettings.text" v-model="store.watermarkSettings.text"
class="w-full bg-gray-700 text-white pl-10 pr-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none" class="w-full bg-gray-700 text-white pl-10 pr-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
placeholder="Enter text..." placeholder="输入水印文字..."
/> />
</div> </div>
<button <button
@click="store.recalcAllWatermarks()" @click="store.recalcAllWatermarks()"
class="bg-blue-600 hover:bg-blue-500 text-white p-2 rounded flex items-center justify-center transition-colors" class="bg-blue-600 hover:bg-blue-500 text-white p-2 rounded flex items-center justify-center transition-colors"
title="Apply & Recalculate Layout for ALL Images" title="应用并重新计算所有图片布局"
> >
<RotateCw class="w-4 h-4" /> <RotateCw class="w-4 h-4" />
</button> </button>
@@ -111,7 +111,7 @@ const applyAll = () => {
<!-- Color Picker --> <!-- Color Picker -->
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Color</label> <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">字体颜色</label>
<div class="flex items-center gap-2 bg-gray-700 p-2 rounded border border-gray-600"> <div class="flex items-center gap-2 bg-gray-700 p-2 rounded border border-gray-600">
<Palette class="w-4 h-4 text-gray-400" /> <Palette class="w-4 h-4 text-gray-400" />
<input <input
@@ -127,7 +127,7 @@ const applyAll = () => {
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<div class="flex justify-between mb-1"> <div class="flex justify-between mb-1">
<label class="text-xs text-gray-400">Size (Scale)</label> <label class="text-xs text-gray-400">字体大小 (比例)</label>
<span class="text-xs text-gray-300">{{ (currentScale * 100).toFixed(1) }}%</span> <span class="text-xs text-gray-300">{{ (currentScale * 100).toFixed(1) }}%</span>
</div> </div>
<input <input
@@ -138,12 +138,12 @@ const applyAll = () => {
v-model.number="currentScale" v-model.number="currentScale"
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500" class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
/> />
<p class="text-[10px] text-gray-500 mt-1">Relative to image height</p> <p class="text-[10px] text-gray-500 mt-1">基于图片高度的比例</p>
</div> </div>
<div> <div>
<div class="flex justify-between mb-1"> <div class="flex justify-between mb-1">
<label class="text-xs text-gray-400">Opacity</label> <label class="text-xs text-gray-400">不透明度</label>
<span class="text-xs text-gray-300">{{ (currentOpacity * 100).toFixed(0) }}%</span> <span class="text-xs text-gray-300">{{ (currentOpacity * 100).toFixed(0) }}%</span>
</div> </div>
<input <input
@@ -159,15 +159,15 @@ const applyAll = () => {
<!-- Placement Info --> <!-- Placement Info -->
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Placement Status</label> <label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">位置状态</label>
<div class="flex items-center gap-2 p-2 rounded bg-gray-700/50 border border-gray-600"> <div class="flex items-center gap-2 p-2 rounded bg-gray-700/50 border border-gray-600">
<div class="p-1 rounded bg-green-500/20 text-green-400"> <div class="p-1 rounded bg-green-500/20 text-green-400">
<CheckSquare class="w-4 h-4" v-if="!store.selectedImage?.manualPosition" /> <CheckSquare class="w-4 h-4" v-if="!store.selectedImage?.manualPosition" />
<div class="w-4 h-4" v-else></div> <div class="w-4 h-4" v-else></div>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<p class="text-sm font-medium text-gray-200" v-if="!store.selectedImage?.manualPosition">Auto (ZCA)</p> <p class="text-sm font-medium text-gray-200" v-if="!store.selectedImage?.manualPosition">自动 (ZCA)</p>
<p class="text-sm font-medium text-blue-300" v-else>Manual Override</p> <p class="text-sm font-medium text-blue-300" v-else>手动调整</p>
</div> </div>
</div> </div>
</div> </div>
@@ -177,7 +177,7 @@ const applyAll = () => {
<div v-else class="flex flex-col gap-6"> <div v-else class="flex flex-col gap-6">
<h2 class="text-lg font-bold flex items-center gap-2 text-red-400"> <h2 class="text-lg font-bold flex items-center gap-2 text-red-400">
<Brush class="w-5 h-5" /> <Brush class="w-5 h-5" />
Magic Eraser 魔法橡皮擦
</h2> </h2>
<!-- Auto Detect Controls --> <!-- Auto Detect Controls -->
@@ -186,23 +186,23 @@ const applyAll = () => {
@click="store.detectAllWatermarks()" @click="store.detectAllWatermarks()"
class="flex-1 bg-blue-600 hover:bg-blue-500 text-white py-2 rounded flex items-center justify-center gap-2 text-sm transition-colors" class="flex-1 bg-blue-600 hover:bg-blue-500 text-white py-2 rounded flex items-center justify-center gap-2 text-sm transition-colors"
> >
<Sparkles class="w-4 h-4" /> Auto Detect <Sparkles class="w-4 h-4" /> 自动检测
</button> </button>
<button <button
@click="store.selectedIndex >= 0 && store.clearMask(store.selectedIndex)" @click="store.selectedIndex >= 0 && store.clearMask(store.selectedIndex)"
class="bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 rounded flex items-center justify-center transition-colors" class="bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 rounded flex items-center justify-center transition-colors"
title="Clear Mask" title="清空遮罩"
:disabled="store.selectedIndex < 0" :disabled="store.selectedIndex < 0"
> >
<Trash2 class="w-4 h-4" /> <Trash2 class="w-4 h-4" />
</button> </button>
</div> </div>
<p class="text-xs text-gray-400">Paint over the watermark you want to remove. The AI will fill in the background.</p> <p class="text-xs text-gray-400">涂抹想要移除的水印，AI 将自动填充背景。</p>
<div> <div>
<div class="flex justify-between mb-1"> <div class="flex justify-between mb-1">
<label class="text-xs text-gray-400">Brush Size</label> <label class="text-xs text-gray-400">画笔大小</label>
<span class="text-xs text-gray-300">{{ store.brushSettings.size }}px</span> <span class="text-xs text-gray-300">{{ store.brushSettings.size }}px</span>
</div> </div>
<input <input
@@ -216,7 +216,7 @@ const applyAll = () => {
</div> </div>
<div class="p-3 bg-red-900/20 border border-red-900/50 rounded text-xs text-red-200"> <div class="p-3 bg-red-900/20 border border-red-900/50 rounded text-xs text-red-200">
AI Inpainting (Diffusion) connected. AI 修复功能已就绪。
</div> </div>
<button <button
@@ -225,7 +225,7 @@ const applyAll = () => {
:disabled="store.selectedIndex < 0" :disabled="store.selectedIndex < 0"
> >
<Eraser class="w-5 h-5" /> <Eraser class="w-5 h-5" />
Process Removal 执行移除
</button> </button>
</div> </div>

2
src/stores/gallery.ts
View File

@@ -40,7 +40,7 @@ export const useGalleryStore = defineStore("gallery", () => {
const watermarkSettings = ref<WatermarkSettings>({ const watermarkSettings = ref<WatermarkSettings>({
type: 'text', type: 'text',
text: 'Watermark', text: '水印',
color: '#FFFFFF', color: '#FFFFFF',
opacity: 1.0, opacity: 1.0,
scale: 0.03, scale: 0.03,