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

# فراز

راهنمای نصب برای 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
راهنمای نصب · نسخهٔ ۱.۰