first commit

2025-11-02 00:23:22 +08:00
commit e2955debb7
18 changed files with 13383 additions and 0 deletions
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import DesignerCanvas from "~/components/designer/DesignerCanvas.vue";
+import DesignerPreview from "~/components/designer/DesignerPreview.vue";
+import DesignerToolbar from "~/components/designer/DesignerToolbar.vue";
+import TemplatePicker from "~/components/designer/TemplatePicker.vue";
+
+import { useSlipmatDesigner } from "~/composables/useSlipmatDesigner";
+
+const {
+  templates,
+  selectedTemplate,
+  selectTemplate,
+  displaySize,
+  templateLabel,
+  productionPixelSize,
+  previewUrl,
+  registerCanvas,
+  unregisterCanvas,
+  addTextbox,
+  addShape,
+  addImageFromFile,
+  clearDesign,
+  downloadPreview,
+  downloadProduction,
+  exportDesign,
+  isExporting,
+  activeFillColor,
+  activeStrokeColor,
+  canStyleSelection,
+  setActiveFillColor,
+  setActiveStrokeColor,
+  zoomLevel,
+  minZoom,
+  maxZoom,
+  setZoom,
+  zoomIn,
+  zoomOut,
+  resetZoom,
+} = useSlipmatDesigner();
+
+const handleTemplateSelect = (templateId: string) => {
+  selectTemplate(templateId);
+};
+
+const handleExport = async () => {
+  await exportDesign();
+};
+</script>
+
+<template>
+  <main class="min-h-screen bg-slate-950 pb-16 text-slate-100">
+    <div class="mx-auto max-w-6xl px-4 pt-12 sm:px-6 lg:px-8">
+      <header class="space-y-3">
+        <p class="text-sm uppercase tracking-[0.35em] text-sky-400">
+          Slipmatz Designer
+        </p>
+        <h1 class="text-3xl font-bold text-white sm:text-4xl">
+          Craft custom slipmats ready for the pressing plant.
+        </h1>
+        <p class="max-w-3xl text-base text-slate-300">
+          Pick a template, drop in artwork, and we’ll generate both a high-fidelity
+          preview and a print-ready PNG at exact specs. Everything stays within a
+          circular safe zone to ensure clean results on vinyl.
+        </p>
+      </header>
+
+      <section class="mt-10 grid gap-8 lg:grid-cols-[320px_minmax(0,1fr)]">
+        <div class="space-y-6">
+          <TemplatePicker
+            :templates="templates"
+            :selected-template-id="selectedTemplate.id"
+            @select="handleTemplateSelect"
+          />
+
+          <DesignerToolbar
+            :on-add-text="addTextbox"
+            :on-add-circle="() => addShape('circle')"
+            :on-add-rectangle="() => addShape('rect')"
+            :on-clear="clearDesign"
+            :on-import-image="addImageFromFile"
+            :on-fill-change="setActiveFillColor"
+            :on-stroke-change="setActiveStrokeColor"
+            :active-fill="activeFillColor"
+            :active-stroke="activeStrokeColor"
+            :can-style-selection="canStyleSelection"
+            :zoom="zoomLevel"
+            :min-zoom="minZoom"
+            :max-zoom="maxZoom"
+            :on-zoom-change="setZoom"
+            :on-zoom-in="zoomIn"
+            :on-zoom-out="zoomOut"
+            :on-zoom-reset="resetZoom"
+          />
+
+          <DesignerPreview
+            :preview-url="previewUrl"
+            :template-label="templateLabel"
+            :production-pixels="productionPixelSize"
+            :is-exporting="isExporting"
+            @export="handleExport"
+            @download-preview="downloadPreview"
+            @download-production="downloadProduction"
+          />
+        </div>
+
+        <div class="flex flex-col gap-6">
+          <div class="rounded-3xl border border-slate-800/60 bg-linear-to-br from-slate-900 via-slate-950 to-black p-6 shadow-2xl shadow-slate-950/60">
+            <DesignerCanvas
+              :size="displaySize"
+              :background-color="selectedTemplate.backgroundColor"
+              :register-canvas="registerCanvas"
+              :unregister-canvas="unregisterCanvas"
+            />
+            <p class="mt-4 text-sm text-slate-400">
+              Safe zone and bleed guides update automatically when you switch
+              templates. Use the toolbar to layer text, shapes, and imagery inside the
+              circular boundary.
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+</template>