Mahdi/CRM_Montzar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): modals close only via Esc/X/cancel; standard 3:1 form cover processing

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mahdi
2026-10-07 15:23:14 +03:30
co-authored by Cursor
parent f5b6a47f3c
commit 2f3646d085
19 changed files with 366 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/LeadFormBuilderView.vue
+114 -35
View File
@@ -19,6 +19,8 @@ import type {
PipelineDto,
} from '@mento/shared';
import { toFaDigits } from '@/lib/jalali';
import { prepareFormCover } from '@/lib/form-cover';
import { useEscClose } from '@/lib/modal-stack';
type Tab = 'edit' | 'settings' | 'share' | 'responses';
type IconName =
@@ -133,9 +135,13 @@ const iframeSnippet = computed(
const qrUrl = computed(() =>
`https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(publicUrl.value)}`,
);
const coverSrc = computed(() =>
form.value?.hasCover ? `/api/public/forms/${form.value.publicToken}/cover` : '',
);
const coverUploading = ref(false);
const coverVersion = ref(0);
const coverSrc = computed(() => {
if (!form.value?.hasCover) return '';
const v = coverVersion.value || Date.parse(form.value.updatedAt) || 0;
return `/api/public/forms/${form.value.publicToken}/cover?v=${v}`;
});
const editingField = computed(() => fields.value.find((f) => f.key === editFieldKey.value) ?? null);
/** متن خام گزینه‌ها — جدا از options تا خط خالی هنگام تایپ حذف نشود */
const optionsDraft = ref('');
@@ -149,11 +155,33 @@ function syncOptions() {
if (editingField.value) editingField.value.options = parseOptions(optionsDraft.value);
}
const fieldSnapshot = ref<LeadFormFieldDto | null>(null);
const fieldIsNew = ref(false);
watch(editFieldKey, () => {
optionsDraft.value = editingField.value?.options.join('\n') ?? '';
const f = editingField.value;
optionsDraft.value = f?.options.join('\n') ?? '';
fieldSnapshot.value = f ? { ...f, options: [...f.options] } : null;
sheetError.value = '';
});
function cancelFieldSheet() {
const snap = fieldSnapshot.value;
const key = editFieldKey.value;
if (key && fieldIsNew.value) {
fields.value = fields.value.filter((f) => f.key !== key);
} else if (key && snap) {
const i = fields.value.findIndex((f) => f.key === key);
if (i >= 0) fields.value[i] = { ...snap, options: [...snap.options] };
}
fieldIsNew.value = false;
editFieldKey.value = null;
}
useEscClose(() => editFieldKey.value, cancelFieldSheet);
useEscClose(() => desktopPreviewOpen.value, () => { desktopPreviewOpen.value = false; });
useEscClose(() => publishOpen.value, () => { publishOpen.value = false; });
function needsOptions(type: string) {
return type === 'select' || type === 'radio' || type === 'checkbox';
}
@@ -172,6 +200,7 @@ function closeFieldSheet() {
f.label = f.label.trim();
optionsDraft.value = f.options.join('\n');
}
fieldIsNew.value = false;
editFieldKey.value = null;
}
@@ -183,6 +212,7 @@ const COLOR_PRESETS = [
];
const colorOpen = ref(false);
const hexDraft = ref('');
useEscClose(() => colorOpen.value, () => { colorOpen.value = false; });
function toggleColor() {
colorOpen.value = !colorOpen.value;
@@ -272,7 +302,9 @@ function addField(type: LeadFormFieldType, preset?: Partial<LeadFormFieldInput>)
}
function addAndEdit(type: LeadFormFieldType) {
editFieldKey.value = addField(type);
const key = addField(type);
fieldIsNew.value = true;
editFieldKey.value = key;
}
function duplicateField(field: LeadFormFieldDto) {
@@ -410,21 +442,33 @@ async function save() {
}
async function uploadCover(ev: Event) {
const file = (ev.target as HTMLInputElement).files?.[0];
const input = ev.target as HTMLInputElement;
const file = input.files?.[0];
input.value = '';
if (!file) return;
const body = new FormData();
body.append('file', file);
error.value = '';
coverUploading.value = true;
try {
const prepared = await prepareFormCover(file);
const body = new FormData();
body.append('file', prepared);
const { data } = await api.post<LeadFormDto>(`/lead-forms/${id.value}/cover`, body);
applyForm(data);
} catch {
error.value = 'آپلود کاور ناموفق بود.';
form.value = data;
coverVersion.value = Date.now();
} catch (e) {
error.value = e instanceof Error && !axios.isAxiosError(e) ? e.message : 'آپلود کاور ناموفق بود.';
} finally {
coverUploading.value = false;
}
}
async function clearCover() {
const { data } = await api.delete<LeadFormDto>(`/lead-forms/${id.value}/cover`);
applyForm(data);
try {
const { data } = await api.delete<LeadFormDto>(`/lead-forms/${id.value}/cover`);
form.value = data;
} catch {
error.value = 'حذف کاور ناموفق بود.';
}
}
async function loadResponses() {
@@ -576,11 +620,23 @@ onMounted(load);
</aside>
<section class="canvas">
<button class="cover-box" type="button" @click="coverInput?.click()">
<button
class="cover-box"
:class="{ has: coverSrc }"
type="button"
:disabled="coverUploading"
:style="coverSrc ? { background: submitColor } : undefined"
@click="coverInput?.click()"
>
<img v-if="coverSrc" :src="coverSrc" alt="" />
<span v-else>+ افزودن لوگو یا تصویر کاور</span>
<span v-else-if="coverUploading">در حال پردازش تصویر…</span>
<span v-else class="cover-empty">
+ افزودن لوگو یا تصویر کاور
<small>اندازهٔ استاندارد ۱۲۰۰×۴۰۰ پیکسل (۳:۱) — تصاویر دیگر خودکار تنظیم می‌شوند</small>
</span>
<span v-if="coverSrc" class="cover-change">{{ coverUploading ? 'در حال آپلود…' : 'تغییر تصویر' }}</span>
</button>
<input ref="coverInput" type="file" accept="image/*" hidden @change="uploadCover" />
<input ref="coverInput" type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" hidden @change="uploadCover" />
<button v-if="coverSrc" class="link" type="button" @click="clearCover">حذف کاور</button>
<div class="title-card">
@@ -866,11 +922,13 @@ onMounted(load);
</article>
</section>
<div v-if="desktopPreviewOpen" class="overlay desk-overlay" @click.self="desktopPreviewOpen = false">
<div class="desk-sheet" role="dialog" aria-label="پیش‌نمایش دسکتاپ">
<div v-if="desktopPreviewOpen" class="overlay desk-overlay">
<div class="desk-sheet" role="dialog" aria-modal="true" aria-label="پیش‌نمایش دسکتاپ">
<header>
<strong>پیش‌نمایش دسکتاپ</strong>
<button class="btn ghost" type="button" @click="desktopPreviewOpen = false">بستن</button>
<button class="x-btn" type="button" aria-label="بستن (Esc)" title="بستن (Esc)" @click="desktopPreviewOpen = false">
<UiIcon name="x" :size="18" />
</button>
</header>
<div class="desk-form">
<div class="cover" :style="{ background: submitColor }">
@@ -907,9 +965,14 @@ onMounted(load);
</div>
</div>
<div v-if="editingField" class="overlay" @click.self="closeFieldSheet">
<div class="sheet">
<h3>ویرایش فیلد</h3>
<div v-if="editingField" class="overlay">
<div class="sheet" role="dialog" aria-modal="true" aria-label="ویرایش فیلد">
<header class="sheet-head">
<h3>{{ fieldIsNew ? 'فیلد جدید' : 'ویرایش فیلد' }}</h3>
<button class="x-btn" type="button" aria-label="بستن (Esc)" title="بستن (Esc)" @click="cancelFieldSheet">
<UiIcon name="x" :size="18" />
</button>
</header>
<label>عنوان <input v-model="editingField.label" maxlength="120" /></label>
<label>متن راهنما <input v-model="editingField.placeholder" /></label>
<label class="chk"><input v-model="editingField.required" type="checkbox" /> الزامی</label>
@@ -959,15 +1022,20 @@ onMounted(load);
</small>
</label>
<p v-if="sheetError" class="sheet-error">{{ sheetError }}</p>
<button class="btn primary" type="button" @click="closeFieldSheet">تمام</button>
<div class="sheet-actions">
<button class="btn primary" type="button" @click="closeFieldSheet">تأیید</button>
<button class="btn ghost" type="button" @click="cancelFieldSheet">انصراف</button>
</div>
</div>
</div>
<div v-if="publishOpen" class="overlay" @click.self="publishOpen = false">
<div class="sheet publish-sheet" role="dialog" aria-label="انتشار فرم">
<div v-if="publishOpen" class="overlay">
<div class="sheet publish-sheet" role="dialog" aria-modal="true" aria-label="انتشار فرم">
<header class="publish-head">
<strong>انتشار فرم</strong>
<button class="btn ghost" type="button" @click="publishOpen = false">بستن</button>
<button class="x-btn" type="button" aria-label="بستن (Esc)" title="بستن (Esc)" @click="publishOpen = false">
<UiIcon name="x" :size="18" />
</button>
</header>
<div class="publish-preview">
<div class="mini-cover" :style="{ background: submitColor }">
@@ -1031,14 +1099,13 @@ onMounted(load);
}
.desk-sheet header { display: flex; justify-content: space-between; align-items: center; }
.desk-form { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 40px rgba(15,23,42,.08); }
.desk-form .cover { height: 140px; }
.desk-form .cover img { width: 100%; height: 140px; object-fit: cover; }
.desk-form .cover { height: auto; aspect-ratio: 3 / 1; max-height: 260px; }
.desk-body { padding: 1.2rem 1.4rem 1.4rem; }
.desk-body h3 { font-size: 1.35rem; }
.desk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.desk-fields .wide { grid-column: 1 / -1; }
.desk-form .send { justify-self: start; min-width: 200px; }
.cover { height: 86px; display: grid; place-items: center; color: #fff; overflow: hidden; }
.cover { aspect-ratio: 3 / 1; display: grid; place-items: center; color: #fff; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.preview-body { padding: 0.8rem; display: grid; gap: 0.5rem; }
.preview-body h3 { margin: 0; font-size: 1rem; }
@@ -1047,8 +1114,14 @@ onMounted(load);
.preview-body input, .preview-body textarea, .preview-body select { border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.45rem 0.6rem; font: inherit; background: #f8fafc; }
.send { border: 0; color: #fff; border-radius: var(--radius); min-height: var(--control-h); height: var(--control-h); font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; box-sizing: border-box; }
.opts, .stars { color: #64748b; font-size: 0.75rem; display: grid; gap: 0.2rem; }
.cover-box { width: 100%; min-height: 88px; border: 1.5px dashed #99f6e4; border-radius: var(--radius); background: #f0fdfa; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; overflow: hidden; }
.cover-box img { width: 100%; height: 88px; object-fit: cover; display: block; }
.cover-box { position: relative; width: 100%; aspect-ratio: 3 / 1; max-height: 200px; border: 1.5px dashed #99f6e4; border-radius: var(--radius); background: #f0fdfa; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; overflow: hidden; display: grid; place-items: center; padding: 0; }
.cover-box.has { border-style: solid; border-color: transparent; }
.cover-box:disabled { cursor: progress; opacity: 0.75; }
.cover-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-empty { display: grid; gap: 0.25rem; justify-items: center; padding: 0.5rem; }
.cover-empty small { font-weight: 500; font-size: 0.74rem; color: #64748b; }
.cover-change { position: absolute; inset-inline-start: 0.5rem; bottom: 0.5rem; background: rgba(15,23,42,.65); color: #fff; font-size: 0.74rem; padding: 0.2rem 0.55rem; border-radius: 999px; opacity: 0; transition: opacity .15s; }
.cover-box:hover .cover-change, .cover-box:disabled .cover-change { opacity: 1; }
.title-card, .field-card, .submit-card, .adv-box { border: 1px solid #eef2f7; border-radius: var(--radius); padding: 0.8rem; display: grid; gap: 0.45rem; }
.title { font: inherit; font-size: 1.1rem; font-weight: 700; color: #0f172a; border: 1px solid #e2e8f0; border-radius: var(--radius); padding: 0.55rem 0.7rem; background: #fff; width: 100%; box-sizing: border-box; }
.title:hover { border-color: #99f6e4; }
@@ -1130,7 +1203,13 @@ onMounted(load);
.row input { flex: 1; min-width: 0; }
.sub { border-bottom: 1px solid #f1f5f9; padding: 0.5rem 0; }
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); display: grid; place-items: center; z-index: 40; padding: 1rem; }
.sheet { width: min(420px,100%); background: #fff; border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.65rem; }
.sheet { width: min(420px,100%); max-height: calc(100dvh - 2rem); overflow-y: auto; background: #fff; border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.65rem; box-sizing: border-box; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sheet-head h3 { margin: 0; }
.sheet-actions { display: flex; gap: 0.5rem; }
.sheet-actions .btn { flex: 1; }
.x-btn { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: var(--radius); background: #fff; color: #64748b; display: grid; place-items: center; cursor: pointer; }
.x-btn:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
.link { background: none; border: 0; color: #0f766e; font: inherit; font-weight: 700; cursor: pointer; text-align: right; padding: 0; }
.panel-title {
margin: 0.2rem 0 0;
@@ -1296,8 +1375,8 @@ onMounted(load);
.publish-preview p { margin: 0 0 0.35rem; color: #64748b; font-size: 0.82rem; }
.publish-preview a { color: #0f766e; font-weight: 700; font-size: 0.85rem; }
.mini-cover {
width: 72px;
height: 72px;
width: 108px;
aspect-ratio: 3 / 1;
border-radius: var(--radius);
overflow: hidden;
}
@@ -1321,7 +1400,7 @@ onMounted(load);
.tabs { display: grid; grid-template-columns: 1fr 1fr; }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.publish-preview { grid-template-columns: 56px 1fr; }
.mini-cover { width: 56px; height: 56px; }
.mini-cover { width: 84px; }
.settings-grid { grid-template-columns: 1fr; }
.settings-grid .span-2 { grid-column: auto; }
.settings-card { padding: 0.85rem; }