نسخهٔ ۱.۰ · پنج فریم‌ورک در یک بسته

فراز

راهنمای نصب برای HTML، React، Vue، Next.js و Laravel Livewire. همان شصت‌وپنج صفحه در پنج پوشه؛ پوشه‌ای را باز کنید که با پشتهٔ فنی‌تان یکی است. تبدیل از HTML به فریم‌ورک را خودتان انجام نمی‌دهید.

HTML	`faraz-html` — فایل را باز کنید؛ بیلد لازم نیست
React	`faraz-react` — Vite · `npm run dev` · پورت ۵۱۷۳
Vue	`faraz-vue` — Vue ۳ · `npm run dev` · پورت ۵۱۷۴
Next.js	`faraz-next` — App Router · `npm run dev` · پورت ۳۰۰۰
Laravel	`faraz-laravel-livewire` — Livewire ۳ · `artisan serve` · پورت ۸۰۰۰

HTML · React · Vue · Next.js · Laravel Livewire فونت رابط: وزیرمتن

فرازفهرست

بسته پنج پوشه است، نه یک قالب HTML که بعداً باید به React یا Next تبدیل شود. هر نسخه همان داشبورد، فروشگاه و فین‌تک را دارد. فقط همان پوشه‌ای را نصب کنید که با پشتهٔ فنی‌تان می‌خواند.

۱. پیش از نصب

HTML	مرورگر به‌روز. برای ویرایش استایل در صورت نیاز: Node.js و npm
React / Vue / Next	Node.js ۱۸ یا جدیدتر، npm
Laravel	PHP ۸.۱ یا جدیدتر، Composer

ویرایشگر کد و یک ترمینال کافی است. دیتابیس برای دمو لازم نیست؛ صفحات با دادهٔ نمونه کار می‌کنند.

۲. پنج نسخه در یک بسته

منبع ظاهر نسخهٔ HTML است. React، Vue، Next.js و Laravel Livewire از همان صفحات ساخته شده‌اند. دارایی‌ها داخل هر پوشه کپی شده‌اند تا همان نسخه به‌تنهایی اجرا شود.

نسخه	پوشه	اجرا	آدرس
HTML	`faraz-html`	باز کردن `index.html`	فایل محلی
React	`faraz-react`	`npm run dev`	`127.0.0.1:5173`
Vue	`faraz-vue`	`npm run dev`	`127.0.0.1:5174`
Next.js	`faraz-next`	`npm run dev`	`127.0.0.1:3000`
Laravel	`faraz-laravel-livewire`	`php artisan serve`	`127.0.0.1:8000`

لازم نیست هر پنج تا را نصب کنید. HTML برای نشان‌دادن به مشتری همان روز است. React و Next برای تیم اکوسیستم React. Vue برای تیمی که Vue می‌نویسد. Laravel برای بک‌اند PHP بدون فرانت جدا.

فراز — راهنمای نصبHTML · React · Vue

۳. HTML — دمو بدون بیلد

اگر فقط می‌خواهید پنل را ببینید یا به مشتری نشان دهید، همین نسخه کافی است. پوشهٔ faraz-html را باز کنید و فایل index.html را در مرورگر ببینید. Node لازم نیست.

اگر استایل را تغییر می‌دهید:

cd faraz-html
npm install
npm run dev

ورودی Tailwind فایل css/style.css است و خروجی style.css. رنگ و فاصلهٔ اختصاصی فراز در css/theme-faraz.css است؛ برای برندینگ همان فایل را عوض کنید، نه تک‌تک صفحات.

۴. React — Vite و React Router

اگر فرانت پروژه React است، این پوشه را بردارید — نه HTML را برای تبدیل دستی. همان شصت‌وپنج صفحه به‌صورت اپ تک‌صفحه‌ای است.

cd faraz-react
npm install
npm run dev

آدرس پیش‌فرض: http://127.0.0.1:5173

ساخت نسخهٔ نهایی: npm run build. مسیریابی با React Router است. پوستهٔ سایدبار و هدر در src/layouts و صفحات در src/pages قرار دارند.

۵. Vue — Vue ۳ و Vue Router

تیم Vue لازم نیست HTML را به کامپوننت ترجمه کند. پوشهٔ faraz-vue همان طرح را با Vue ۳ می‌دهد. پورت ۵۱۷۴ کنار React تداخل ندارد.

cd faraz-vue
npm install
npm run dev

آدرس پیش‌فرض: http://127.0.0.1:5174. ساخت: npm run build.

فراز — راهنمای نصبNext.js · Laravel

۶. Next.js — App Router

اگر React را با Next جلو می‌برید، faraz-next از قبل آماده است. همان صفحات پنل، با App Router، جدا از نسخهٔ Vite.

cd faraz-next
npm install
npm run dev

