پنل مدیریت فروشگاه فارسی

# فراز

همان پنل را پنج‌بار می‌گیرید: HTML، React، Vue، Next.js و Laravel Livewire

۶۵ صفحه در هر نسخه
یک طرح مشترک

فراز برای فروشگاهی نوشته شده که باید فارسی، راست‌چین و شمسی باشد — نه قالبی که بعداً RTL به آن وصله شود. داشبورد فروش، کاتالوگ، سفارش، فاکتور، فین‌تک، پیام و تقویم جلالی یک‌بار طراحی شده‌اند و همان ظاهر در پنج پوشهٔ جدا پیاده شده است. شما فریم‌ورک را انتخاب می‌کنید؛ طرح را از نو نمی‌سازید.

HTML React · Vite Vue ۳ Next.js Laravel Livewire

HTML باز کردن فایل · بدون بیلد
React Vite · پورت ۵۱۷۳
Vue Vue ۳ · پورت ۵۱۷۴
Next App Router · ۳۰۰۰
Laravel Livewire ۳ · ۸۰۰۰
۰۱

## پنج پوشه · پنج فریم‌ورک · یک ظاهر

هر نسخه همان سایدبار، همان کارت‌ها، همان نمودارها و همان شصت‌وپنج صفحه را دارد. تفاوت فقط پشتهٔ فنی است — نه کیفیت طرح.

HTML faraz-html نسخهٔ مرجع ظاهر. index.html را در مرورگر باز می‌کنید و پنل کامل را می‌بینید؛ Node برای دمو لازم نیست. مناسب ارائه به مشتری، وایر و شروع همان روز. رنگ و فاصله از theme-faraz.css می‌آید و بقیهٔ نسخه‌ها از همین منبع ساخته شده‌اند.
React faraz-react Vite، React Router و همان شصت‌وپنج صفحه به‌صورت اپ تک‌صفحه‌ای. npm install و npm run dev روی پورت ۵۱۷۳. لایوت سایدبار و هدر در src/layouts است و صفحات در src/pages. اگر پروژه React است، HTML را دستی به کامپوننت تبدیل نمی‌کنید.
Vue faraz-vue Vue ۳ و Vue Router با پورت جدا (۵۱۷۴) تا کنار React هم‌زمان اجرا شود. کامپوننت‌ها و روت‌ها آماده‌اند. تیمی که Vue می‌نویسد لازم نیست قالب HTML را خط‌به‌خط به SFC برگرداند؛ همان طرح را از پوشه برمی‌دارد.
Next.js faraz-next App Router روی پورت ۳۰۰۰، جدا از نسخهٔ Vite. صفحات پنل زیر app/(panel) و ورود زیر app/(guest) هستند. اگر React را با Next جلو می‌برید، این پوشه از قبل همان مسیر را دارد — بدون اینکه از روی HTML دوباره بچینید.
Laravel faraz-laravel-livewire Laravel ۱۰ و Livewire ۳. composer install، ساخت .env، artisan key:generate و artisan serve روی ۸۰۰۰. ظاهر فراز سمت سرور PHP است: همان سایدبار و کارت‌ها روی Blade. برای تیمی که بک‌اند PHP دارد و نمی‌خواهد فرانت جدا بسازد.
۰۲

## چرا پنج نسخه در یک بسته است

تا مجبور نشوید قالب را برای فریم‌ورک بعدی از نو پیاده کنید. مشتری ظاهر را یک‌بار می‌بیند؛ شما پوشه را عوض می‌کنید.

HTML

### همان روز به مشتری نشان می‌دهید

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

React و Next.js

### دو مسیر در اکوسیستم React

یک پوشه برای Vite و اپ خالص، یک پوشه برای App Router. هر دو همان صفحات را دارند تا مجبور نباشید از React به Next مهاجرتِ ظاهری کنید. اگر امروز Vite است و فردا Next، طرح از قبل در هر دو جا نشسته است.

Vue

### اگر تیم Vue می‌نویسد، HTML را ترجمه نمی‌کنید

