feat(lead-forms): public form matches builder preview; live unsaved preview in new tab

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/LeadFormBuilderView.vue

@@ -13,6 +13,7 @@ import type {
   LeadFormFieldType,
   LeadFormMapTo,
   LeadFormSubmissionDto,
+  PublicLeadFormDto,
   LeadStageDto,
   OrgUserDto,
   PipelineDto,
@@ -437,9 +438,47 @@ async function copyText(text: string) {
   ok.value = 'کپی شد.';
 }
 
+const previewDraft = computed<PublicLeadFormDto | null>(() => {
+  if (!form.value) return null;
+  return {
+    name: name.value.trim() || 'عنوان فرم',
+    description: description.value.trim() || null,
+    thankYouMessage: thankYouMessage.value.trim() || null,
+    redirectUrl: null,
+    submitLabel: submitLabel.value.trim() || 'ارسال درخواست',
+    submitColor: submitColor.value,
+    hasCover: form.value.hasCover,
+    coverPath: coverSrc.value || null,
+    fields: fields.value.map((f) => ({
+      key: f.key,
+      label: f.label,
+      fieldType: f.fieldType,
+      required: f.required,
+      placeholder: f.placeholder || null,
+      options: f.options,
+    })),
+  };
+});
+
+function previewKey() {
+  return `lead-form-preview:${form.value?.publicToken ?? ''}`;
+}
+
+function writePreviewDraft() {
+  if (!previewDraft.value) return;
+  try {
+    localStorage.setItem(previewKey(), JSON.stringify(previewDraft.value));
+  } catch {
+    /* storage full / disabled — preview falls back to saved version */
+  }
+}
+
+watch(previewDraft, writePreviewDraft, { deep: true });
+
 function openPreview() {
   if (!form.value?.publicPath) return;
-  window.open(form.value.publicPath, '_blank', 'noopener');
+  writePreviewDraft();
+  window.open(`${form.value.publicPath}?preview=1`, '_blank', 'noopener');
 }
 
 function toggleAssignee(uid: string) {
@@ -515,7 +554,7 @@ onMounted(load);
             <template v-for="f in fields" :key="f.key">
               <p v-if="f.fieldType === 'heading'" class="heading">{{ f.label }}</p>
               <label v-else>
-                {{ f.label }}
+                <span>{{ f.label }}<span v-if="f.required" class="req">*</span></span>
                 <textarea v-if="f.fieldType === 'textarea'" rows="3" :placeholder="f.placeholder || ''" disabled />
                 <select v-else-if="f.fieldType === 'select'" disabled>
                   <option>{{ f.placeholder || 'انتخاب کنید' }}</option>
@@ -845,7 +884,7 @@ onMounted(load);
               <template v-for="f in fields" :key="'d-' + f.key">
                 <p v-if="f.fieldType === 'heading'" class="heading wide">{{ f.label }}</p>
                 <label v-else :class="{ wide: f.fieldType === 'textarea' || f.fieldType === 'checkbox' }">
-                  {{ f.label }}
+                  <span>{{ f.label }}<span v-if="f.required" class="req">*</span></span>
                   <textarea v-if="f.fieldType === 'textarea'" rows="3" :placeholder="f.placeholder || ''" disabled />
                   <select v-else-if="f.fieldType === 'select'" disabled>
                     <option>{{ f.placeholder || 'انتخاب کنید' }}</option>

apps/web/src/views/LeadFormPublicView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import type { PublicLeadFormDto, SubmitLeadFormResponse } from '@mento/shared';
+import UiIcon from '@/components/UiIcon.vue';
 
 const route = useRoute();
 const loading = ref(true);
@@ -15,6 +16,32 @@ const form = ref<PublicLeadFormDto | null>(null);
 const values = reactive<Record<string, string>>({});
 const honeypot = ref('');
 const token = String(route.params.token || '');
+/** حالت پیش‌نمایش سازنده: نسخهٔ ذخیره‌نشده از localStorage خوانده می‌شود و ارسال/آمار غیرفعال است */
+const isPreview = route.query.preview === '1';
+const PREVIEW_KEY = `lead-form-preview:${token}`;
+
+function readPreviewDraft(): PublicLeadFormDto | null {
+  try {
+    const raw = localStorage.getItem(PREVIEW_KEY);
+    return raw ? (JSON.parse(raw) as PublicLeadFormDto) : null;
+  } catch {
+    return null;
+  }
+}
+
+function applyLoaded(data: PublicLeadFormDto) {
+  form.value = data;
+  for (const field of data.fields) {
+    if (field.fieldType === 'heading') continue;
+    values[field.key] = values[field.key] ?? '';
+  }
+}
+
+function onStorage(e: StorageEvent) {
+  if (e.key !== PREVIEW_KEY) return;
+  const draft = readPreviewDraft();
+  if (draft) applyLoaded(draft);
+}
 
 const coverUrl = computed(() =>
   form.value?.coverPath || (form.value?.hasCover ? `/api/public/forms/${token}/cover` : ''),
@@ -46,7 +73,7 @@ async function postEvent(type: 'view' | 'start') {
 }
 
 function onFieldFocus() {
-  if (started.value) return;
+  if (started.value || isPreview) return;
   started.value = true;
   void postEvent('start');
 }
@@ -54,14 +81,19 @@ function onFieldFocus() {
 async function load() {
   loading.value = true;
   error.value = '';
+  if (isPreview) {
+    const draft = readPreviewDraft();
+    if (draft) {
+      applyLoaded(draft);
+      loading.value = false;
+      window.addEventListener('storage', onStorage);
+      return;
+    }
+  }
   try {
     const { data } = await axios.get<PublicLeadFormDto>(`/api/public/forms/${token}`);
-    form.value = data;
-    for (const field of data.fields) {
-      if (field.fieldType === 'heading') continue;
-      values[field.key] = values[field.key] ?? '';
-    }
-    void postEvent('view');
+    applyLoaded(data);
+    if (!isPreview) void postEvent('view');
   } catch {
     error.value = 'این فرم پیدا نشد یا غیرفعال است.';
     form.value = null;
@@ -83,6 +115,11 @@ function hasMulti(key: string, option: string) {
 
 async function submit() {
   if (!form.value) return;
+  if (isPreview) {
+    thankYou.value = form.value.thankYouMessage || 'ثبت شد. متشکریم.';
+    done.value = true;
+    return;
+  }
   saving.value = true;
   error.value = '';
   try {
@@ -114,19 +151,23 @@ async function submit() {
 }
 
 onMounted(load);
+onBeforeUnmount(() => window.removeEventListener('storage', onStorage));
 </script>
 
 <template>
-  <main class="shell">
+  <main class="shell" dir="rtl">
+    <p v-if="isPreview" class="preview-banner">
+      حالت پیش‌نمایش — تغییرات ذخیره‌نشده نمایش داده می‌شود و ارسال واقعی انجام نمی‌شود.
+    </p>
     <div class="panel">
-      <div v-if="coverUrl" class="cover" :style="{ background: form?.submitColor || '#14b8a6' }">
-        <img :src="coverUrl" alt="" />
+      <div class="cover" :style="{ background: form?.submitColor || '#14b8a6' }">
+        <img v-if="coverUrl" :src="coverUrl" alt="" />
+        <UiIcon v-else name="layers" :size="34" />
       </div>
-      <div v-else class="cover" :style="{ background: form?.submitColor || '#14b8a6' }" />
 
+      <div class="body">
       <header>
-        <h1 v-if="form">{{ form.name }}</h1>
-        <h1 v-else>فرم</h1>
+        <h1>{{ form?.name || 'فرم' }}</h1>
         <p v-if="form?.description">{{ form.description }}</p>
       </header>
 
@@ -134,6 +175,7 @@ onMounted(load);
       <p v-else-if="error && !form" class="error">{{ error }}</p>
 
       <div v-else-if="done" class="success">
+        <UiIcon name="check" :size="22" />
         <strong>ثبت شد</strong>
         <p>{{ thankYou }}</p>
       </div>
@@ -207,10 +249,12 @@ onMounted(load);
           :disabled="saving"
           :style="{ background: form.submitColor || '#14b8a6' }"
         >
+          <UiIcon v-if="!saving" name="send" :size="16" />
           {{ saving ? 'در حال ارسال…' : (form.submitLabel || 'ارسال درخواست') }}
         </button>
-        <small>اطلاعات شما محرمانه می‌ماند.</small>
+        <small class="note">اطلاعات شما محرمانه می‌ماند.</small>
       </form>
+      </div>
     </div>
   </main>
 </template>
@@ -220,38 +264,67 @@ onMounted(load);
   min-height: 100vh;
   display: grid;
   place-items: center;
-  padding: 1.5rem;
-  background: var(--bg);
+  align-content: center;
+  gap: 0.75rem;
+  padding: 1.5rem 1rem;
+  background: var(--bg, #f1f5f9);
+  box-sizing: border-box;
+  text-align: right;
+}
+.preview-banner {
+  margin: 0;
+  width: min(420px, 100%);
+  padding: 0.55rem 0.8rem;
+  border-radius: var(--radius);
+  background: #fef3c7;
+  color: #92400e;
+  font-size: 0.82rem;
+  font-weight: 600;
+  box-sizing: border-box;
 }
 .panel {
-  width: min(440px, 100%);
+  width: min(420px, 100%);
   background: #fff;
-  border-radius: var(--radius);
+  border-radius: calc(var(--radius) + 4px);
   overflow: hidden;
-  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
+  box-shadow: 0 0 0 1px #e2e8f0, 0 18px 44px rgba(15, 23, 42, 0.1);
 }
-.cover { height: 110px; }
-.cover img { width: 100%; height: 110px; object-fit: cover; display: block; }
-header, .fields, .success { padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: 0.75rem; }
-h1 { margin: 0; font-size: 1.35rem; }
-header p, .muted, small { margin: 0; color: #64748b; }
-label { display: grid; gap: 0.35rem; color: #475569; font-size: 0.92rem; }
-.req { color: #b42318; }
+.cover { height: 120px; display: grid; place-items: center; color: #fff; overflow: hidden; }
+.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.body { padding: 1.1rem 1.15rem 1.25rem; display: grid; gap: 0.75rem; }
+header { display: grid; gap: 0.3rem; }
+h1 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #0f172a; }
+header p, .muted { margin: 0; color: #64748b; font-size: 0.88rem; line-height: 1.7; }
+.fields { display: grid; gap: 0.7rem; }
+label { display: grid; gap: 0.3rem; color: #475569; font-size: 0.88rem; font-weight: 600; }
+.req { color: #ef4444; }
 input, textarea, select {
-  border: 1px solid #e2e8f0; border-radius: var(--radius); min-height: var(--control-h); padding: 0 0.9rem; font: inherit; width: 100%; background: #f8fafc; box-sizing: border-box;
+  border: 1px solid #e2e8f0; border-radius: var(--radius); min-height: var(--control-h, 42px); padding: 0.5rem 0.75rem;
+  font: inherit; font-weight: 400; color: #0f172a; width: 100%; background: #f8fafc; box-sizing: border-box;
 }
-.btn { border: 0; color: #fff; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); padding: 0 1rem; font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box; }
-.error { color: #b42318; margin: 0; }
-.success { background: #e7f6ef; }
-.opts { display: grid; gap: 0.35rem; }
-.opts label { display: flex; align-items: center; gap: 0.4rem; }
+textarea { resize: vertical; }
+input:focus, textarea:focus, select:focus { outline: none; border-color: #14b8a6; background: #fff; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); }
+.btn {
+  border: 0; color: #fff; border-radius: var(--radius); min-height: var(--control-h, 42px); height: var(--control-h, 42px);
+  padding: 0 1rem; font: inherit; font-weight: 700; cursor: pointer; box-sizing: border-box;
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.15rem;
+}
+.btn:disabled { opacity: 0.7; cursor: default; }
+.note { margin: 0; color: #94a3b8; font-size: 0.78rem; text-align: center; }
+.error { color: #b42318; margin: 0; font-size: 0.88rem; }
+.success { display: grid; justify-items: center; gap: 0.35rem; text-align: center; padding: 1rem; border-radius: var(--radius); background: #ecfdf5; color: #047857; }
+.success p { margin: 0; color: #065f46; }
+.opts { display: grid; gap: 0.4rem; font-weight: 400; }
+.opts label { display: flex; align-items: center; gap: 0.45rem; font-weight: 400; color: #334155; }
+.opts input { width: auto; min-height: 0; }
 .stars { display: flex; gap: 0.25rem; }
-.stars button { border: 0; background: none; font-size: 1.3rem; color: #cbd5e1; cursor: pointer; }
+.stars button { border: 0; background: none; font-size: 1.5rem; color: #cbd5e1; cursor: pointer; padding: 0; }
 .stars button.on { color: #eab308; }
-.heading { margin: 0; font-weight: 700; color: #0f172a; }
+.heading { margin: 0.2rem 0 0; font-weight: 700; color: #0f172a; }
 .hp {
   position: absolute;
-  left: -9999px;
+  clip-path: inset(50%);
+  opacity: 0;
   width: 1px;
   height: 1px;
   overflow: hidden;