آدرس پیش‌فرض: http://127.0.0.1:3000

صفحات پنل زیر app/(panel) و صفحات ورود زیر app/(guest) هستند. برای تولید: npm run build و سپس npm start.

۷. Laravel Livewire — PHP سروری

اگر بک‌اند PHP است، فرانت جدا از HTML/React نمی‌سازید. همان سایدبار و کارت‌ها روی Laravel ۱۰ و Livewire ۳ است.

cd faraz-laravel-livewire
composer install
copy .env.example .env
php artisan key:generate
php artisan serve

آدرس پیش‌فرض: http://127.0.0.1:8000

در ویندوز از copy استفاده شده؛ در لینوکس و مک cp .env.example .env. دیتابیس برای دمو الزامی نیست.

صفحات Livewire در app/Livewire/Pages و نماها در resources/views هستند. استایل و اسکریپت از public/css و public/js خوانده می‌شود.

اگر قالب HTML را بعداً عوض کردید و خواستید صفحات Livewire از نو ساخته شوند: php tools/convert-faraz.php. لایوت اصلی را این دستور بازنویسی نمی‌کند.

فراز — راهنمای نصبظاهر و رفتار

۸. شخصی‌سازی ظاهر در هر پنج نسخه

رنگ برند، شعاع گوشه، سایه و فاصله در theme-faraz.css با متغیرهایی مثل --fz-brand-600 و --fz-accent تعریف شده‌اند. همان فایل در HTML، React، Vue، Next و Laravel وجود دارد (در HTML زیر css/ و در بقیه زیر public/css یا معادل آن).

نام محصول را در هدر و عنوان صفحات عوض کنید.
نشانهٔ خانه در سایدبار یک SVG است؛ با لوگوی فروشگاه جایگزین کنید.
برای صفحهٔ تازه، یکی از صفحات موجود را الگو بگیرید تا فاصله و کارت‌ها یکدست بمانند.

۹. تقویم شمسی و حالت تاریک

انتخابگر بازهٔ تاریخ با jalali-datepicker.js کار می‌کند و باید پیش از Alpine در صفحه باشد. در نسخه‌های فریم‌ورک این ترتیب در فایل boot رعایت شده است.

حالت تاریک با کلاس dark روی html و مقدار dark-mode در localStorage ذخیره می‌شود. سوییچ موجود در هدر همان را عوض می‌کند.

عرض سایدبار با کلاس sidebar-expanded روی body کنترل می‌شود. اگر جمع شده بود، دکمهٔ بالای سایدبار را بزنید؛ وضعیت در مرورگر می‌ماند.

نمودارها

Chart.js به‌همراه Moment برای محور زمان استفاده می‌شود. فایل‌های dashboard-charts.js، analytics-charts.js و fintech-charts.js باید هر سه بارگذاری شوند. دستکاری این سه فایل معمولاً لازم نیست مگر بخواهید دادهٔ واقعی را جایگزین نمونه کنید.

فراز — راهنمای نصبعیب‌یابی

۱۰. اگر چیزی بالا نیامد

صفحه سفید در React یا Vue	نصب را کامل کنید. پورت را در ترمینال چک کنید. کش مرورگر را یک‌بار خالی کنید.
استایل نمی‌آید	مسیر `/css/style.css` و `/css/theme-faraz.css` باید از ریشهٔ همان نسخه سرو شود.
تصویر محصول خالی است	فایل‌ها در `images/` یا `public/images/` هستند. آدرس باید با `/images/` شروع شود، نه دامنهٔ اشتباه.
نمودار رسم نمی‌شود	هر سه فایل نمودار و Chart.js و Moment بارگذاری شده باشند. کنسول مرورگر را برای خطای اسکریپت ببینید.
تقویم همان لحظه باز است	نسخهٔ به‌روز `jalali-datepicker.js` را داشته باشید و اسکریپت تقویم قبل از Alpine بیاید.
سایدبار جمع است	دکمهٔ جمع‌شدن را بزنید تا کلاس `sidebar-expanded` روی بدنه بنشیند.
Laravel کلید ندارد	`php artisan key:generate` را بعد از ساخت `.env` اجرا کنید.
فونت فارسی نیست	اتصال برای بارگذاری Vazirmatn از Google Fonts لازم است، مگر فونت را محلی کنید.

محدودهٔ این نسخه

فراز یک قالب رابط است با دادهٔ نمونه. احراز هویت واقعی، اتصال درگاه و منطق انبار را باید روی همین اسکلت بسازید. پنج نسخه — HTML، React، Vue، Next.js و Laravel — برای انتخاب پشته است، نه برای اجرای هم‌زمان همه روی یک دامنه.

فراز — HTML · React · Vue · Next.js · Laravel Livewire
راهنمای نصب · نسخهٔ ۱.۰