Files
adminpanel/README.md
2026-03-26 15:17:16 +03:00

3.8 KiB

ParsShop Frontend

پنل مدیریت فروشگاه پارس‌شاپ - ساخته شده با Vue 3 و TypeScript

ویژگی‌ها

  • 🔐 سیستم احراز هویت کامل (OTP و Username/Password)
  • 📱 طراحی ریسپانسیو
  • 🌙 پشتیبانی از حالت تاریک
  • 🎨 استفاده از Tailwind CSS
  • 🔤 فونت YekanBakh برای نمایش بهتر فارسی
  • 📊 داشبورد مدیریتی
  • 🔒 کنترل دسترسی‌ها
  • 🌐 API Integration با NestJS Backend
  • 🔄 Proxy برای حل مشکل CORS

تکنولوژی‌های استفاده شده

  • Vue 3 - فریمورک اصلی
  • TypeScript - برای Type Safety
  • Vue Router - مدیریت مسیرها
  • Pinia - مدیریت State
  • Tailwind CSS - استایل‌دهی
  • YekanBakh Font - فونت فارسی
  • Axios - HTTP Client
  • SweetAlert2 - نمایش پیام‌ها
  • Custom Phone Formatting - فرمت‌دهی شماره تلفن

نصب و راه‌اندازی

پیش‌نیازها

  • Node.js (نسخه 18 یا بالاتر)
  • npm یا yarn

مراحل نصب

  1. کلون کردن پروژه:
git clone <repository-url>
cd parsshop-frontend
  1. نصب dependencies:
npm install
  1. اجرای پروژه در حالت توسعه:
npm run dev
  1. ساخت پروژه برای production:
npm run build

ساختار پروژه

src/
├── assets/          # فایل‌های استاتیک و CSS
├── components/      # کامپوننت‌های قابل استفاده مجدد
├── layouts/         # Layout های مختلف
├── router/          # تنظیمات Vue Router
├── services/        # سرویس‌های API
├── stores/          # Pinia Stores
├── types/           # TypeScript Type Definitions
├── views/           # صفحات اصلی
└── main.ts          # Entry Point

API Backend

این پروژه با یک backend NestJS کار می‌کند که باید روی http://localhost:3000 در دسترس باشد.

Endpoints موجود:

  • GET /api/health - بررسی سلامت API
  • POST /api/auth/otp/request - درخواست کد OTP
  • POST /api/auth/otp/verify - تایید کد OTP
  • POST /api/auth/login/password - ورود با رمز عبور
  • POST /api/auth/register/password - ثبت نام
  • POST /api/auth/refresh - تمدید توکن
  • POST /api/auth/logout - خروج
  • GET /api/auth/me/admin-check - بررسی دسترسی ادمین

صفحات موجود

صفحات احراز هویت:

  • /auth/login - ورود با نام کاربری و رمز عبور
  • /auth/login-otp - ورود با کد یکبار مصرف
  • /auth/verify-otp - تایید کد OTP
  • /auth/register - ثبت نام

صفحات اصلی:

  • /dashboard - داشبورد اصلی
  • /profile - پروفایل کاربری
  • /admin-test - تست دسترسی‌های مدیریتی

ویژگی‌های احراز هویت

  • دو روش ورود: OTP و Username/Password
  • مدیریت توکن: Automatic token refresh
  • کنترل دسترسی: Role-based access control
  • حفاظت مسیرها: Protected routes با navigation guards

تنظیمات

متغیرهای محیطی:

تنظیمات Tailwind:

فایل tailwind.config.cjs شامل تنظیمات سفارشی رنگ‌ها و کلاس‌های مخصوص پروژه است.

مشارکت

برای مشارکت در پروژه:

  1. Fork کنید
  2. Branch جدید بسازید
  3. تغییرات را commit کنید
  4. Pull Request ارسال کنید

لایسنس

این پروژه تحت لایسنس MIT منتشر شده است.