feat: SEO-friendly export filenames with global title, per-item file title, Vietnamese slugify

Author: bnqtoan

app/src/components/bulk-canvas-card.vue

@@ -81,7 +81,7 @@ onMounted(() => {
     </div>
 
     <!-- Label -->
-    <div class="card__label">{{ item.title || 'Untitled' }}</div>
+    <div class="card__label">{{ item.fileTitle || item.title || 'Untitled' }}</div>
   </div>
 </template>
 

app/src/components/bulk-canvas-item-editor.vue

@@ -76,6 +76,14 @@ onUnmounted(() => {
         @update:modelValue="onParamUpdate('feature_image', $event)"
       />
 
+      <!-- File title (for export filename, not rendered in template) -->
+      <MpInput
+        label="File Title"
+        :modelValue="item.fileTitle"
+        placeholder="Override export filename"
+        @update:modelValue="onParamUpdate('fileTitle', $event)"
+      />
+
       <!-- Title / Subtitle -->
       <MpInput
         label="Title"

app/src/components/bulk-canvas-toolbar.vue

@@ -3,16 +3,20 @@ import { ref } from 'vue'
 import MpButton from './ui/MpButton.vue'
 import ImagePicker from './ImagePicker.vue'
 
+import MpInput from './ui/MpInput.vue'
+
 const props = defineProps<{
   templates: Array<{ id: string; name: string; brand: string; layout: string; size: string }>
   selectedTemplateId: string
+  globalTitle: string
   itemCount: number
   selectedCount: number
   rendering: boolean
 }>()
 
 const emit = defineEmits<{
   'update:selectedTemplateId': [id: string]
+  'update:globalTitle': [title: string]
   'add-files': [files: File[]]
   'add-url': [url: string]
   'toggle-select-all': []
@@ -63,6 +67,16 @@ function onImagePickerSelect(url: string) {
       </select>
     </div>
 
+    <!-- Global title for export filenames -->
+    <div class="toolbar__section">
+      <MpInput
+        label="Export Name"
+        :modelValue="globalTitle"
+        placeholder="e.g. may-ep-nhua-servo"
+        @update:modelValue="emit('update:globalTitle', $event)"
+      />
+    </div>
+
     <!-- Drop zone -->
     <div class="toolbar__section">
       <label class="toolbar__label">Add Images</label>

app/src/composables/use-bulk-canvas.ts

@@ -7,6 +7,7 @@ export interface BulkCanvasItem {
   featureImage: string
   title: string
   subtitle: string
+  fileTitle: string
   params: Record<string, string>
   previewHtml: string
   selected: boolean
@@ -25,11 +26,23 @@ interface TemplateInfo {
 let nextId = 1
 function uid() { return `bulk-${nextId++}` }
 
+// Remove Vietnamese diacritics and slugify
+function slugify(text: string): string {
+  return text
+    .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    .replace(/[đĐ]/g, 'd')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+    || 'banner'
+}
+
 export function useBulkCanvas() {
   const mediaStore = useMediaStore()
 
   const templates = ref<TemplateInfo[]>([])
   const selectedTemplateId = ref('')
+  const globalTitle = ref('')
   const items = ref<BulkCanvasItem[]>([])
   const editingItemId = ref<string | null>(null)
   const renderQueue = ref(0)
@@ -57,13 +70,20 @@ export function useBulkCanvas() {
       featureImage,
       title,
       subtitle: '',
+      fileTitle: '',
       params: {},
       previewHtml: '',
       selected: true,
       loading: false,
     }
   }
 
+  // Generate export filename for an item at given index (1-based)
+  function exportFilename(item: BulkCanvasItem, index: number): string {
+    const base = slugify(item.fileTitle || globalTitle.value)
+    return `${base}-${index}.png`
+  }
+
   async function addImages(files: File[]) {
     const uploads = files.map(async (file) => {
       const media = await mediaStore.uploadFile(file)
@@ -140,7 +160,8 @@ export function useBulkCanvas() {
     const item = items.value.find(i => i.id === id)
     if (!item) return
 
-    // Handle special keys
+    // Handle special keys — auto-slugify fileTitle
+    if (key === 'fileTitle') { item.fileTitle = slugify(value); return }
     if (key === 'title') item.title = value
     else if (key === 'subtitle') item.subtitle = value
     else if (key === 'feature_image') item.featureImage = value
@@ -182,11 +203,12 @@ export function useBulkCanvas() {
 
   return {
     templates, selectedTemplateId, selectedTemplate,
+    globalTitle,
     items, editingItemId, editingItem, renderQueue,
     loadTemplates,
     addImages, addImageUrls, removeItem,
     renderItem, renderAll,
-    updateItemParam,
+    updateItemParam, exportFilename,
     toggleItem, selectAll, deselectAll, toggleSelectAll, selectedItems,
     openEditor, closeEditor,
   }

app/src/views/BulkCreateView.vue

@@ -12,7 +12,7 @@ onMounted(() => canvas.loadTemplates())
 
 // --- Download helpers (snapdom + jszip) ---
 
-async function captureItem(id: string): Promise<{ name: string; blob: Blob } | null> {
+async function captureItem(id: string): Promise<{ id: string; blob: Blob } | null> {
   const card = document.querySelector(`[data-bulk-id="${id}"]`) as HTMLElement
   if (!card) return null
 
@@ -46,9 +46,7 @@ async function captureItem(id: string): Promise<{ name: string; blob: Blob } | n
   card.style.overflow = origCardOverflow
   card.style.position = origCardPos
 
-  const item = canvas.items.value.find(i => i.id === id)
-  const name = (item?.title || 'banner').replace(/[^a-zA-Z0-9\u00C0-\u024F\u1E00-\u1EFF ]/g, '').trim().substring(0, 50)
-  return { name: `${name}-${id}.png`, blob }
+  return { id, blob }
 }
 
 async function downloadZip(ids: string[]) {
@@ -57,9 +55,12 @@ async function downloadZip(ids: string[]) {
     const JSZip = (await import('jszip')).default
     const zip = new JSZip()
 
-    for (const id of ids) {
-      const result = await captureItem(id)
-      if (result) zip.file(result.name, result.blob)
+    for (let i = 0; i < ids.length; i++) {
+      const result = await captureItem(ids[i]!)
+      if (!result) continue
+      const item = canvas.items.value.find(it => it.id === result.id)
+      const filename = item ? canvas.exportFilename(item, i + 1) : `banner-${i + 1}.png`
+      zip.file(filename, result.blob)
     }
 
     const zipBlob = await zip.generateAsync({ type: 'blob' })
@@ -107,10 +108,12 @@ function onViewDrop(e: DragEvent) {
     <BulkCanvasToolbar
       :templates="canvas.templates.value"
       :selectedTemplateId="canvas.selectedTemplateId.value"
+      :globalTitle="canvas.globalTitle.value"
       :itemCount="canvas.items.value.length"
       :selectedCount="canvas.selectedItems.value.length"
       :rendering="canvas.renderQueue.value > 0 || downloading"
       @update:selectedTemplateId="canvas.selectedTemplateId.value = $event"
+      @update:globalTitle="canvas.globalTitle.value = $event"
       @add-files="canvas.addImages($event)"
       @add-url="canvas.addImageUrls([$event])"
       @toggle-select-all="canvas.toggleSelectAll()"