# توضیح مرحله‌به‌مرحلهٔ پروژه — فرم‌ساز (Form Builder)

## هدف کلی
ساخت یک **اپلیکیشن تک‌صفحه‌ای (SPA)** به نام **فرم‌ساز** که کاربر بعد از ورود (لاگین) بتواند با کشیدن المان‌ها از یک پالت، فرم دلخواه بسازد، ذخیره کند و بعداً دقیقاً مثل چیدمان خودش دوباره ببیند.

---

## مرحله ۱ — ورود کاربر (لاگین)
- یک صفحهٔ لاگین ساده (مثلاً نام کاربری / رمز یا فقط یک دکمه «ورود» برای تست).
- بعد از لاگین موفق، کاربر به **داشبورد** هدایت می‌شود.
- نیازی به بک‌اند نیست؛ می‌توان لاگین را فقط در فرانت و با state ساده یا Vuex شبیه‌سازی کرد.

---

## مرحله ۲ — داشبورد و چیدمان کلی
- بعد از لاگین، **داشبورد** نمایش داده می‌شود.
- چیدمان پیشنهادی:
  - **سمت راست:** پالت المان‌ها (پالت فرم‌ساز).
  - **وسط/چپ:** پنل اصلی (بوم) که کاربر المان‌ها را اینجا می‌گذارد و فرم را می‌سازد.
- بهتر است پالت در سمت راست صفحه باشد.

---

## مرحله ۳ — پالت المان‌ها (سمت راست)
پالت شامل المان‌هایی است که کاربر می‌تواند **بکشد** و روی بوم **رها** کند:

| المان | توضیح | اعتبارسنجی / تنظیمات |
|------|--------|------------------------|
| **Input box** | ورودی متن | نوع: رنگ / عدد / رشته / چک‌باکس / رادیو — اعتبارسنجی: اجباری (require)، min، max |
| **Select box** | انتخاب‌گر | نوع: تکی یا چندتایی — اعتبارسنجی: اجباری (Require) |
| **Range slider** | اسلایدر محدوده | اعتبارسنجی: اجباری، steps، min، max |

کاربر هر المان را که بخواهد از پالت برمی‌دارد و در **موقعیت دلخواه** روی پنل اصلی قرار می‌دهد.

---

## مرحله ۴ — بوم فرم‌ساز (پنل اصلی)
- کاربر المان‌ها را از پالت **کشیده** و در این پنل **رها** می‌کند (Drag & Drop).
- برای هر المان باید بتوان مشخص کرد:
  - **موقعیت** (مثلاً x, y یا چیدمان grid/flex).
  - **عرض و ارتفاع** (طول و عرض المان).
- چیدمان نهایی باید قابل **ذخیره** باشد تا بعداً عیناً **رندر** شود.

---

## مرحله ۵ — تنظیمات و اعتبارسنجی هر فیلد
- برای هر فیلد (Input، Select، Slider) کاربر باید بتواند:
  - **ولیدیشن‌ها** را تعیین کند (مثلاً اجباری بودن).
  - برای فیلدهای متنی: **حداقل و حداکثر تعداد کاراکتر** (min/max length).
- برای Slider: **steps، min، max**.
- برای Select: **Require** و در صورت نیاز گزینه‌های چندتایی.

---

## مرحله ۶ — ذخیرهٔ فرم و خروجی JSON
- هر فرمی که ساخته می‌شود باید **یک نام** داشته باشد.
- ذخیره به صورت **محلی** (مثلاً در مرورگر یا در state/Vuex):
  - در تسک گفته شده اگر فریمورک Vue.js باشد، در **Vuex** ذخیره شود.
- خروجی نهایی = یک **فایل (ساختار) JSON** که شامل همهٔ اطلاعات است:
  - نوع و ترتیب المان‌ها
  - موقعیت و اندازهٔ هر المان
  - تنظیمات و ولیدیشن‌ها

---

## مرحله ۷ — نمایش و بازسازی فرم از روی JSON
- بعد از ذخیره، باید بتوان از روی همان JSON فرم را **دوباره رندر** کرد.
- خروجی باید **کاملاً دقیق** مطابق چیدمان کاربر باشد (طول و عرض المان‌ها و مکان قرارگیری آن‌ها مهم است).

---

## مرحله ۸ — جدول فرم‌های ذخیره‌شده
- **جدولی** که تمام فرم‌های ذخیره‌شده را نشان می‌دهد.
- قابلیت‌ها:
  - **صفحه‌بندی (Pagination).**
  - **جستجو بر اساس نام** فرم.
- داده‌ها از همان ذخیرهٔ محلی (مثلاً Vuex) خوانده می‌شوند؛ نیازی به بک‌اند نیست.

---

## مرحله ۹ — ذخیرهٔ محلی اطلاعات پنل
- اطلاعات پنل (تعداد المان‌ها، تنظیمات گرفته‌شده از کاربر و …) هم به صورت **محلی** ذخیره شوند.
- در صورت استفاده از Vue.js، در **Vuex** ذخیره شود.
- هیچ نیازی به ارتباط با **Back-end** نیست.

---

## مرحله ۱۰ — ظاهر و واکنش‌گرایی
- المان‌ها و رابط کاربری تا حد امکان **زیبا و جذاب** باشند.
- اگر اپ **Responsive** باشد، به عنوان یک نکتهٔ مثبت در نظر گرفته می‌شود.

---

## جمع‌بندی مراحل به ترتیب پیاده‌سازی پیشنهادی

1. **لاگین** → ورود به داشبورد  
2. **داشبورد** → چیدمان کلی (پالت راست + بوم وسط/چپ)  
3. **پالت** → تعریف المان‌ها (Input، Select، Slider) و قابلیت کشیدن  
4. **بوم** → Drag & Drop، قرار دادن المان، موقعیت و اندازه  
5. **تنظیمات فیلد** → ولیدیشن، min/max، steps و …  
6. **ذخیره** → نام فرم + ذخیره در Vuex و خروجی JSON  
7. **بازسازی** → رندر دقیق فرم از روی JSON  
8. **جدول** → لیست فرم‌ها + صفحه‌بندی + جستجو بر اساس نام  
9. **پایداری** → ذخیرهٔ محلی/Vuex برای پنل و فرم‌ها  
10. **ظاهر و Responsive** → زیبایی و واکنش‌گرایی  

---

## تکنولوژی‌های پروژه
- **Vue 3** + **TypeScript** + **Vite**
- **Vue Router** — مسیریابی (لاگین / داشبورد)
- **Vuex** — state و ذخیرهٔ محلی فرم‌ها و اطلاعات پنل
- **Tailwind CSS** — استایل
- **Ant Design Vue** — کامپوننت‌های آماده (دکمه، جدول، فرم، Input و …)