Learning_Management_System_LMS/docs/ARAD_LEARNING_GLASS_CHANGEL...

3.4 KiB
خام سرزنش تاریخچه

Arad Learning Glass — Color Edition

Audit

  • Stack: Next.js 15، React 19، TypeScript، Tailwind CSS و Lucide.
  • Routing: App Router با مسیرهای مستقل Login، Dashboard، Calendar، Apps و System Settings.
  • State: Hookهای Desktop/Window/Dock و Local Storage برای Appearance و Workspace state.
  • Data: Service adapterهای جدا از UI؛ Analytics از API اختیاری و fallback محلی استفاده می‌کند.
  • Theme: AppearanceProvider، semantic CSS variables، Light/Dark/System و accent themes.
  • RTL: lang="fa" و dir="rtl" در Root و کنترل جهت مستقل برای داده‌های LTR.

Design system

  • سه سطح اصلی: Content Surface، Color Surface و Glass Surface.
  • توکن‌های Brand، module colors، surfaces، radius، shadow، spacing و state colors.
  • آیکون‌های یکپارچه Lucide از طریق UiIcon.
  • Touch target حداقل ۴۴px، focus visible، reduced motion و dialogهای دارای focus trap.
  • Glass محدود به Navigation، Dock، Dialog، Search، Quick Settings و لایه‌های شناور است.

تغییرات این مرحله

  • صفحه خانه از Launcher خالی به Learning Workspace سه‌ستونه تبدیل شد.
  • Hero یادگیری، KPIهای نقش‌محور، ادامه یادگیری، پیشنهادها، برنامه امروز، اعلان‌ها و Quick Access اضافه شد.
  • Launcher قبلی با تمام رفتارهای icon/folder/widget به نمای قابل‌تغییر «برنامه‌ها» منتقل شد.
  • صفحه ورود به چیدمان کامل Desktop و فرم تمام‌عرض Mobile ارتقا یافت.
  • ورود با کد سازمانی، Remember Me، راهنمای بازیابی رمز و لینک پشتیبانی اضافه شد.
  • تصویرسازی Login با CSS سبک و بدون asset یا dependency اضافی ساخته شد.
  • Audit browser برای Dark Mode و بستن Dialog گسترش یافت.

صفحات و سطوح موجود در سیستم یکپارچه

  • Dashboard / Learning Workspace
  • Dock / Launcher / Quick actions
  • Login
  • Notification Center
  • Profile Dashboard
  • Global Search / Command Center
  • Quick Settings
  • Organizational Social Network
  • Navigation / Window Workspace
  • Course and Microlearning management

داده و محدودیت Backend

  • KPIها در صورت تنظیم NEXT_PUBLIC_LMS_API_BASE_URL از API دریافت می‌شوند؛ بدون آن از adapter محلی توسعه استفاده می‌شود.
  • فهرست «دوره‌های من» در وضعیت فعلی پروژه به myCoursesMockService متصل است و Endpoint تولیدی در repository وجود ندارد.
  • Authentication فعلی نمونه‌ای و Local Storage-based است؛ هیچ Token، Secret یا API key جدیدی اضافه نشده است.

Verification

  • npm run lint: موفق، بدون خطا.
  • npm run build: موفق؛ TypeScript و ۴۵ route بررسی شدند.
  • Login: ۱۴۴۰×۱۰۰۰ و ۳۷۵×۸۱۲.
  • Dashboard: Light و Dark در ۱۴۴۰×۱۰۰۰.
  • RTL، focus، Escape/dialog و touch targetهای اصلی در Audit مرورگر بررسی شدند.

Screenshots

  • artifacts/arad-glass-login-light.png
  • artifacts/arad-glass-login-mobile.png
  • artifacts/arad-glass-dashboard-light.png
  • artifacts/arad-glass-dashboard-dark.png