phase 1 & 2 add text mark

This commit is contained in:
Julian Freeman
2026-01-18 23:22:52 -04:00
parent a588caf743
commit 0c5824d85c
10 changed files with 659 additions and 44 deletions

View File

@@ -1,11 +1,15 @@
<script setup lang="ts">
import HeroView from "./components/HeroView.vue";
import ThumbnailStrip from "./components/ThumbnailStrip.vue";
import SettingsPanel from "./components/SettingsPanel.vue";
import { useGalleryStore } from "./stores/gallery";
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
import { FolderOpen, Download } from 'lucide-vue-next';
import { ref } from "vue";
const store = useGalleryStore();
const isExporting = ref(false);
async function openFolder() {
try {
@@ -25,26 +29,80 @@ async function openFolder() {
console.error("Failed to open folder:", e);
}
}
async function exportBatch() {
if (store.images.length === 0) return;
if (!store.watermarkSettings.text) {
alert("Please enter watermark text.");
return;
}
try {
const outputDir = await open({
directory: true,
multiple: false,
title: "Select Output Directory"
});
if (outputDir && typeof outputDir === 'string') {
isExporting.value = true;
await invoke('export_batch', {
images: store.images,
watermark: store.watermarkSettings,
outputDir: outputDir
});
alert("Batch export completed!");
}
} catch (e) {
console.error("Export failed:", e);
alert("Export failed: " + e);
} finally {
isExporting.value = false;
}
}
</script>
<template>
<div class="h-screen w-screen bg-gray-900 text-white overflow-hidden flex flex-col">
<header class="h-12 bg-gray-800 flex items-center justify-between px-4 border-b border-gray-700 shrink-0">
<h1 class="text-sm font-bold tracking-wider">WATERMARK WIZARD</h1>
<button
@click="openFolder"
class="bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded text-sm transition-colors"
>
Open Folder
</button>
<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">
<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>
</div>
<div class="flex items-center gap-3">
<button
@click="openFolder"
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" />
Open Folder
</button>
<button
@click="exportBatch"
:disabled="isExporting"
class="flex items-center gap-2 bg-blue-600 hover:bg-blue-500 disabled:bg-blue-800 disabled:cursor-not-allowed text-white px-4 py-2 rounded-md text-sm font-medium transition-all hover:shadow-lg shadow-blue-900/20"
>
<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>
{{ isExporting ? 'Exporting...' : 'Export Batch' }}
</button>
</div>
</header>
<main class="flex-1 relative bg-black overflow-hidden">
<HeroView />
</main>
<footer class="h-32 bg-gray-800 border-t border-gray-700 shrink-0">
<ThumbnailStrip />
</footer>
<div class="flex-1 flex overflow-hidden">
<main class="flex-1 relative bg-black flex flex-col min-w-0">
<div class="flex-1 relative overflow-hidden">
<HeroView />
</div>
<footer class="h-32 bg-gray-800 border-t border-gray-700 shrink-0 z-10">
<ThumbnailStrip />
</footer>
</main>
<aside class="w-80 shrink-0 h-full border-l border-gray-700">
<SettingsPanel />
</aside>
</div>
</div>
</template>