کامپوننت‌ها و روت‌ها آماده‌اند. پورت ۵۱۷۴ کنار پروژهٔ React تداخل ندارد. استودیویی که هم React دارد هم Vue، می‌تواند هر دو را از یک بسته بردارد و ظاهر را برای دو مشتری یکی نگه دارد.

Laravel Livewire

### اگر بک‌اند PHP است، فرانت جدا نمی‌سازید

همان سایدبار و همان کارت‌ها روی Livewire. برای تیمی که Blade و PHP را ترجیح می‌دهد و نمی‌خواهد یک SPA جدا کنار لاراول نگه دارد. دمو بدون دیتابیس بالا می‌آید؛ منطق فروشگاه را روی همین اسکلت می‌گذارید.

۰۳

## داخل بسته چه صفحاتی هست

فروشگاه، مالی، ارتباط، ورود و قطعات رابط — یک‌بار طراحی شده و در HTML تا Laravel تکرار شده است. این‌ها اسکرین‌شات تزئینی نیستند؛ مسیر واقعی پنل‌اند.

### فروشگاه

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

### نمای کلی و رشد

داشبورد فروش، تحلیل با نمودار، فین‌تک، کمپین و رودمپ. کارت‌های خلاصه و چارت‌ها با Chart.js روی دادهٔ نمونه کار می‌کنند تا اسکلت گزارش را خالی نبینید.

### مالی

صورتحساب، فهرست تراکنش، جزئیات تراکنش، کارت‌های اعتباری و پلن‌ها. مناسب فروشگاهی که بعد از سفارش باید حساب و اشتراک را هم نشان بدهد.

### ارتباط و تقویم

پیام، صندوق ورودی، اعلان، فید، انجمن، رویداد، آگهی شغلی و پایگاه دانش. تقویم شمسی با انتخابگر جلالی است؛ تاریخ میلادی به‌زور روی فرم فارسی ننشسته.

### ورود و تیم

ورود، ثبت‌نام، بازیابی رمز، چهار گام آنبوردینگ، پروفایل، تنظیمات، کاربران در دو نما، کانبان و فهرست کار. صفحهٔ خالی و ۴۰۴ هم در مجموعه است.

### قطعات رابط

دکمه، فرم، مودال، تب، نشان، هشدار، آکاردئون، آواتار، دراپ‌داون، صفحه‌بندی، نان‌ریزه، آیکن و تولتیپ. برای صفحهٔ تازه‌ای که خودتان می‌سازید، الگو از همین‌هاست.

۰۴

## نگاهی به بخشی از قالب

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

۰۱ داشبورد · روشن
۰۲ تقویم جلالی
۰۳ ورود به پنل
۰۴ داشبورد · تاریک
۰۵ پیام‌ها
۰۶ کاتالوگ فروشگاه
۰۵

## آنچه قالب را فارسی کرده، نه فقط راست‌چین

RTL وصلهٔ آخر کار نیست. فونت، رنگ، تاریخ و نمودار از همان HTML تا Livewire یک رفتار دارند.

### راست‌چین از ریشه

جهت صفحه، سایدبار، فرم و جدول برای فارسی چیده شده‌اند. فاصله‌ها با توکن مشترک کنترل می‌شوند تا وقتی برند را عوض می‌کنید، پنج نسخه از هم جدا نیفتند.

### تقویم جلالی

انتخابگر بازهٔ تاریخ با jalali-datepicker کار می‌کند و باید پیش از Alpine بارگذاری شود. این ترتیب در نسخه‌های فریم‌ورک رعایت شده تا تقویم بعد از رفرش باز نماند.

### روشن و تاریک

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

### تم مشترک فراز

سبزِ برند، طلاییِ تاکید، شعاع گوشه و سایه در theme-faraz.css تعریف شده‌اند. لوگو و نام را یک‌بار عوض می‌کنید؛ لازم نیست شصت‌وپنج صفحه را دانه دانه رنگ کنید.

۰۶

## از پوشه تا مرورگر

