phase 1 & 2 add text mark
This commit is contained in:
88
src/App.vue
88
src/App.vue
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user