115 lines
6.5 KiB
Markdown
115 lines
6.5 KiB
Markdown
|
# توضیح مرحله‌به‌مرحلهٔ پروژه — فرم‌ساز (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 و …)
|