هر نسخه دستور خودش را دارد؛ ظاهر یکی است. لازم نیست هر پنج پوشه را نصب کنید — همان را که با پشته‌تان می‌خواند.

HTML

### index.html را باز کنید

پوشهٔ faraz-html را در مرورگر ببینید. برای دموی مشتری بیلد لازم نیست. اگر استایل را عوض می‌کنید، npm run dev همان‌جا Tailwind را می‌سازد.

React · Vue · Next

### npm install سپس dev

در پوشهٔ همان فریم‌ورک. React روی ۵۱۷۳، Vue روی ۵۱۷۴، Next روی ۳۰۰۰. ساخت نهایی با npm run build است.

Laravel

### composer و artisan

نصب وابستگی، کپی .env، ساخت کلید، بعد php artisan serve روی ۸۰۰۰. دیتابیس برای دمو الزامی نیست.

بعد از اجرا

### تم را مال خود کنید

رنگ، شعاع و فاصله در theme-faraz.css. نشانهٔ خانه در سایدبار SVG است؛ با لوگوی فروشگاه عوضش کنید.

۰۷

## برای چه کسی ساخته شده

قالب رابط است با دادهٔ نمونه؛ منطق انبار و درگاه را شما روی همین اسکلت می‌گذارید. ارزش‌اش این است که ظاهر و پشته را یک‌جا می‌خرید.

HTML را نشان می‌دهید، React را می‌سپارید، یا Next را به یک مشتری و Laravel را به مشتری دیگر می‌دهید. طرح یکی می‌ماند؛ پوشه عوض می‌شود.

فراز · پنج نسخه در یک بسته

### فریلنسر و استودیوی کوچک

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

### تیم محصول فروشگاه

کاتالوگ، سبد، سفارش و فاکتور از قبل چیده شده‌اند. نمودارها جای خالی گزارش را پر می‌کنند تا بک‌اند را به اسکلت خالی وصل نکنید. فارسی و شمسی در هر پنج نسخه سر جایش است.

### تیم React یا Vue

روت‌ها، لایوت و صفحات آماده است. Vite و Next جدا هستند تا مجبور نباشید یکی را به دیگری خم کنید. Vue پورت جدا دارد تا کنار پروژهٔ React روی یک ماشین بالا بیاید.

### تیم Laravel

Livewire همان ظاهر را سروری می‌کند. برای فروشگاهی که PHP ستون است و نمی‌خواهد یک فرانت جدا نگه دارد. صفحات در Livewire و نماها در Blade‌اند؛ استایل از public خوانده می‌شود.

۰۸

## بعد از کار با قالب چه می‌ماند

تعریف از روی تحویل، نه از روی شعار. فراز پنل آمادهٔ فروشگاه است؛ پنج‌بار، برای پنج پشته.

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

نسخهٔ HTML را همان روز باز می‌کنید. اگر پروژه React است، faraz-react را با Vite بالا می‌آورید. اگر App Router می‌خواهید، faraz-next روی پورت ۳۰۰۰ همان طرح را دارد. تیم Vue پوشهٔ خودش را برمی‌دارد. تیم PHP همان سایدبار را روی Livewire می‌بیند. لازم نیست قالب را «به فریم‌ورک خودتان برگردانید»؛ برگشت داخل بسته انجام شده است.

نمودارهای داشبورد و فین‌تک با Chart.js روی دادهٔ نمونه‌اند تا صفحه خالی نماند. گالری محصول، سبد چندحالت، سفارش و پرداخت برای این است که اسکلت فروشگاه را حدس نزنید. قطعات رابط — دکمه تا مودال — برای صفحه‌ای است که خودتان اضافه می‌کنید و باید با بقیه یکی بماند.

### یک طرح. شصت‌وپنج صفحه. پنج نسخه.

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

رنگ را در تم عوض کنید، لوگو را بگذارید، دادهٔ واقعی را جای نمونه بنشانید. بقیهٔ مسیر — راست‌چین، شمسی، پنج پشته — از قبل طی شده است.